[Typescript] Enum

enum이란

enum은 Typescript가 자체적으로 구현하는 기능입니다.

enum은 여러 값들에 미리 이름을 정의하여 열거해 사용하는 타입입니다.

enum Auth {
    admin = 0, // 관리자를 0으로 표현
    user = 1,  // 회원은 1로 표현
    guest = 2  // 게스트는 2로 표현
}

필요성과 존재 이유

1. 분야별 종류를 정의하여 명확하게 사용하기 위해

예를 들어, 사용자 권한을 관리자 = 0, 회원 = 1, 게스트 = 2로 관리할 경우, 개발자는 관리자 === 0 이라는 점을 기억하고 코딩해야 합니다.

// 관리자 여부를 숫자로 체크한다.
if (userType !== 0) {
    alert("관리자 권한이 없습니다");
}

// 만약 회원 타입이 20종류가 넘어간다면???
// 관리하는 분야가 회원, 게시물, 언어타입 등등 더 늘어난다면?

하지만 enum으로 정의해두면, 사용자 권한 분야만 따로 모아 정의하고, 의미를 명확히 파악해 사용할 수 있습니다. 자동완성까지 되므로 코딩이 편해지고, 실수도 줄어들며, 가독성도 좋아집니다.

// 회원 권한을 enum으로 정의
enum Auth {
    admin = 0, // 관리자
    user = 1,  // 회원
    guest = 2  // 게스트
}

// Auth.admin(==0) 으로 의미있게 값 체크 가능
if (userType !== Auth.admin) {
    alert("관리자 권한이 없습니다");
}

// 누가 코드를 읽어도, 관리자 여부를 체크하는 코드임을 이해할 수 있다!

2. 하드코딩 실수를 줄이기 위해서.

enum을 사용하면 하드코딩을 막고, 실수를 줄일 수 있습니다.

예를 들어 언어 종류를 정의해야하는 경우, 직접 'ko', 'en' 을 하드코딩하면 실수하기도 쉽고,

'ko' 였는지, 'KO' 였는지, 'ko-KR' 이었는지 등을 매번 찾아봐야 합니다.

하지만, enum으로 정의해두면 이런 하드코딩의 폐해를 막을 수 있습니다.

// 언어 종류 관리
enum Languages {
    korean = 'ko', // 문자열을 입력할 수도 있다.
    english = 'en',
    japanese = 'jp',
    chiense = 'cn'
}

// setLanguage("ko-kr") // 하드코딩은 이런 실수를 유발한다.
setLanguage(Languages.korean) // enum 사용시, 의미파악이 쉽고 자동완성까지 된다.

기초 문법

1. enum은 기본으로 0부터 1씩 증가하는 값을 갖는다.

enum Auth {
    admin, // 0 : 별도로 값을 지정해주지 않으면 0부터 시작한다
    user,  // 1 : 이전 값에 1씩 더해진다.
    guest  // 2 : 이전 값에 1씩 더해진다.
}

console.log(Auth.admin);  // 0
console.log(Auth.user);   // 1
console.log(Auth.guest);  // 2

2. 숫자 값을 지정할 수 있다. (정의되지 않은 값은 이전 값에서 1씩 증가한다.)

/*** 2. 숫자 값을 지정해줄 수 있다. 정의되지 않으면 이전 값에서 1씩 증가한다. ***/
enum Articles {
    notice = 100, // 값을 직접 지정 가능
    board = 300,  // 값을 직접 지정 가능
    comment       // 자동으로 앞의 300에 +1 더해줌 => 301
}

console.log(Articles.notice);  // 100
console.log(Articles.board);   // 300
console.log(Articles.comment); // 301

3. 문자열을 지정할 수 있다.

/*** 3. 문자열을 지정해 줄수 있다. ***/
enum Languages {
    korean = 'ko',
    english = 'en',
    japanese = 'jp',
    chiense = 'cn'
}

console.log(Languages.korean);   // "ko"
console.log(Languages.english);  // "en"
console.log(Languages.japanese); // "jp"
console.log(Languages.chiense);  // "cn"

JS 객체와의 차이점

1. enum은 한번 생성되면, 속성 추가 및 수정이 불가하다. 객체는 생성 이후에도 속성을 추가하고 변경할 수 있다.
2. enum은 속성 값으로 숫자, 문자열만 할당할 수 있다. 객체는 온갖 것을 다 넣을 수 있다.

• 즉, enum은 JS객체보다 더 엄격하게 타입을 정의하여 사용할 때 유용하다. (이게 타입스크립트를 사용하는 이유 중 하나이기도 하다)

 

참고: TypeScript enum을 사용하지 않는 게 좋은 이유

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

Tree-shaking 관점에서 보았을 때 아래와 같은 순서로 사용하시길 추천하며 글을 마치겠습니다.

Union Types > const enum > enum