[TypeScript] 타입 별칭, 인덱스 시그니처, 열거형(Enum) 타입

타입 별칭(Type Alias)

타입 별칭을 사용하면 타입 정의를 마치 변수를 선언하듯 정의할 수 있다.

타입 별칭의 필요성

let user: {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
} = {
  id: 1,
  name: "정은경",
  nickname: "f1rstf1y9",
  birth: "0119",
  bio: "hello",
  location: "Korea",
};

let user2: {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
} = {
  ...
};

만약 위와 같이 동일한 형태의 객체 리터럴 타입을 사용하는 객체가 여러 개 있을 때를 생각해보자. 객체 개수가 적은 지금도 코드의 중복이 발생하고 있어 가독성이 떨어지고, 만약 프로퍼티를 추가라도 했다간 일일이 다 고쳐줘야해서 유지보수하기도 불편하다. 이럴 때 사용할 수 있는 것이 바로 타입 별칭이다.

타입 별칭 정의하기

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

타입 별칭을 이용하기 위해서는 type 타입이름 = 타입 형태로 타입을 정의한다. 위 예제에서는 User라는 이름으로 객체 타입을 정의했다.

 

이렇게 만든 타입 별칭은 마치 변수에 일반적인 타입 주석을 달듯이, 아래와 같이 사용할 수 있다.

let user: User = {
  id: 1,
  name: "정은경",
  nickname: "f1rstf1y9",
  birth: "0119",
  bio: "hello",
  location: "Korea",
};

let user2: User = {
  ...
};

 

타입 별칭 사용 시 주의 사항

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

스코프가 다르다면 동일한 이름의 타입 별칭을 선언할 수 있다.

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

function test() {
  type User = string;
}

컴파일 결과

타입스크립트의 타입 관련 문법을 사용한 코드는 컴파일 후 모두 사라진다. 타입 별칭 역시 타입 관련 문법이므로 컴파일 결과 사라진다.

 

---

인덱스 시그니처(Index Signature)

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

인덱스 시그니처의 필요성

type CountryCodes = {
  Korea: string;
  UnitedStates: string;
  UnitedKingdom: string;
  ...
};

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

위와 같이 여러 국가들의 영어 코드를 저장하는 객체가 있을 때, 만약 국가의 개수가 100개가 넘어간다고 생각해보자. 100개가 넘는 모든 프로퍼티에 대한 타입 정의를 일일이 해주어야하기 때문에 상당히 귀찮은 작업이 될 것이다. 이럴 때 인덱스 시그니처를 이용하면 일일이 모든 프로퍼티에 대해 타입을 정의할 필요없이 간단하게 정의할 수 있다.

인덱스 시그니처 문법 사용하기

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

위와 같이 [key:타입]: 타입 형태로 인덱스 시그니처를 사용할 수 있다. [key:string]: string의 경우 '해당 객체 타입에는 key가 string 타입이고 value가 string 타입인 모든 프로퍼티가 포함된다.'라는 의미를 갖는다. 따라서 countryCodes 객체에 있던 모든 프로퍼티는 key, value가 모두 string 타입이므로 해당 타입에 포함되어서 일일이 타입을 지정해줄 필요가 없어진다.

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

let countryNumberCodes: CounterNumberCodes = {
  Korea: 410,
  UnitedState: 840,
  UnitedKingdom: 826,
};

숫자 코드를 저장하는 객체를 만들고 싶다면 위와 같이 정의해줄 수 있다.

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

let countryNumberCodes: CounterNumberCodes = {
  // ❌ Korea 프로퍼티가 없으므로 오류 발생!
  UnitedState: 840,
  UnitedKingdom: 826,
};

만약 객체에 반드시 포함되어야 하는 프로퍼티가 있다면 직접 명시해줄 수도 있다.

인덱스 시그니처 사용 시 주의 사항

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

만약 인덱스 시그니처를 사용하면서 추가로 특정 프로퍼티의 타입을 명시하고자 할 경우, 인덱스 시그니처의 value 타입과 추가한 프로퍼티의 value 타입이 호환되거나 일치해야 한다. 위의 경우 number 타입과 string 타입은 호환되지 않으므로 오류가 발생한다.

 

---

열거형(Enum) 타입

열거형 타입은 자바스크립트에는 존재하지 않는 타입스크립트의 특별한 타입으로, 여러 개의 값을 나열하는 용도로 사용한다.

열거형 타입의 필요성

const user1 = {
  name: "정은경",
  role: 0, // 0은 관리자
};

const user2 = {
  name: "홍길동",
  role: 1, // 1은 일반 유저
};

const user3 = {
  name: "아무개",
  role: 2, // 3은 게스트
};

만약 위와 같이 객체의 role 프로퍼티의 값에 따라 어떠한 역할을 부여하려고 한다고 생각해보자. 지금은 단순히 숫자로 표현하고 있기 때문에 0, 1, 2가 각각 정확히 어떤 역할을 하는지 코드만으로 파악하기 어렵다. 코드의 양이 늘어나면 관리자에게 어떤 숫자를 저장해야 하고 일반 유저에겐 어떤 숫자를 저장해야 하는지 헷갈릴 수도 있다. 이러한 경우 열거형 타입을 사용해서 보다 안전하고 직관적으로 관리할 수 있다.

열거형 타입 사용하기

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "정은경",
  role: Role.ADMIN,
};

const user2 = {
  name: "홍길동",
  role: Role.USER,
};

const user3 = {
  name: "아무개",
  role: Role.GUEST,
};

위와 같이 열거형 타입 Role을 선언하고, 각 멤버에 값을 지정할 수 있다. 그리고 객체의 값으로 Role의 멤버를 활용할 수 있다.

 

숫자 열거형

만약 멤버를 초기화하지 않으면 자동으로 0부터 1씩 증가하는 값이 할당된다.

enum Role {
  ADMIN, // 자동으로 0 할당
  USER, // 자동으로 1 할당
  GUEST, // 자동으로 2 할당
}

 

또한 만약 값을 초기화한 멤버가 있고, 그 뒤의 멤버들은 값을 초기화하지 않았다면 초기화된 멤버의 값에서 1씩 증가하는 값이 할당된다.

enum Role1{
  A = 10,
  B, // 자동으로 11 할당
  C, // 자동으로 12 할당
}

enum Role2 {
  A, // 자동으로 0 할당
  B, // 자동으로 1 할당
  C = 10,
  D, // 자동으로 11 할당
  E, // 자동으로 12 할당
}

 

문자열 열거형

열거형 타입의 멤버에 문자열을 할당할 수도 있다. 모든 멤버의 값이 문자열 값인 enum을 문자열 열거형이라고 부른다.

enum Language {
  korean = "ko",
  english = "en",
}

const user1 = {
  name: "정은경",
  language: Language.korean,
};

const user2 = {
  name: "홍길동",
  language: Language.korean,
};

const user3 = {
  name: "아무개",
  language: Language.english,
};

컴파일 결과

enum에서 주의할 점은 컴파일될 때 다른 타입처럼 사라지는 것이 아니라, 자바스크립트 객체로 변환된다는 것이다. 그래서 객체 프로퍼티의 값으로 사용할 수 있는 것이다.

 

---

참고

본 포스트는 이정환님의 '한 입 크기로 잘라먹는 타입스크립트(TypeScript)' 강의를 수강하며 작성하였습니다.

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