TypeScript : 열거형 타입

열거형(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 = {

 

 

 

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