제네릭(Generic) -제약조건(constraint)

@2023/09/20

안녕하세요 lika-7입니다

이번 시간에는 TypeScript의 제네릭의 제약조건(Generic Constraint)을 사용하는 방법에 대해 정리하겠습니다

제네릭 제약조건 사용 상황(사용 이유)

💡

1. 제네릭은 여러가지 타입을 유연하게 지정하여 사용할 수 있는 문법입니다 2. 제네릭을 이용해 매개변수를 받을 때 매개변수의 타입을 필요한 타입들만 지정해서 받고 싶을 때 가 있습니다. 3. 이 때 제네릭 제약조건을 통해 사용할 수 있는 타입을 제한 할 수 있습니다.

💡

키워드는 제네릭 타입 변수를 선언하는 코드에 “extends” 키워드를 이용해 선언 할수 있습니다

문법

//TypeScript

interface MyData<T extends string | number>{ 
    name: string
    value: T 
}
const dataA: MyData<string> = { 
    name: 'Data A',
    value: 'Hello world!'
}
const dataB: MyData<number> = { 
    name: 'Data B',
    value: 1234
}
const dataC: MyData<boolean> = { 
    name: 'Data C',
    value: false
}
const dataD: MyData<number[]> = { 
    name: 'Data D',
    value: [1,2,3,4]
}

위 코드는 제네릭 타입 변수를 string 타입과 number 타입만 받을수 있는 제약조건을 선언한 코드입니다.

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

1. MyData 인터페이스를 선언 할 때 “T” 타입 변수는 string 타입과 number 타입만을 사용할수 있도록 제약 조건을 설정해주었습니다

✅

extends 라는 키워드를 이용해 제네릭 타입변수 T와 string | number 로 타입을 유니온 하여 제약조건을 새로 설정하였습니다.

const dataA: MyData<string> = { 
    name: 'Data A',
    value: 'Hello world!'
}
const dataB: MyData<number> = { 
    name: 'Data B',
    value: 1234
}

이에 string 타입을 이용하는 dataA와 number 타입을 이용하는 dataB는 사용이 가능하고

const dataC: MyData<boolean> = { 
    name: 'Data C',
    value: false
}
const dataD: MyData<number[]> = { 
    name: 'Data D',
    value: [1,2,3,4]
}

boolean타입을 이용하는 dataC와 number[ ] 타입을 이용하는 dataD는 사용이 불가능하도록 막았습니다

dataC와 dataD는 string | number 제약조건에 의해 사용할 수 없다고 코드상 에러가 나옵니다

정리

이렇게 함수, 클래스, 인터페이스에 제약 조건을 추가하여 의도적으로 다른 타입의 사용을 막을 수 있습니다