Typescript Enum이란?

Javascript와 다르게 Typescript에서는 Enum을 제공합니다.

Enum이 무엇인지, Enum을 사용하면 어떤 이점이 있는지 알아봅시다.

Enum?

enum 은 enumerated type(열거형)을 의미합니다.

Enum은 값들의 집합을 명명하고 이를 사용할 수 있게 합니다. 일반적으로 우리가 사용하고 있는 열거자들은 주로 식별자입니다. 예를들면 boolean 을 들 수 있습니다.

많은 컴퓨터언어들에서 사용자들이 새로운 열거형을 정의할 수 있게 하고있습니다. 기존 JS에서는 Enum을 제공하지 않아 상수들의 집합을 정의하고 싶은 경우 이를 해결하기 어렵기 때문에 Enum이 필요했었습니다.

추가적 이점

추가적으로 Enum을 사용하여 얻을 수 있는 이점들은 다음과 같습니다.

• 상수를 사용할때보다 IDE의 적극적인 지원을 받을 수 있습니다.
• 변경범위가 줄어듭니다.

Typescript 에서의 Enum

Typescript Enums

Typescript에서 enum 이라는 키워드로 Enum을 사용하는 것이 가능합니다. 간단한 예제와 함께 Typescript에서 Enum을 어떻게 사용하는지 확인해봅시다.

예제: MyStatus

나 자신의 상태 값들의 집합을 만들어봅시다.

우선 Typescript에서 제공하는 타입을 생각해보면 string 으로 지정해볼 수 있을 것 입니다.

const status: string = '자는중';

하지만 나의 상태를 string 으로만 정의하기에는 범위가 너무 넓다고 생각이 듭니다. 예를들어 나느 내가 죽는 상태 '사망' 는 status 에 담고싶지 않아도 string 으로만 정의되어있기 때문에 담아질 수 있습니다. 이를 개선해봅시다.

우선 Union 과 String Literal Types 를 사용하여 범위를 조금 더 좁혀볼 수 있습니다.

type MyStatus = '자는중' | '공부하는중' | '노는중' | '일하는중';

const status: MyStatus = '자는중';

이러한 상태 값들을 UI에 표츌하고자 백엔드에서 받아온 코드 값을 사용하려 하지만, 이를 모두 정의하고 사용하기는 쉽지 않습니다.

이런 경우, object 와 같이 key, value 쌍으로 타입의 값과 이름을 붙여 가독성을 크게 높일 수 있습니다.

enum MyStatus {
    sleep = '자는중';
    study = '공부하는중';
    play = '노는중';
    work = '일하는중';
};

// 만약 백엔드에서 받아온 코드 값이 sleep이라면?
const status: MyStatus = MyStatus.sleep;

Enum의 추가적인 이점 중 변경 범위가 줄어듬을 간단한 상황을 통해 예제에서 확인해보고자 합니다.

만약 모든 상태들이 UI에 표현될때 sleep 의 경우 '자는중'이 아닌 '수면중' 으로 바뀌었다면, 위의 코드를 조금만 바꿔 이를 수정할 수 있을 것 입니다.

enum MyStatus {
    sleep = '수면중';
    study = '공부하는중';
    play = '노는중';
    work = '일하는중';
};

객체와의 차이

위의 예제를 보면, JS의 object 를 사용하는 것과 차이가 없어보입니다. enum 을 사용하는 것이 어떠한 차이점을 갖는지 알아보고자 합니다.

• object 는 코드내에서 새로운 속성을 자유롭게 추가할 수 있지만, enum 은 선언할때 이후에 변경할 수 없습니다.
• object 의 속성값은 JS가 허용하는 모든 타입이 올 수 있지만, enum 의 속성값으로는 문자열 혹은 숫자만 허용됩니다.

마무리

Enum이 무엇인지 알아보고 Typescript에서 enum 을 어떻게 사용하는지 예제를 통해 알아보았습니다. 우리가 상수집합의 선언이 필요한 경우 enum 을 사용하고 이는 기존 JS의 object 보다 속성값에 타입이 한정됨으로 오는 이점, 속성을 한정지을 수 있는 이점이 있었습니다.

참고자료

• https://ko.wikipedia.org/wiki/열거형
• https://hyunseob.github.io/2017/07/18/typescript-enums/
• https://medium.com/@seungha_kim_IT/typescript-enum을-사용하는-이유-3b3ccd8e5552
• https://www.typescriptlang.org/docs/handbook/enums.html