타입스크립트 고급 타입 (Index Signatures, Indexed Access Types, Mapped Types, Template Literal Types)

인덱스 시그니처 (Index Signatures)

인터페이스 내부에 [Key: K]: T 꼴로 타입을 명시해주면

해당 타입의 속성 키는 모두 K 타입이어야 하고 속성값은 모두 T 타입을 가져야 한다는 의미다.

위처럼 속성값에 해당하지 않는 타입을 정의하면 에러가 발생한다.

 

인덱스드 엑세스 타입 (Indexed Access Types)

다른 타입의 특정 속성이 가지는 타입을 조회하기 위해 사용된다.

인덱스에 사용되는 타입 또한 그 자체로 타입이기 때문에 유니온 타입, keyof, 타입 별칭 등의 표현을 사용할 수 있다.

 

또한 배열의 요소 타입을 조회하기 위해 사용하는 경우가 있다.

PromotionList 데이터에서 타입을 추론하고 싶을 때

T[0]는 해당 ElementOf의 <>에 들어온 어떤 unknown 배열의 원소인덱스의 type parameter을 반환한다.

ElementOf에는 PromotionList 원소의 type 값인 {type: string; name: string;} 이 들어있다.

이제 이 PromotionItemType을 필요한 곳에서 사용할 수 있다.

 

그런데 TestList 가 하나 더 있다고 생각해 보자.

Indexed Access Type을 사용하지 않는다면

매번 List를 typeof 하여 타입을 추론해주어야 할 것이다.

이 과정을 추상화하여 재사용성을 높인 제네릭 활용방법이라고 할 수 있겠다.

 

맵드 타입 (Mapped Types)  & 템플릿 리터럴 타입 (Template Literal Types)

맵드 타입은 다른 타입을 기반으로 한 타입을 선언할 때 사용하는 문법이다. 인덱스 시그니처 문법을 사용한다.

 

여기서 type BOTTOM_SHEET_ID 는 BottomSheetMap의 key를 type으로 가진다.

=> "STICKER" | "BASE"

 

type BottomSheetStore 는 BOTTOM_SHEET_ID 를 돌면서 해당 index 값에 '_BOTTOM_SHEET' 문자열을 붙여 키로 가진다.

템플릿 리터럴 문자열을 사용하여 문자열 리터럴 타입을 선언했다.

 

 

출처:

책 [우아한 타입스크립트 with 리액트 - 우아한형제들 웹프론트개발그룹]

자문:

1ilsang