[TypeScript] 제네릭

제네릭

• 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 TS의 기능
• 제네릭 함수는 두루두루 모든 타입의 값을 적용할 수 있는 범용적인 함수다.

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

let num = func(10);
// any 타입

let str = func("string");
// any 타입

• 다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수를 만들려고 한다.
• 이 때 다양한 타입의 매개변수를 받기 위해 매개변수의 타입을 any로 정의했다.
• 그랬더니 누가 봐도 10, string인 변수의 타입이 any로 고정되어 버렸다.
• 이는 func 함수의 반환값 타입이 return문을 기준으로 any라고 추론되었기 때문이다.
• 이렇게 되어 버리면 num.toUpperCase() 같은 터무니 없는 메서드를 작성해도 오류를 감지하지 못해 런타임 시 에러가 난다.

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

let num = func(10);
// unknown 타입

let str = func("string");
// unknown 타입

num.toUpperCase(); // ❌
num.toFixed(); // ❌

• any 타입이 아니라 unknown 타입으로 정의해보니 toUpperCase 같은 터무니 없는 메서드는 오류로 감지한다.
• 하지만 toFixed같이 number 타입에 적용되는 메서드 또한 오류로 감지되어 버린다.
• 이를 해결하기 위해선 if (typeof num === 'number') 를 작성해 비효율적으로 타입을 좁혀줘야만 한다.
• 내가 원하는 것은 매개변수의 타입이 그대로 반환값의 타입으로 나오는 것이다. 이를 위해 제네릭을 사용할 수 있다.

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

let num = func(10);
// number 타입

• 함수 이름 뒤에 꺽쇠를 열고 타입을 담는 변수인 타입 변수 T를 선언한다.
• 매개변수와 반환값의 타입을 이 타입 변수 T로 설정한다.
• T에 어떤 타입이 할당될지는 함수가 호출될 때 결정된다.
• 따라서 매개변수의 타입에 따라 T의 타입이 추론된다.

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

let arr = func<[number, number, number]>([1, 2, 3]);

• 제네릭 함수를 호출할 때 타입 변수에 할당할 타입을 직접 명시할 수도 있다.
• number 배열이 있을 때 튜플 타입으로 할당하고 싶다면 <> 안에 튜플 타입으로 적어주면 된다.

 

---

 

 **출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)