[TypeScript] 타입별칭(Type Alias) & 인덱스 시그니처(Index Signature)

본 내용은 이정환님의 "한 입 크기로 잘라먹는 타입스크립트" 강의 내용을 바탕으로 작성되었습니다.

 

TypeScript에서 아래 객체리터럴과 같이 타입을 정의하게 되면

let user: {
  id: number;
  name: string;
  birthday: string;
} = {
  id: 1,
  name: "user1",
  birthday: "0000.00.00";
};

let user2: {
  id: number;
  name: string;
  birthday: string;
} = {
  id: 1,
  name: "user1",
  birthday: "0000.00.00";
};

타입에 관한 코드라고 하지만 코드의 중복이 발생하게 됩니다.

이러한 중복을 피하기 위해 타입 별칭(Type Alias)을 사용하면 좋습니다.

 

타입 별칭(Type Alias)는 type 타입_이름 = 타입 형태로 작성할 수 있습니다.

type User = {
  id: number;
  name: string;
  birthday: string;
}
// 위와 같이 작성하게 되면


let user1: User = {
  id: 1,
  name: "user1",
  birthday: "0000.00.00";
};

let user2: User = {
  id: 2,
  name: "user2",
  birthday: "0000.00.00";
};

타입 별칭(Type Alias)를 사용하게 되면 위와 같이 간단하게 타입을 표현할 수 있습니다.

하지만 타입 별칭(Type Alias)는 동일한 스코프에 동일한 이름으로 선언할 수 없습니다.

type User = {
  id: number;
  name: string;
  birthday: string;
}

type User = {} // ❌ 오류

// 스코프가 다르면 가능
function test() {
  type User = string; // ⭕️
}

 

 

또, 객체의 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법인 인덱스 시그니처(Index Signature)가 있습니다.

type CountryCodes = {
  Korea: string;
  UnitedState: string;
  UnitedKingdom: string;
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
};

이때 많은 양의 프로퍼티(국가 코드)가 추가 되어야 한다면 타입 정의에도 각 프로퍼티를 모두 정의해줘야 하기 때문에 매우 귀찮습니다.

type CountryCodes = {
  Korea: string;
  UnitedState: string;
  UnitedKingdom: string;
  // (... 많은 국가)
  Brazil : string
};

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

이때 인덱스 시그니처(Index Signature)를 사용하면 매우 간단해집니다.

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

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

[key : string] : string은 인덱스 시그니처 문법으로 이 객체 타입에는 key가 string 타입이고 value가 string 타입인

모든 프로퍼티를 포함된다 라는 의미입니다.

만약 국가 코드를 숫자로 보관하는 객체가 하나 더 필요하다면 그때 다음과 같은 타입을 정의하면 됩니다.

type CountryNumberCodes = {
  [key: string]: number;
};

또 이때 반드시 포함해야하는 프로퍼티가 있다면 다음과 같이 직접 명시합니다.

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

한가지 주의할 점은 인덱스 시그니처를 사용하면서 동시에 추가적인 프로퍼티를 또 정의할 때엔 인덱스 시그니처 타입과 직접 추가한

프로퍼티의 value 타입이 호환되거나 일치해야 합니다.

type CountryNumberCodes = {
  [key: string]: number;
  Korea: string; // ❌ 오류!
};

type CountryNumberCodes = {
  [key: string]: number;
  Korea: number; // ⭕️
};

 

 

 

 

 

출처 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8