TypeScript - const enum에서 as const로 변경

Why 'as const'?

enum과 const enum, as const는 비슷해 보이지만 어떠한 차이점이 있고 무엇을 써야 하는지 고민을 한 뒤 as const로 타입 지정을 바꾸기로 했다. 이유는 아래에서 설명한다.

---

enum

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

TypeScript에서 enum은 다음과 같은 특징을 가진다.

 

1. reversed mapping이 가능하다.

reversed mapping이란 object 안의 객체에 암시적으로 숫자가 mapping되는 것을 의미한다.

enum {
	one // 0
	two // 1
}

이러한 reversed mapping을 통해 역으로 숫자 비교 등을 할 수 있다.

if (one > 0) {
	...
}

one은 0에 매핑되어 있어 if문은 false가 된다.

 

2. 컴파일할 때 사라지지 않는다.

reversed mapping을 위해 보존되는 것 처럼 보인다. 즉시 실행 함수가 생성되며 이 때문에 꽤 큰 코드가 컴파일 이후 남게 된다.

---

const enum

enum과 유사하지만 몇가지 특징이 다른 열거형 타입이다.

TypeScript에서 const enum은 다음과 같은 특징을 가진다.

 

1, inlined되어 컴파일시에 사라진다.

[inlined에 대한 설명]

 

2. 바벨 변환 호환성 문제가 있다.

---

as const

const로 변수를 선언하면 할당된 값으로 타입을 추론 해준다.

TypeScript에서 as const는 다음과 같은 특징을 가진다.

 

1. 변수를 readonly화 해준다.

const를 사용하기 때문에 변수에 불변성이 생겨 의도치 않은 코드 변형을 막아준다.

 

2. ... | undefined가 제거된다.

type ButtonTypeKeys = (typeof ButtonType)[keyof typeof ButtonType];

위와 같이 TypeKeys로 값의 key를 추출하고 해당 값으로 타입을 지정해주면 unedfined를 제거해줄 수 있다.

---

결론

enum의 장단점 표

장점	단점
reversed mapping 가능	reversed mapping을 위해 불필요하게 큰 코드 생성
	런타임에 즉시 실행 js 코드가 생성되어 예상치 못한 문제 발생 가능

const enum의 장단점 표

장점	단점
inlined (컴파일 시 용량 줄어듦)	바벨 변환 호환성 문제 (퇴출 되는 중)

as const의 장단점 표

장점	단점
readonly화 (변형 불가)	reversed mapping 불가
| undefined 제거 가능

reversed mapping이 필요하다면 enum을 사용하고, 그렇지 않다면 as const를 사용한다.

 

references:

[Enum vs as const]

[Typescript의 enum, const enum, as const 에 대해 알아보자]

[Typescript has unions, so are enums redundant?]