(Typescript) 제너릭 generic이란? 사용 방법

 

제너릭이란?

코드를 작성하다 보면 input 타입에 따라 return 타입을 제어해야 하는 경우가 생긴다.

 

이 경우 any 타입을 사용하면 자유롭게 입력 타입과 반환 타입을 설정할 수 있지만, 타입 안정성이 떨어져서 연결이 끊어진다.

 

그렇다고 타입이 다른 함수를 각각 정의하려니 코드가 반복되어 비효율적이다.

이런 문제를 해결하기 위해 등장한 것이 바로 제너릭(generic)이다.

 

제너릭은 코드의 재사용성을 높이고, 타입 안전성을 유지하면서 다양한 타입을 처리할 수 있게 해주는 강력한 기능이다.

 

제너릭(generic)을 사용하면 반복되는 코드를 아래와 같이 간단하게 나타낼 수 있다.

//같은 기능에 타입만 다른 함수들을 반복적으로 선언해야한다.
function returnNumber(item: number): number {
  return item;
}
function returnString(item: string): string {
  return item;
}
function returnBoolean(item: boolean): boolean {
  return item;
}

//제너릭을 사용하면 간단하게 선언할 수 있다.
function returnInput<T>(item: T): T {
  return item;
}

 

 

 

 

제너릭 기본 사용 방법

 

제너릭은 input 타입을 인지하고, 이를 기반으로 return 타입을 도출해 낸다.

 

제너릭을 사용하고 싶으면 선언에 <T>를 추가하면 된다.

 

이때 <> 사이에 들어있는 T는 관습적으로 사용되는 글자로 type의 약자이다.

 

꼭 T를 사용할 필요는 없고, 원하는 것을 사용해도 무방하다.

 

또한 함수 호출 시 타입스크립트가 타입을 명확하게 추론할 수 있다면 <타입>은 생략해도 된다.

function returnInput<T>(item: T): T {
  return item;
}

returnInput<string>("abc");
returnInput("abc"); //타입 추론 가능 : <>생략 가능

 

 

다중 제너릭 사용법

다중 타입을 받아와야 할 때는 다중 제너릭을 사용할 수 있다. 

 

아래 예시에서 함수는 두 가지 타입의 인수를 받는다.

function merge<U, V>(first: U, second: V): [U, V] {
  return [first, second];
}

const merged = merge(1, "one");

 

 

 

 

제너릭 제약 조건 (extends)

제너릭을 사용하다 보면 특정 인터페이스를 확장해야 하거나,

 

특정 서브타입이어야 하는 등 제약이 필요할 때가 있다.

 

이 경우 extends 키워드를 사용하여 제약 조건을 추가할 수 있다.

 

아래의 첫 번째 예시에서는 인터페이스를, 두 번째 예시에서는 object를 확장한다.

 

 

 

 

첫 번째 예시의 printDoubleLength 함수는 제너릭 타입 매개변수 T가 Lengthy 인터페이스를 확장한다.

 

이를 통해 thing 매개변수가 length 속성을 반드시 가지도록 보장한다.

interface Lengthy {
  length: number;
}

//인터페이스를 확장받는 제너릭
function printDoubleLength<T extends Lengthy>(thing: T): number {
  return thing.length * 2;
}

 

 

 

 

아래 예제에서 merge 함수는 제너릭 타입 매개변수 T와 U가 각각 object 타입을 확장한다.

 

이를 통해 두 객체를 병합하여 반환한다.

//object 확장받는 제너릭
function merge<T extends object, U extends object>(object1: T, object2: U) {
  return {
    ...object1,
    ...object2,
  };