고급 TypeScript - 타입 추론: 제네릭 타입 추론

타입 추론: 제네릭 타입 추론

TypeScript가 변수, 함수 매개변수 및 반환 값의 타입을 자동으로 결정하는 기능입니다. 이 과정은 코드 작성 시 개발자가 명시적으로 타입을 지정하지 않아도 TypeScript가 상황에 맞는 적절한 타입을 유추할 수 있도록 합니다. 이는 코드의 가독성을 높이고, 불필요한 반복을 줄여줍니다.

제네릭 타입 추론

제네릭은 다양한 데이터 유형에 대해 동작할 수 있는 함수를 만들 때 사용됩니다. 제네릭 타입 추론은 이러한 제네릭 함수나 클래스에서 인스턴스를 생성하거나 함수를 호출할 때 TypeScript가 전달된 인자를 기반으로 적절한 타입을 자동으로 결정하는 과정을 의미합니다.

예제 1: 기본적인 제네릭 함수

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("Hello World");

위 예제에서 identity라는 제네릭 함수는 입력값 arg의 타입이 무엇인지에 따라 그 값을 그대로 반환합니다. 여기서 <T>는 임의의 데이터 유형을 나타내며, output 변수에는 문자열 "Hello World"가 할당되어 있습니다.

예제 2: 제네릭과 타입 추론

TypeScript는 경우에 따라 직접적으로 데이터를 제공하지 않고도 올바른 타입을 유추할 수 있습니다.

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length); // 배열 길이 출력
    return arg;
}

let numberArray = loggingIdentity([1, 2, 3]); // [1, 2, 3] -> type inferred as number[]

위 예제에서 loggingIdentity 함수는 배열 형태로 인자를 받고 그 길이를 콘솔에 출력합니다. 이때 numberArray를 호출하면서 [1, 2, 3]이라는 숫자 배열을 전달하면 TypeScript는 자동으로 해당 배열의 요소들이 숫자임을 인식하여 number[]로 유추합니다.

활용 사례

  • API 응답 처리: API에서 받아온 JSON 데이터를 처리할 때 사용할 수 있습니다.

    interface User {
        id: number;
        name: string;
    }
    
    function getUserData<T extends User>(userData: T): void {
        console.log(`User ID: ${userData.id}, Name: ${userData.name}`);
    }
    
    getUserData({ id: 1, name: "John Doe" }); // User ID와 이름 출력
    

    위 예제에서는 사용자 정보를 담고 있는 객체를 받아서 해당 정보를 출력하는 함수를 정의했습니다. 이때 전송되는 객체 구조를 기반으로 TypeScript가 올바른 인터페이스를 적용하여 안전하게 사용할 수 있게 해줍니다.

  • 컬렉션 관리: 여러 가지 자료형 컬렉션(리스트 등)을 처리하는 데에도 활용될 수 있습니다.

    class Box<T> {
        private items: T[] = [];
    
        add(item: T) {
            this.items.push(item);
        }
    
        getItems(): T[] {
            return this.items;
        }
    }
    
    const box = new Box<number>();
    box.add(10);
    console.log(box.getItems()); // [10]
    

    여기서는 특정 자료형인 T를 가진 박스 클래스를 만들어 여러 개체들을 추가하고 이를 가져오는 방식입니다. 사용자가 어떤 자료형이라도 상관없이 같은 메소드를 통해 추가하고 꺼낼 수 있도록 도와줍니다.

요약

타입 추론과 특히 제네릭 타이핑은 TypeScript에서 매우 중요한 역할을 하며 코드를 보다 안전하고 효율적으로 작성하도록 돕습니다. 이러한 기능들은 복잡한 애플리케이션에서도 일관성과 안정성을 유지하게 해주어 개발자의 생산성을 향상시키는데 기여합니다.

Subscribe to shimdh.log

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe