타입스크립트 - 제네릭 함수

C#의 제네릭처럼 타입스크립트의 제네릭도 같은 의미이다.

기능 하나를 여러 타입에 대응되어 동작하도록 하고싶을 때 사용하면 된다.

function func(value: any) {
    return value;
}

위와 같은 함수가 있을 때

let num = func(10);
let bool = func(true);
let str = func('string');

value가 any타입이기 때문에 아무 타입이나 파라미터로 가능하지만, 오류를 나타내지 못한다. 

num.toUpperCase();  //any 타입은 오류를 발생시키지 않으므로 문제가 있음

그러므로 타입스크립트에서는 any타입은 지양해야한다.

function func3<T>(value: T): T {
    return value;
}

제네릭을 사용한다면 다양한 타입에 대한 보장을 받을 수 있게 된다.

제네릭 함수 응용

1. 다중 제네릭 함수

function swap<T, U>(a: T, b: U) {
    return [b, a];
}

제네릭에는 매개변수를 추가하듯 다양한 제네릭을 추가로 작성할 수 있다. 위와 같이 값이 스왑되는 코드를 구현했다면

const [a, b] = swap('1', 2);

제네릭에 의해 다양한 타입으로 매개변수를 받을 수 있게 된다.

2. 배열 내의 제네릭 사용

function returnFirstValue<T>(data: [T, ...unknown[]]): T {
    return data[0];
}

위와 같이 배열 내에서 제네릭을 지정할 수 있다. 위와 같은 코드에선 첫 번째 인수만 제네릭에 해당되어 정확한 타입 추론이 되며, 이후의 타입들은 unknown타입을 반환하게 된다.

function returnFirstValue<T, U>(data: [T, ...U[]]) {
    return data[1];
}

let str = returnFirstValue([1, 'hello', true]);

위와 같이 U 제네릭 매개변수를 추가로 입력한다고 가정하면 str은 무슨 타입이 될까?

정답은 'string | boolean' 유니온 타입이다. 

첫 번째 인수가 T이며 number타입으로 지정되었지만, 다음 배열 인수부터는 U[] 타입인데, 타입 추론은 'hello'와 'true'가 입력되었으므로 'string | boolean' 유니온 타입이 된다.

3. 제네릭 확장

function getLength<T extends { length: number }>(data: T) {
    return data.length;
}

타입스크립트는 특이하게도 <> 안에는 제네릭에 extends 로 추가확장 할 수 있다.

let var1 = getLength([1, 2, 3]);    //3
let var2 = getLength("12345")   //5
let var3 = getLength({ length: 10 });   //10
//let var4 = getLength(10);   //length 프로퍼티가 없는 number타입은 에러

length가 number 타입이라는 객체를 확장하였으므로, length 를 사용할 수 있는데

이것은 배열이나 string, length 객체 등에서는 사용이 가능하나 일반적인 number 타입인 10은 length에 대한 메서드가 없기 때문에 에러를 발생하게 된다.