TypeScript - 제네릭 (Generics)

Generic을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다. 선언할 때는 그냥 Type Parameter만 적어 주고, 선언할 때 사용하는 타입을 결정한다.

function getSize<T>(arr: T[]):number {
    return arr.length;
}

const arr1 = [1, 2, 3];
getSize<number>(arr1); // 3

const arr2 = ["a", "b", "c"];
getSize<string>(arr2); // 3

위와 같이 함수에 제네릭 타입을 설정하면 함수를 사용할 때 타입을 지정하여 사용할 수 있다.

interface Mobile<T> {
    name: string;
    price: number;
    option: T;
}

const m1: Mobile<{ color: string; coupon: boolean;}> = {
    name: "s21",
    price: 1000,
    option: {
        color: "red",
        coupon: false,
    },
};

const m2: Mobile<string> = {
    name: "s20",
    price: 900,
    option: "good",
};

제네릭을 사용하여 하나의 인터페이스를 선언하고 다양한 객체를 만들 수 있다.

function showName<T extends { name: string }>(data: T): string {
    return data.name;
}

위와 같이 제네릭에 extends를 사용하면 name에 string 값을 가지는 것으로 타입을 설정할 수 있다.

제네릭은 코드를 재사용하는 측면에서 아주 유용하다!