[패캠] 타입스크립트 문법 - 제네릭 인터페이스와 제약 조건 (generic) (17/20)

Fastcampus 프론트엔드 개발 강의

 

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

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

---

이번에는 제네릭 문법을 인터페이스에 적용하는 방법을 배운다.

 

인터페이스에 제네릭 문법 적용

타입스크립트의 인터페이스에서도 제네릭 문법을 사용할 수 있다. 역시 함수나 클래스의 경우와 같이 꺽쇠 괄호를 열고 닫아서 타입 변수 이름을 지정하고, 실제로 사용할 때도 인터페이스 이름 뒤쪽에 꺽쇠 괄호를 열고 닫아서 내가 지정하고 싶은 타입을 넣어서 사용할 수 있다.

interface MyData<T> {
    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: true
}
const dataD: MyData<number[]> = {
    name: 'Data D',
    value: [1,2,3,4]
}

 

제네릭 문법의 제약조건

제네릭에 타입 변수가 지정이 되면 이 부분을 통해서 어떠한 타입이 입력이 되더라도 전혀 문제가 발생하지 않는다. 이때 인터페이스 MyData의 T라는 이름의 타입 변수에서 허용할 수 있는 타입을 문자 혹은 숫자 데이터로만 제한할 수 있다.

아래 코드와 같이 아주 간단하게 extends 키워드를 타입 변수 이름 뒤에 사용하여 타입을 제한해줄 수 있다.

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> = { // Error
    name: 'Data C',
    value: true
}
const dataD: MyData<number[]> = { // Error
    name: 'Data D',
    value: [1,2,3,4]
}

 

extends 키워드는 클래스의 확장 기능, 또 다른 말로 상속을 사용할 때 사용했었다. 위 코드에서 T라는 타입 변수는 결국, string 또는 number 타입을 상속 받아서 해당 타입이어야만 한다는 의미다.

타입 변수에 허용할 수 있는 타입만 extends 키워드를 통해서 Union 타입으로 작성해주면, 그 이외의 타입의 경우에는 Error 발생한다. 즉, 의도적으로 dataC나 dataD 부분의 내용은 작성하지 않도록 타입을 제한할 수 있다.

 

제네릭 문법 총 정리

타입스크립트에서는 제네릭 문법을 사용할 수 있다. 제네릭 문법은 함수, 클래스, 인터페이스에서 사용 가능하다. 함수, 클래스, 인터페이스의 타입 변수 부분에 extends 키워드를 통해서 필요로 하는 제약 조건을 추가할 수 있다. 타입 변수를 한정된 타입으로 제한하여 너무 다양한 타입이 타입 변수로 들어오는 것을 방지할 수 있다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY