Enum 타입

한 입 크기로 잘라먹는 타입스크립트 - 열거형 타입 Enumerable Type

1. enum 타입
열거형 타입으로, 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입.
자바스크립트엔 없고 타입스크립트에서만 제공되는 새로운 타입.

- src/chapter5.ts

// 왜 enum 타입을 사용하는가?
// role 의 숫자에 따른 명칭을 까먹을 수 있으므로, 이를 방지하기 위해 enum 사용
enum Role {
    ADMIN = 0 // 0 : 관리자
  , USER = 1  // 1 : 일반 유저
  , GUEST = 2 // 2 : 게스트
}
const user1 = {
    name: '송진성'
  , role: Role.ADMIN
};
const user2 = {
    name: '홍길동'
  , role: Role.USER
};
const user3 = {
    name: '아무개'
  , ;role: Role.GUEST
}

// enum 값이 잘 들어갔는지 확인하기 위한 콘솔 출력
console.log(user1, user2, user3);

콘솔로 출력되는 값을 확인하기 위해 터미널에서 tsx 명령어를 실행한다.

- Terminal

tsx src/chapter5.ts
    { name: '송진성', role: 0 } { name: '홍길동', role: 1 } { name: '아무개', role: 2 }

잘 할당된 것을 확인할 수 있다.
Role 에 숫자할당을 제거하고 다시 실행한다.

- src/chapter5.ts

enum Role {
    ADMIN
  , USER
  , GUEST
}
...

- Terminal

tsx src/chapter5.ts
    { name: '송진성', role: 0 } { name: '홍길동', role: 1 } { name: '아무개', role: 2 }

숫자를 할당하지 않아도 자동으로 맨 위부터 0, 1, 2... 순서로 할당되기 때문이다.
Role 의 맨 위에 10을 할당하게 되면 그 다음 멤버부터는 +1 되어 할당되게 된다.

- src/chapter5.ts

enum Role {
    ADMIN = 10
  , USER
  , GUEST
}
...

- Terminal

tsx src/chapter5.ts
    { name: '송진성', role: 10 } { name: '홍길동', role: 11 } { name: '아무개', role: 12 }

중간 멤버에 10 을 할당하고 실행한다.

- src/chapter5.ts

enum Role {
    ADMIN
  , USER = 10
  , GUEST
}
...

- Terminal

tsx src/chapter5.ts
    { name: '송진성', role: 0 } { name: '홍길동', role: 10 } { name: '아무개', role: 11 }

첫 번째 멤버엔 0, 이후 10을 할당한 그 다음 멤버부터는 +1 되어 할당된다.
이렇게 숫자가 할당되는 enum 을 '숫자형 enum' 이라고 부른다.

이번엔 문자열 값을 enum 에 할당해 본다.

- src/chapter5.ts

...
// 문자형 enum
enum Language {
    korean = 'ko'
  , english = 'en'
}

const user1 = {
    name: '송진성'
  , role: Role.ADMIN
  , language: Language.korean
};
...

- Terminal

tsx src/chapter5.ts
    { name: '송진성', role: 0, language: 'ko' }

enum 은 특이하게도 컴파일 결과가 사라지지 않는다.

- Terminal

tsc

- dist/chapter5.js

// 왜 enum 타입을 사용하는가?
// role 의 숫자에 따른 명칭을 까먹을 수 있으므로, 이를 방지하기 위해 enum 사용
var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 10] = "USER";
    Role[Role["GUEST"] = 11] = "GUEST";
})(Role || (Role = {}));
// 문자형 enum
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
})(Language || (Language = {}));
const user1 = {
    name: '송진성',
    role: Role.ADMIN,
    language: Language.korean
};
const user2 = {
    name: '홍길동',
    role: Role.USER,
    language: Language.english
};
const user3 = {
    name: '아무개',
    role: Role.GUEST
};
// enum 값이 잘 들어갔는지 확인하기 위한 콘솔 출력
console.log(user1, user2, user3);
export {};

컴파일된 자바스크립트 파일을 확인하면, enum 이 자바스크립트의 객체로 변환되고 있는 것을 확인할 수 있다.


참고링크 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#

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