실제 작동하는 Javascript를 무겁게 만드는 enum과 그 대안 : as const를 활용한 객체

Typescript에서 Javascript으로 변환되는 과정

 

TS를 컴파일하여 JS를 만드는데, 이 컴파일 과정에서 타입스크립트는 타입체크를 하게 된다.

컴파일과정에서 타입체크가 끝나면 타입과 타입연산자는 제거되면서 런타임과 런타임 성능에 영향을 주지 않는다.

 

test.ts가 컴파일 되어 생성된 test.js에는 타입이 제거되어 있다.

 

그런데 enum의 경우 TS에서 자체 제공하는 기능이고 JS에서는 없는 개념이다.

컴파일과정에서 JS에 없는 enum을 구현하기 위해 타입체크를 위한 추가 코드를 생성한다. ( 참고 )

그리고 이렇게 만들어진 추가 코드는 타입이 아니기 때문에 제거되지 않은채로 js로 변환된다.

 

즉, 어플리케이션 로직에는 영향을 주지 않는 오로지 타입체크만을 위한 JS코드가 생기게 되는 것이다 -> 불필요한 코드를 생성한 후 어플리케이션이 실행됨

 

const enum

 

한편, Typescript 공식문서에 const enum을 다음과 같이 소개한다.

To avoid paying the cost of extra generated code and additional indirection when accessing enum values, it’s possible to use const enums.

추가 코드를 생성하는 등의 추가 간접 비용을 피하기 위해 const enum을 사용할 수 있다.

 

그렇다면 const enum을 사용하면 될까??

 

공식문서에는 사용하지 않는것을 추천한다.

 

간단히 말하면 함수 호출과정을 생략하기 때문에 정적인 값이 아닌경우 버그 유발 가능성이 있음 그러니 사용하지 않는것을 추천

 

그렇다면 무엇을 사용해야 할까?

 

as const를 이용한 객체 사용

 

역시 공식문서에서 다음과 같이 이야기한다.

In modern TypeScript, you may not need an enum when an object with as const could suffice:

modern typescript에서는 as const를 사용한 객체를 사용한다면 굳이 enum을 사용할 필요가 없다. 

 

// const enum
const enum EDirection {
  Up,
  Down,
  Left,
  Right,
}
 
// as const를 이용한 객체 사용
const ODirection = {
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3,
} as const;

The biggest argument in favour of this format over TypeScript’s enum is that it keeps your codebase aligned with the state of JavaScript, and when/if enums are added to JavaScript then you can move to the additional syntax.

enum의 경우에는 Javascript에 추가되면서 추가 코드를 만들지만, 위 포맷(as const를 이용한 객체사용)의 경우에는 코드베이스를 JS와 얼라인된 상태로 유지할 수 있기 때문에 위 포맷(as const를 이용한 객체사용)이 Typescript의 enum보다 선호된다.(의역함)

 

결론

 

enum을 사용하거나 사용하지 않는 것은 단순 컨벤션의 문제가 아니라 기능의 문제라고 생각하고, 우리가 만드는 어플리케이션이 불필요한 추가코드를 달고 실행되는것을 원하지 않는다면 enum을 사용하지 않고 as const를 이용한 객체를 사용하는 것이 옳은 판단이라고 생각한다.