[타입스크립트 기본] 열거형 타입

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

chapter5.ts 를 생성해 실습했습니다.

 

열거형(Enum) 타입

열거형 타입은 자바스크립트에는 존재하지 않고,

오직 타입스크립트에서만 사용할 수 있는 특별한 타입입니다.

열거형은 다음과 같이 여러 개의 값을 나열하는 용도로 사용합니다.

enum Role {
  ADMIN,
  USER,
  GUEST,
}

3개의 멤버 ADMIN, USER, GUEST 를 

나열한 열거형 타입을 하나 만들었습니다.

설명 편의상 앞으로 열거형 타입을 enum 이라 통칭하겠습니다.

 

enum 의 각 멤버에는 다음과 같이 숫자를 할당할 수 있습니다.

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

 

또 다음과 같이 enum 의 멤버들의 값으로도 활용할 수 있습니다.

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

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, // 게스트
};

user1.role 에는 0 이,

user2.role 에는 1 이,

user3.role 에는 2 가 할당됩니다.

이렇듯 유저의 권한과 같은 여러 개의 멤버를 갖는 값을 숫자로 표기할 때

enum 을 이용해 보다 안전하고 직관적으로 관리할 수 있습니다.

 

참고로 다음과 같이

enum 멤버에 숫자 값을 직접 할당하지 않아도

0 부터 1씩 늘어나는 값으로 자동 할당됩니다.

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

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

const user1 = {
  name: "이정환",
  role: Role.ADMIN, // 0
};

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

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

자동 할당되는 값은 기본적으로 0 부터 시작합니다.

 

만약 이 값을 변경하고 싶다면,

다음과 같이 시작하는 위치에 값을 직접 할당하면됩니다.

그럼 자동으로 해당 위치 아래의 멤버들은 1씩 증가된 값으로 할당됩니다.

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

enum Role {
  ADMIN = 10, // 10 할당 
  USER,       // 11 할당(자동)
  GUEST,      // 12 할당(자동)
}

const user1 = {
  name: "이정환",
  role: Role.ADMIN, // 10
};

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

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

특별히 이렇게 멤버의 값이 모두 숫자인 enum 을

"숫자형 enum" 혹은 "숫자 열거형 타입" 이라고 부릅니다. 

---

문자열 열거형

enum 의 멤버에는 숫자 말고도

문자열 값도 할당할 수 있습니다.

따라서 만약 다음과 같이

국가별 언어를 열거하는 enum 이 필요하다면,

각 멤버에 문자열 값을 할당하면 됩니다.

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

이렇듯 모든 멤버의 값이 문자열 값인 enum 을

특별히 "문자열 enum" 이라고 부릅니다.

숫자형 enum 과 동일하게

다음과 같이 프로퍼티의 값으로 사용할 수 있습니다.

enum Role {
  ADMIN,
  USER,
  GUEST,
}

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

const user1 = {
  name: "이정환",
  role: Role.ADMIN, // 0
  language: Language.korean,// "ko"
};

문자열 enum 을 사용하면,

user1.language 같은 프로퍼티에 실수로 'ko' 라고 적었어야 할 것을

오타가 발생해 'kos' 로 적거나 또는 

순간적으로 헷갈려 'KO-kr' 처럼 적는 실수를 방지할 수 있습니다.

---

enum 은 컴파일 결과 객체가 된다

enum 은 컴파일될 때

다른 타입들처럼 사라지지 않고, 자바스크립트 객체로 변환됩니다.

따라서 위에서 했던 것처럼 값으로 사용할 수 있습니다.

tsc 를 이용해 chapter5.ts 를 컴파일하고, 결과를 살펴보면

정의한 enum 이 다음과 같이 자바스크립트 객체로 변환된 걸 확인할 수 있습니다.

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
    Language["japanese"] = "jp";
})(Language || (Language = {}));
const user1 = {