타입스크립트 제네릭

제네릭

: 타입을 마치 함수의 파라미터처럼 사용하는 것

: 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용

: 코드가 수행될때 (런타임) 타입이 명시되는 것임

: 코드를 작성할때 식별자를 써서 아직 정해지지 않은 타입을 표시

: 일반적으로 식별자는 T, U, V를 사용 (필드 이름의 첫 글자를 사용하기도 함)

 

- 예시

function getText<T>(text: T): T {
  return text;
}

getText<string>('hi');
getText<number>(10);
getText<boolean>(true);

: 함수의 입력 값 타입과 반환 값 타입을 가변적으로 조절할 수 있다

 

- 제네릭을 사용하는 이유

function logText(text: any): any {
  return text;
}

: 위와 같이 선언했을때 함수는 문제 없이 동작하지만, 함수의 인자로 어떤 타입이 들어갔고, 어떤 값이 반환되는지 알 수 없다

: 그러나 제네릭을 통해 string이 들어가면 string으로 반환되고 등을 알 수 있다

: 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용

: 재사용성이 높은 함수와 클래스를 생성할 수 있으며 코드의 가독성이 향상되며, 오류를 쉽게 포착할 수 있다

 

 

 

 

 

 

제네릭 인터페이스

interface GenericLogTextFn<T> {
  (text: T): T;
}
function logText<T>(text: T): T {
  return text;
}
let myString: GenericLogTextFn<string> = logText;

 

 

 

 

 

 

제네릭  클래스

class GenericMath<T> {
  pi: T;
  sum: (x: T, y: T) => T;
}

let math = new GenericMath<number>();

 

 

 

 

 

 

 

 

 

Reference

제네릭 | 타입스크립트 핸드북

[TypeScript] 타입스크립트 제네릭(Generic), Factory Pattern with Generics