Typescript 기초 문법 4- 제너릭

 

제너릭(Generic)

- 함수, 클래스, 인터페이스에서 사용 가능

 

15. 제너릭- 함수

interface Obj {
 x: number
}

type Arr = [number, number] // 튜플 타입, 

// 오버로딩
function toArray(a: string, b: string): string[]
function toArray(a: number, b: number): number[]
function toArray(a: Obj, b: Obj): Obj[]
function toArray(a: Arr, b: Arr): Arr[]
function toArray(a: any, b: any) {
 return [a,b]
}

이런식으로 오버로딩 선언을 계속 추가하면 비효율적이니 제너릭을 사용한다.

// 제너릭 문법 사용 (T는 Type의 약어)
// 어떤 type을 받을지 아직 모른다. 
function toArray<T>(a: T, b: T) {  // T는 타입정보를 들고있음
 return [a,b]
}

toArray('Neo','May') // 'Neo'가 매개변수 a에 할당되면서 제너릭 T는 string이 된다 (타입 추론)
or
toArray<string>('Neo','May') // T는 string이라고 명시적으로 지정
* 타입스크립트가 타입추론 할 수 있는 상황을 만드는 것이 좋다.

toArray(true, 'false') // 에러발생, T는 boolean으로 추론되었으므로
toArray([1,2], [3,4,5]) // 에러x , T는 일반 배열 타입으로 인식(number[])
toArray<Arr>([1,2],[3,4]) // 명시적으로 튜플타입을 작성해준다.

 

16. 제너릭- 클래스

 

17. 제너릭- 인터페이스, 제약 조건

interface MyData<T> {
 name: string
 value: T
}

const dataA: MyData<string> = {
 name: 'Data A',
 value: 'Hello'   // T가 string
}

const dataB: MyData<number> = {
 name: 'Data B',
 value: 1234    // T가 number
}

const dataD: MyData<number[]> = {
 name: 'Data D',
 value: [1,2,3,4]    // T가 number배열
}

 

 

// 제약조건 (constraints)

T가 모든 타입을 받지않고 제한을 두고 싶을 때

// T를 문자데이터와 숫자데이터로만 제한

interface MyData<T extends string | number> {   // T라는 type 변수는 string이나 number의 타입 내용을 상속받는다
 name: string
 value: T
}