제네릭

TypeScript #7 제네릭 Generics

TS는 제네릭을 지원한다!

제네릭을 이용하면, 사용하는 시점에 타입을 지정하고 해당타입으로 함수, 클래스등을 이용할 수 있으므로 매우 유용하다.

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

const arr1 = [1,2,3];
getSize(arr1);

배열을 파라미터로 받기 때문에 타입을 지정해주면 위 코드는 문제없이 동작한다.

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

const arr1 = [1,2,3];
getSize(arr1);

const arr2 = ['1','2','3'];
getSize(arr2); //동작하지 않음.

하지만 위 코드는 타입이 불일치하기 때문에 동작하지 않는다.

image.png

만들어진 함수를 타입을 바꿔서 재사용하고 싶다면, 함수 오버로딩을 하거나 유니온 타입을 이용하면 되긴 한다.

그런데 이것도 한계가 있는게, 모든 사용가능한 타입을 다 명시해줄 수 없다. 그래서 일반적인 경우의 함수를 작성해야 하고 이것이 제네릭이 필요한 이유이다.

TS에서 제네릭은 다음과 같은 문법으로 사용한다.

함수명 옆에 타입파라미터를 적어주고, 해당 타입 파라미터를 이용하고 싶은 곳에 이용하면 된다. 일반적으로 타입 파라미터는 대문자 T를 사용하는게 관습이다.

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

이러면 사용하는 쪽에서 타입을 명시하고 원하는 타입으로 사용할 수 있다.

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

const arr2 = ['1','2','3'];
getSize<string>(arr2);