[TS] Enum vs Object

회사의 소스코드를 보던 중에 문득 들었던 궁금증에 대해서 해결해보고자 합니다.

Enum과 Object의 차이를 알아보고, 어떤것을 사용하는것이 좋은지 결론을 내보겠습니다.

네이버 블로그식 질질끌기 포스팅을 제일 싫어해서.. 빠르게 써보겠습니다.

​

결론부터 내면 object가 as const로 type assertion을 해서 충분히 사용 가능하면 enum은 필요없다 입니다.

Enum

• TS에서 자체적으로 구현한 열거형으로 C의 enum과 유사합니다.
• '자체적' 이라는 말에서 알 수 있듯, js에는 존재하지 않습니다.

​

Enum은 어떻게 트랜스파일 될까?

• IIFE(즉시실행함수표현) 의 형태로 변환됩니다.

• js의 object는 멀쩡하게 나오는것을 볼 수 있습니다.

​

Enum이 Object보다 나은 장점

• enum의 member들을 value에서 다시 사용할 수 있습니다. (object는 되지 않습니다)

• param의 타입들을 정의할때 굉장히 편리합니다. (object는 type assertion과 union이 없으면 enum처럼 잡아주지 않습니다)

​

Enum의 단점

• 번들링시에 tree-shake가 되지 않습니다. 사용하지 않는 코드를 제거해주는 그런것들이 없습니다. (자세한 내용은 아래 링크를 참조해주세요)
  • https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/
• IIFE의 형태로 표현되는데 이것은 최종적으로 번들파일의 사이즈의 증가를 의미합니다.
• Enum을 사용한 코드가 502B 입니다.

• Enum대신 const Enum을 사용한 경우 입니다. 418B 입니다.

​

const enum은 어때?

• enum의 단점들이 좀 커보입니다. 번들파일이 크면 클수록 네트워크를 통해서 받아오는 시간이 길어지므로 초기 로딩시간이 늦춰지게 되기 때문입니다.
• ts docs에서는 const enum을 제안합니다.
• const enum을 사용하면, 트랜스파일 후에 enum이 보이지 않습니다. 그리고 인라인으로 들어가게 됩니다.
  • 주석은 또한 번들링 될때 다 사라지게 됩니다. Object보다도 가벼운것 같습니다.

​

무조건 const enum이 좋은거 아닌가?

• Computed member를 사용할 수 없습니다.
  • LENGTH : "123".length 이런것들이 불가능 합니다.
• 바벨에서 const enum을 사용하려면 `babel-plugin-const-enum` 을 설치해야 합니다.
  • 요즘 바벨을 안쓰는곳이 거의 없기때문에.. 불필요한 플러그인의 추가를 뜻합니다.
• Typescript의 --isolateModules 가 활성화된 환경에서는 큰 의미가 없습니다.
  • https://www.typescriptlang.org/tsconfig#references-to-const-enum-members

​

괜찮아 보이면 뭔가 설치를 하거나 제약이 있고.. 편하면 번들 사이즈가 큰데.. 뭐 더 나은게 없나?

​

Object with as const (Union Type으로 쓰기)

• object에 as const를 붙여서 장점들을 거의 다 살릴 수 있습니다.
  • enum처럼 사용할 수 있으면서, tree-shake도 잘 되는것을 확인할 수 있습니다.
  • value에서 computed 속성을 사용할 수 있습니다.
    • 대신에 Union type으로 표현이 되지 않습니다.

 

const ODirection = { Up: 0, Down: 1, Left: 2, Right: 3, } as const;
type dir = typeof ODirection[keyof typeof ODIRECTION]; // 0|1|2|3

 

• 위의 코드를 보면 2가지 의문점이 생깁니다.
  • 왜 as const 를 붙였는지?
  • enum처럼 function xx(dir : ODirection)은 안되나?

​

• 왜 as const일까?
  • as const를 사용하지 않아도 됩니다. 하지만 사용하지 않으면 enum처럼 enum외의 멤버를 인자로 넘기더라도 오류를 뱉지 않습니다.
    • primitive가 아닌 object나 arr은 내부 값이 다른 타입들로 막 수정될 수 있기에 보다 넓은 범위로 추론됩니다.
    • 하지만 as const를 사용함으로써 추론 범위를 줄일 수 있습니다.

​

• enum처럼 function xx(dir : ODirection)은 안되나?
  • ODirection은 value이므로 type이 될 수 없습니다.

​

​

결론

단순 소스코드를 편하게 짜려면

• enum > as const === const enum
  • type을 그대로 넘길 수 있고, 별다른 플러그인이나 ts 옵션에 영향을 받지 않기에 좋습니다.

​

번들된 파일 사이즈도 생각하고, 팀원들이 조금 귀찮음을 감수해준다면

• as const >= const enum > enum
  • 그런데 소스코드에 enum이 굉장히 많은데, 이 모든걸 Union type으로 바꾸는건 힘들것입니다.
  • 그렇다면 const enum을 사용하고 플러그인을 설치하는것이 더 낫겠다는 생각이 들었습니다.

​

​

ETC

• enum은 bundle시에 uglify가 되지 않습니다.
  • 처음에는 무조건 단점 아닌가? 싶었는데, 특정 상황에서는 장점으로 이용할 수 있습니다.
    • 활용은 팀원분이 알려주셨는데 uglify가 안되는것도 처음 알았습니다.

 

Reference

• https://www.typescriptlang.org/ko/docs/handbook/enums.html#objects-vs-enums
• https://medium.com/@seungha_kim_IT/typescript-3-4-const-assertion-b50a749dd53b
• https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/

​