[TS] 제네릭 사용법

  • 제네릭은 일반화된 데이터 타입으로 함수나 클래스 등의 내부에서 제네릭은 어떤 타입이든 될 수 있다.

함수의 제네릭

  • 어떤 함수의 매개변수나 반환 값에 다양한 타입을 넣고 싶을 때 제네릭을 사용할 수 있다.
function fn<T>(arg: T): T {
  return arg;
}

호출 시그니처의 제네릭

  • 호출 시그니처는 타입스크립트의 함수 타입 문법으로 함수의 매개변수와 반환 타입을 미리 선언하는 것을 말한다. 타입 시그니처라고도 한다.
  • 호출 시그니처를 사용할 때 제네릭 타입을 어디에 위치시키는지에 따라 타입의 범위와 제네릭 타입을 언제 구체 타입으로 한정할지 결정할 수 있다.
// foo를 사용할 때 타입을 명시함으로써 제네릭 타입을 구체 타입으로 한정
interface foo<T> {
  fn: (arg: T) => T;
}

// Fn 타입의 함수를 실제 호출할 때 제네릭 타입을 구체 타입으로 한정
type Fn = <RequestData = void, ResponseData = void>(
  baseURL: string
) => [RequestData, ResponseData];

제네릭 클래스

  • 제네릭 클래스는 외부에서 입력된 타입을 클래스 내부에 적용할 수 있는 클래스이다.
  • 제네릭 클래스를 사용하면 클래스 전체에 걸쳐 타입 매개변수가 적용된다. 특정 메서드만을 대상으로 제네릭을 적용하려면 해당 메서드를 제네릭 메서드로 선언하면 된다.
class LocalDB<T> {
  async put(table: string, row: T): Promise<T> {
    return new Promise<T>((resolved, rejected) => {});
  }

  async get(table: string, key: any): Promise<T> {
    return new Promise<T>((resolved, rejected) => {});
  }
}

class IndexedDB {
  private _DB?: LocalDB<{ key: string, value: Promise<Record<string, unknown>>, keyPath: 'key' }>;

  private DB() {
    if (!this._DB) {
      this._DB = new LocalDB();
    }

    return this._DB;
  }
} 

제한된 제네릭

  • 타입스크립트에서 제한된 제네릭은 타입 매개변수에 대한 제약 조건을 설정하는 기능을 말한다.
  • 타입을 제약하려면 타입 매개변수는 특정 타입을 extends 해야 한다.
  • 타입 매개변수가 특정 타입으로 묶였을 때 키를 바운드 타입 매개변수, string을 키의 상한 한계라고 한다.
function fn<T extends string>(arg: T): T {
  return arg;
}

'TypeScript' 카테고리의 다른 글

[TS] 타입 가드  (1) 2025.01.24
[TS] 타입 확장하기  (0) 2025.01.23
[TS] 타입 조합  (0) 2025.01.21
[TS] 문자열 템플릿 리터럴 타입  (0) 2025.01.17
[TS] Pick, Omit, Select, Remove  (0) 2025.01.15