TypeScript : 타입 별칭과 인덱스 시그니쳐

타입 별칭(Type Alias)

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

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

type 타입_이름 = 타입 형태로 타입을 정의합니다. 위 코드는 타입 이름으로는 User 그리고 타입으로는 여러개의 프로퍼티가 있는 객체 타입을 정의했습니다.

 

이렇게 만든 타입 별칭은 다음과 같이 변수의 타입을 정의할 때 타입 주석과 함께 이용할 수 있습니다.

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: "부천시",
};

let user2: User = {
  id: 2,
  name: "홍길동",
  nickname: "winterlood",
  birth: "1997.01.07",
  bio: "안녕하세요",
  location: "부천시",
};

 

참고로 동일한 스코프에 동일한 이름의 타입 별칭을 선언하는 것은 불가능합니다. 마치 변수 선언과 유사합니다.

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

type User = {}

 

그러나 스코프가 다르다면 다음과 같이 중복된 이름으로 여러개의 별칭을 선언해도 상관 없습니다.

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

function test() {
  type User = string;
}

test 함수 내부에서는 User가 string 타입이 되고 test 함수 바깥에서는 User가 객체 타입이 됩니다.

이전 시간에 타입 관련 문법은 컴파일과 함께 모두 사라진다고 살펴보았습니다. 타입 별칭 또한 타입 관련 문법이기 때문에 컴파일 결과 사라집니다.

let user = {
    id: 1,
    name: "이정환",
    nickname: "winterlood",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location: "부천시",
};
let user2 = {
    id: 2,
    name: "홍길동",
    nickname: "winterlood",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location: "부천시",
};
export {};

 

인덱스 시그니처(Index Signature)

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

다양한 국가들의 영어 코드를 저장하는 객체가 하나 있다고 가정합니다.

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

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

 

만약 이때 countryCodes에 100개의 프로퍼티(국가 코드)가 추가 되어야 한다면 타입 정의에도 각 프로퍼티를 모두 정의해주어야 하기 때문에 매우 불편할 것 입니다.

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 타입인 모든 프로퍼티를 포함된다 라는 의미입니다.

따라서 Korea : “ko”나 Brazil : “bz” 처럼 key와 value가 모두 string 타입인 이런 프로퍼티들 이 타입에 자동으로 모두 포함됩니다. 굳이 일일이 이런 타입들을 직접 명시할 필요가 없습니다

 

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

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

 

한가지 주의할 점은 인덱스 시그니쳐를 사용하면서 동시에 추가적인 프로퍼티를 또 정의할 때에는 인덱스 시그니쳐의 value 타입과 직접 추가한 프로퍼티의 value 타입이 호환되거나 일치해야 합니다. 따라서 다음과 같이 서로 호환되지 않는 타입으로 설정하면 오류가 발생합니다.

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

 

string 타입은 number 타입과 호환되지 않기 때문입니다.

 

 

출처 : 한 입 크기로 잘라먹는 타입스크립트(TypeScript)