Item 15 동적 데이터에 인덱스 시그니처 사용하기

Index Signature (인덱스 시그니처)

타입스크립트에서는 타입에 '인덱스 시그니처'를 명시해 유연하게 매핑을 표현할 수 있다.

type Rocket = { [property: string]: string }
const rocket: Rocket = {
  name: 'Falcon 9',
  variant: 'v1.0',
  thrust: '4,940 kN',
}

여기서 { [property: string]: string }를 인덱스 시그니처라고 부른다.

  • 키의 이름: 키의 위치만을 표시하는 용도이며, 타입 체커에서는 사용하지 않는다.

  • 키의 타입: string, number 또는 symbol의 조합이어야 하지만, 보통은 string을 사용한다.

  • 값의 타입: 어떤 타입이든 될 수 있다.

단, 이렇게 타입 체크가 수행되면 네 가지 단점이 있다.

  1. 잘못된 키를 포함해 모든 키를 허용한다. (e.g., name 대신 Name으로 적어도 Rocket 타입이 된다.)

  2. 특정 키가 필요하지 않다. (e.g., {}Rocket 타입이다.)

  3. 키마다 다른 타입을 가질 수 없다. (e.g., thruststring이 아니라 number여야 할 수도 있음)

  4. TS 언어 서비스는 다음과 같은 경우 도움이 안 된다. (e.g., name:을 입력할 때, 키가 무엇이든 가능하므로 자동완성 기능이 동작하지 않음)

정리하면, 인덱스 시그니처는 부정확하므로 더 나은 방법을 써야 한다.

Summary

  • 런타임 때까지 객체의 속성을 알 수 없는 경우(e.g., CSV 파일에서 로드) 인덱스 시그니처를 사용하자.

  • 안전한 접근을 위해 인덱스 시그니처의 값 타입에 undefined를 추가하는 것도 고려해보자. (런타임에서 읽을 때 해당 키가 없으면 undefined가 되므로)

  • 가능하다면 인덱스 시그니처보다는 interface, Record, 매핑된 타입 (e.g., { [k in 'x' | 'y' | 'z']: number })같은 정확한 타입을 사용하는 것이 좋다.

Last updated