[TS] 타입 별칭, 인덱스 시그니처

 

타입 별칭(Type Alias)

타입 별칭을 이용하면 변수를 선언하듯 타입을 별도로 정의할 수 있습니다.

 

type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  location: string
};

let user1: User = {
  id: 1,
  name: "정진경",
  nickname: "ea",
  birth: "19xx.05.20",
  location: "마포구",
}

 

 

 

인덱스 시그니처(Index Signature)

인덱스 시그니처는 객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법입니다. 

때로는 객체의 모든 속성 이름을 미리 알지 못하지만 값의 모양은 알고 있는 경우가 있습니다.

 

type CountryCodes = {
  Korea: string;
  UnitedState: string;
  UnitedKingdom: string;
  // (... 약 100개의 국가)
  Brazil : string
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

 

 

이런 경우에 인덱스 서명을 사용하여 값의 타입을 설명할 수 있습니다.

 

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

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

 

[key: string]: string 부분이 인덱스 시그니처 문법으로 이 객체의 모든 속성들의 key가 string 타입이고 value가 string 타입이라는 의미입니다. 위와 같이 인덱스 시그니처 문법을 사용하면 일일이 속성의 중복되는 타입을 명시해 줄 필요 없습니다. 

 

만약 인덱스 시그니처 문법 외에 타입을 지니는 속성이 추가 된다면 타입 별칭 부분에 추가해 줄 수 있습니다. 

주의할 점은 인덱스 시그니쳐 문법과 함께 사용하는 경우 추가하는 타입 속성의 value의 타입이 인덱스 시그니처에서 선언한 value의 타입과 동일해야 한다는 것 입니다. 

 

type CountryCodes = {
  [key: string]: string;
  ManagerId : string; // ✅ 가능
  // ManagerId : number; ❌ value의 타입이 string이므로 error가 발생한다. ❌
};

let countryCodes: CountryCodes = {
  ManagerId : "1"
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

 

 

하지만 인덱스 시그니처 문법을 사용할때 유니온 타입을 사용한다면 속성 값으로 여러 타입을 사용할 수 있습니다.

 

type CountryCodes = {
  [key: string]: string | number;
  ManagerId : number; // ✅ 가능
};

let countryCodes: CountryCodes = {
  ManagerId : 1
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

 

 

참고 자료

The starting point for learning TypeScript