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

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

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으로 작성해도 유효한 Rocket 타입이 됩니다.
• 특정 키가 필요하지 않습니다. {}도 유효한 Rocket 타입입니다.
• 키마다 다른 타입을 가질 수 없습니다.
• 타입스크립트 언어 서비스는 도움이 되지 못합니다.
  • name: 을 입력할 때, 키는 무엇이든 가능하기 때문에 자동완성 기능이 동작하지 않습니다.

string 타입이 너무 광범위해서 인덱스 시그니처를 사용하는데 문제가 있습니다.

대안

Record를 사용하는 방법이 있습니다.

type Vec3D = Record<'x' | 'y' | 'z', number>;
/* Type Vec3D = {
	x: number;
	y: number;
	z: number;
*/

매핑을 사용합니다.

매핑된 타입은 키마다 별도의 타입을 사용하게 해줍니다.

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