[TypeScript] 타입 별칭과 인덱스 시그니처

☁️ 타입 별칭(Type Alias)

타입 정의를 마치 변수처럼 하게 해주는 문법

여러 프로퍼티가 들어있는 객체를 여러번 선언하는 경우 타입을 모두 선언해주는건 매우 번거롭다.

이때 타입 별칭을 이용해 변수를 선언하듯 타입을 별도로 정의해서 사용할 수 있다.

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

let user1: User = {
    id:1,
    name: "김기지",
    nickname: "kiji",
    birth: "1996.07.10",
    bio: "hello",
    location: "수원"
};

let user2: User = {
    id:2,
    name: "기지",
    nickname: "공주",
    birth: "1996.07.10",
    bio: "hello",
    location: "수원"
}

• type 타입이름 = 타입 형태로 타입을 정의
• 정의한 타입 별칭을 이용해 객체 타입을 선언

 

⚠️ 타입 별칭은 동일한 스코프에 중복된 이름으로 타입 별칭을 선언하면 오류가 발생한다.

변수 선언과 유사하게 동일한 스코프에 동일한 이름의 타입 별칭을 선언하는 것은 불가능하다.

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

 

타입 별칭은 타입 관련 문법이기 때문에 컴파일 결과 사라진다.

function a() {
}
let user1 = {
    id: 1,
    name: "김기지",
    nickname: "kiji",
    birth: "1996.07.10",
    bio: "hello",
    location: "수원"
};
let user2 = {
    id: 2,
    name: "기지",
    nickname: "공주",
    birth: "1996.07.10",
    bio: "hello",
    location: "수원"
};
export {};

 

 

---

☁️ 인덱스 시그니처(Index Signature)

객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법

타입 별칭으로 타입을 정의한 후 추가로 수많은 프로퍼티를 추가하는 경우 하나하나 타이핑을 한다면 굉장히 불편할 것이다.

이때 인덱스 시그니처 문법을 사용해 간단하게 해결할 수 있다.

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

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

• [key : 타입 ] : 타입 형태로 타입을 정의
  • [key: string]: string -> key가 string 타입이고 value가 string 타입인 모든 프로퍼티를 포함

 

여기서 인덱스 시그니처는 정의된 타입에 위반되지만 않으면 모두 허용하기 때문에 빈 객체를 할당한 경우에도 오류가 발생하지 않는다.

let empty :CountryCodes = {};

따라서 반드시 포함해야 하는 프로퍼티가 있다면 직접 명시해도 된다.

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

 

⚠️ 인덱스 시그니처를 사용하면서 추가적인 프로퍼티를 정의할 때에는 각각의 value 타입이 호환되거나 일치해야한다.

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

• string 타입은 number 타입과 호환되지 않기 때문에 오류가 발생 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의