[TypeScript] Typescript에서 Enum이란 ?

TypeScript

 

Typescript는 Javascript와 다르게 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보다 속성값에 타입이 한정됨으로 오는 이점, 속성은 한정지을 수 있는 이점이 잇습니다.

 

참고자료

Typescript Enum이란?