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

인덱스 시그니처를 사용하여 유연하게 매핑을 표현할 수 있습니다.

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을 사용합니다.
• 값의 타입: 어떤 것이든 될 수 있습니다.

단점

• 잘못된 키를 포함해 모든 키를 허용합니다. name대신 Name을 작성해도 유효한 타입이 됩니다.
• 특정 키가 필요하지 않습니다. {}도 유효한 타입입니다.
• 키마다 다른 타입을 가질 수 없습니다.
• 키는 무엇이든 가능하기 때문에 자동 완성 기능이 동작하지 않습니다.

인덱스 시그니처는 부정확합니다. 그렇기에 더 나은 방법을 찾아야 합니다.

interface Rocket {
  name: string;
  variant: string;
  thrust_kN: number;
}
const falconHeavy: Rocket = {
  name: 'Falcon Heavy',
  variant: 'v1',
  thrust_kN: 15_200
};

위의 케이스 같은 경우에는 인터페이스를 사용하는 방법이 타입스크립트에서 제공하는 언어 서비스를 모두 이용할 수 있습니다.

인덱스 시그니처는 동적 데이터를 표현할 때 사용됩니다.

안전한 접근을 위해 인덱스 시그니처에 undefined 추가하는 것을 고려해야 합니다.
가능하다면 인터페이스, Record, 매핑된 타입 같은 인덱스 시그니처보다 정확한 타입을 사용하는 것이 좋습니다.

string 타입이 너무 광범위해서 인덱스 시그니처를 사용하는 데 문제가 있습니다.
이 문제를 해결 하기위한 첫번째 대안으로는 Record를 사용하는 방법입니다. Record는 키의 유연성을 제공하는 제네릭 타입입니다. 특히, string의 부분 집합을 사용할 수 있습니다.

type Vec3D = Record<'x' | 'y' | 'z', number>;

다른 방법으로는 매핑을 사용하는 방법입니다.

type Vec3D = {[k in 'x' | 'y' | 'z']: number};
type ABC = {[k in 'a' | 'b' | 'c']: k extends 'b' ? string : number};

출처

<이펙티브 타입스크립트> (댄 밴더캅 지음, 장원호 옮김, 인사이트, 2021)