[TypeScript] 타입스크립트 타입 별칭과 인덱스 시그니처 (type alias & index signature)

 

 

1. 타입 별칭(type alias)

let user: {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
} = {
  id: 1,
  name: '김도현',
  nickname: 'no_dohyun',
  birth: '2000.10.30',
  bio: '안녕하세요',
  location: '부천시',
};


let user2: {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
  } = {
    id: 1,
    name: '김도현',
    nickname: 'no_dohyun',
    birth: '2000.10.30',
    bio: '안녕하세요',
    location: '부천시',
  };

 

유저의 property개수가 많은 객체를 똑같이 2개만 선언하게 되어도, 코드의 가독성이 굉장히 떨어지고 코드의 양도 증가할 뿐만 아니라, 중복된 코드가 굉장히 많아지게 된다.

 

이러한 경우 타입을 지정하는 부분을 따로 변수처럼 지정할 수 있는 타입별칭(type alias)을 사용한다.

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

let user: User = {
  id: 1,
  name: '김도현',
  nickname: 'no_dohyun',
  birth: '2000.10.30',
  bio: '안녕하세요',
  location: '부천시',
};


let user2: User = {
    id: 1,
    name: '김도현',
    nickname: 'no_dohyun',
    birth: '2000.10.30',
    bio: '안녕하세요',
    location: '부천시',
  };

 

type User와 같이 User라는 타입별칭(type alias) 을 변수처럼 지정하여 사용하기에 중복된 코드를 줄일 수 있다.

 

주의사항: 변수와 마찬가지로, 타입별칭(type alias)은 같은 스코프 내에 같은 이름으로 지정할 수 없다.

 

 

추가적으로 tsc를 통해 ts파일을 컴파일하게 되면, TypeScript에 type 관련 코드들은 컴파일 결과 JavaScript코드에선 다 제거되는데, 타입별칭(type alias)도 마찬가지로 JavaScript에서 없어진 것을 확인할 수 있다.

 

 

let user = {
    id: 1,
    name: '김도현',
    nickname: 'no_dohyun',
    birth: '2000.10.30',
    bio: '안녕하세요',
    location: '부천시',
};
let user2 = {
    id: 1,
    name: '김도현',
    nickname: 'no_dohyun',
    birth: '2000.10.30',
    bio: '안녕하세요',
    location: '부천시',
};
export {};

 

 

 

2. 인덱스 시그니처(index signature)

 

// 인덱스 시그니처
type CountryCodes= {
    Korea: string;
    UnitedState:string;
    UnitedKingdom:string;
}

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

 

위처럼 어떤 나라의 국가코드를 적어두는 객체가 있다고 할 때, 국가의 개수가 엄청 많기 때문에 일일이 모두 Type을 지정하게 되면, 굉장히 번거롭게 된다.

 

또한 대학교 이메일 인증에 관한 객체를 만들 때에도 우리나라에 있는 모든 대학교를 전부 다 type을 지정한다면 끔찍할 것이다.

 

위처럼 Key값과 Value값이 모두 String인 것처럼 규칙이 존재한다면 더 편하게 작성할 수 있는 방법이 없을까?

 

// 인덱스 시그니처
type CountryCodes= {
   [key:string]:string;  //이렇게 사용함
}

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

 

Key값과 Value값이 일정한 규칙을 가지고, 움직이는 많은 양의 객체의 타입을 쉽게 지정할 수 있는 방법인 인덱스 시그니처(index signature) 가 존재한다.

 

 

 

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

let CountryNumberCodes: CountryNumberCodes = {};

 

주의할 점은 위처럼 빈 객체인 경우, 인덱스 시그니처 문법인 [key:string]: number; key값이 string이고 value가 number인 조건을 위반하지는 않기 때문에 오류가 발생하지 않는다.

 

 

그렇다면 어떤 key값이 꼭 존재했으면 좋겠다는 조건을 걸기 위해서는 어떻게 해야 할까?

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

let CountryNumberCodes: CountryNumberCodes = {};//'korea' 속성이 '{}' 형식에 없지만 'CountryNumberCodes' 형식에서 필수입니다.

 

간단히 [key: string]: number; 밑에 필요한 key와 value의 타입을 지정해 주면 된다.

 

 

여기에서 주의해야 할 점은 인덱스 시그니처를 사용하는 어떤 객체 타입에서 추가적인 property를 Korea: number;처럼 지정하기 위해서는, 반드시 추가적인 property Value의 타입이 인덱스 시그니처(index signature)의 Value의 타입과 일치하거나 호환되어야 한다.

type CountryNumberCodes = {
  [key: string]: number;
  korea: string; //'korea' 형식의 'string' 속성을 'string' 인덱스 유형 'number'에 할당할 수 없습니다.
};

let CountryNumberCodes: CountryNumberCodes = { //'{ korea: string; }' 형식은 'CountryNumberCodes' 형식에 할당할 수 없습니다.
    korea:"ko"
};

 

위 코드에서 기본적인 인덱스 시그니처(index signature)의 Value의 타입은 number이지만, 추가한 Property Value의 타입이 string이기 때문에 호환되지 않아, 오류가 발생하는 것을 확인할 수 있다.

 

---

type alias는 중복된 타입 정의 코드를 변수처럼 타입 별칭으로 관리하여 코드의 중복성을 줄일 수 있다.
index signature는 규칙을 기반으로 객체의 type을 굉장히 유연하게 정리할 수 있다.

---

 

 

 

 

 

 

 

- 이 포스팅은 '이정환 - 한 입 크기로 잘라먹는 타입스크립트 (인프런)' 강의를 참고하여 작성되었습니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런