타입스크립트의 타입 별칭과 인덱스 시그니처

타입스크립트

---

이번에는 타입 별칭과 인덱스 시그니처에 대한 이야기를 해볼 것이다. 천천히 따라오자!

타입 별칭

타입 별칭이란, 여러 변수의 타입을 하나의 "타입"으로 모아서 선언한 이후 마치 변수처럼 쓸 수 있게 만드는 것이다. 예시코드를 살펴보자.

// 타입 별칭
type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

let user: User = {
  id: 1,
  name: '이정환',
  nickname: 'winterlood',
  birth: '1997.01.07',
  bio: '안녕하세요',
  location: '부천시',
};

User라는 타입을 따로 선언해 주고 이걸 user라는 변수에 할당해 준 것을 볼 수 있다.

이걸 하면, 일일히 변수마다 타입을 선언할 필요 없이 하나의 타입만 써두면 되니 편하다.

다만, 이미 선언한 타입 별칭이 중복되어서 또 선언할 수 없다. 이 부분 조심하자.

함수의 처리

// 타입 별칭
type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

function test() {
  type User = string;
}

이때, 함수를 만든다고 해보자. 함수인 test() 안에서 User라는 타입은 string으로만 처리된다. 그 밖에 스코프는 그대로 처리된다.

---

인덱스 시그니처

인덱스 시그니처는 언제 쓸까?

> 당신이 선언해야 할 타입이 "동일하고 그 수가 엄청 많을 때" 사용한다. 타입 선언을 뭐 5개를 해야 한다면 상관없지만, 당신이 다니고 있는 회사가 저장하는 타입이 200개라면? 200개를 전부 string 선언해야 할까? 생각만 해도 너무 끔찍하다. 이를 막기 위한 문법이 인덱스 시그니처라고 생각하면 된다.

관련 코드 >

// 인덱스 시그니처
type CountryCodes = {
  [key: string]: string;
};

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

countryCodes에 들어가는 국가가 200개이고 전부 string이면 그냥 key값을 주고 string 처리해주면 된다.

---

이때 만일 인덱스 시그니처에 추가적인 값을 할당해주고 싶다면? 그 안의 프로퍼티는 "동일"해야 한다.

관련 코드 >

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

---

관련 글 >

https://ts.winterlood.com/156628c8-e779-4ea9-b40b-a77dd083e214

타입 별칭과 인덱스 시그니쳐 - 타입스크립트 기본

(이정환 님의 강의 교재입니다. 오픈되어 있으며 공유 가능함을 확인하였습니다.)