lil.dev
Published on

✨ 한 눈에 보는 타입스크립트 #7 제네릭

글쓴이

    📌 목차

    Welcome

    ✨ 한 눈에 보는 타입스크립트

    💁🏻

    1. Intro
    2. 타입스크립트 개요
    3. 개발환경
    4. 타입 기본(Types)
    5. 인터페이스 (Interface)
    6. 타입 별칭 (Type Aliases)
    7. 제네릭 (Generic)
    8. 함수
    9. 클래스
    10. Optional
    11. 모듈
    12. TS 유틸리티 타입
    13. 참고 자료 (References)

    제네릭 (Generic)

    제네릭이란?

    Generic은 재사용을 목적으로 함수나, 클래스의 선언 시점이 아닌,
    사용 시점에 타입을 선언할 수 있는 방법을 제공한다.

    타입을 인수로 받아 사용한다고 이해하면 쉽다.

    제약 조건 (Constraints)

    인터페이스나 타입 별칭을 사용하는 제네릭을 작성할 수 있다.

    만약 타입변수 T가 string과 number인 경우만 허용하려면 아래 예제와 같이
    extends 키워드를 사용하는 제약 조건을 추가할 수 있다.

    T extends U

    interface MyType<T extends string | number> {
  name: string,
  value: T
}

const dataA: MyType<string> = {
  name: 'Data A',
  value: 'Hello world'
};
const dataB: MyType<number> = {
  name: 'Data B',
  value: 1234
};
const dataC: MyType<boolean> = { // TS2344: Type 'boolean' does not satisfy the constraint 'string | number'.
  name: 'Data C',
  value: true
};
const dataD: MyType<number[]> = { // TS2344: Type 'number[]' does not satisfy the constraint 'string | number'.
  name: 'Data D',
  value: [1, 2, 3, 4]
};