[Typescript] 제네릭(Generics)

제네릭을 사용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다.

다양한 타입을 인자로 받을 때 함수 오버로드나 유니온 타입을 사용해도 되지만 타입이 많아질수록 복잡해진다.

선언할 때는 타입 파라미터만 적어주고, 생성하는 시점에 타입을 결정한다.

 

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

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

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

const arr3 = [false, true, true];
getSize(arr3);  // 3

제네릭으로 함수를 선언하고 사용하는 예시이다. 

T를 타입 파라미터라고 한다. 다른 문자를 적어도 되지만 보통 T를 일관적으로 사용한다.

함수를 호출할 때는 타입을 적지 않아도 자동으로 결정된다. 특정 타입으로 제한하고 싶은 경우에만 입력해도 된다.

 

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",
}

제네릭을 사용하여 속성값에 다양한 타입이 올 수 있게 만들 수도 있다.

 

interface User {
    name: string;
    age: number;
}

interface Car {
    name: boolean;
    color: string;
}

interface Book {
    price: number;
}

const user: User = { name: "a", age: 10 };
const car: Car = { name: true, color: "red"};
const book: Book = { price: 3000 };

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

showName(user);
showName(car);   // Error
showName(book);  // Error

extends 키워드로 타입 파라미터의 타입을 제한할 수 있다.

showName 함수의 인자로 받는 객체는 반드시 string 타입의 name 속성을 가져야 한다.