[TypeScript] key-value 데이터에 타입 붙이기 - 인덱스 시그니처

아래와 같은 경우에 인덱스 시그니처를 이용할 수 있다.

• 국가 코드를 담는 key-value 형태의 데이터가 있다고 해보자.
• 국가 코드는 지금은 3개 뿐이지만, 앞으로 200개 가량의 국가가 추가될 거라고 하면
• 200개를 type에 추가해줘야 하는 번거로움이 있다.

type CountryCodes = {
  Korea: string,
  UnitedStates: string,
  UnitedKingdom: string,
  // 2. 여기서 매번 타입을 수정해줘야 한다.
}

const countryCodes: CountryCodes = {
  Korea: 'ko',
  UnitedStates: 'us',
  UnitedKingdom: 'uk',
  // 1. 만약 여기 국가 코드가 추가되어야 한다면?
}

 

 

인덱스 시그니처

type CountryCodes = {
  [key: string]: string;
};

const countryCodes: CountryCodes = {
  Korea: 'ko',
  UnitedStates: 'us',
  UnitedKingdom: 'uk',
};

 

주의할 점 1

단, 인덱스 시그니처는 타입에 명시한 규칙을 위반하지만 않으면 모두 허용한다.

그래서 아래와 같이 텅 비어도 규칙은 위반하지 않았으므로, 에러를 표시하지 않게 된다.

const countryCodes: CountryCodes = {
  // 텅..
};

 

 

주의할 점 2

만약, 한국 코드를 필수로 저장하되, string 뿐만 아니라 number 코드까지 저장하고 싶어서 아래와 같이 작성하면 에러가 발생한다.

추가적인 프로퍼티의 value 타입은 인덱스 시그니처의 value의 타입과 일치하거나 호환해야한다.

type CountryCodes = {
  [key: string]: string;
  Korea: number;
};

const countryCodes: CountryCodes = {
  Korea: 410,
};