[TS] TypeScript에서 Enum을 쓰면 안된다! (이유, 방안)

 

 

 

쩝..

우리 회사는 코드리뷰를 하지 않지만 동기가 내 코드를 보고 피드백을 줘서 코드를 고치다가 다시 원점을 돌아간 나의 이야기를 담았다.

 

사건의 전말

moogose에서 사용하는 Model과 type 체크를 위한 Interface에서 공통으로 사용되는 Object들이 있었다.

 

// Model - mogoose에서 사용하는 파일
interface OS {
  IOS: 'IOS';
  Anderoid: 'Anderoid';
}

// Interface - type 체크를 위해 사용되는 파일
const OS = {
  IOS: 'IOS',
  Anderoid: 'Anderoid',
};
export type OS = typeof OS[keyof typeof OS];

위 코드와 같이 확실히 중복되어서 사용하고 있었다.

한 쪽에만 export해서 사용하면 되기 때문에 손 쉽게 중복 해결을 리팩토링 할 수 있었지만 문제는...!

 

export type OS = typeof OS[keyof typeof OS];

동기가 두번째로 피드백을 준 것은 굳이 keyof typeof를 쓸 이유가 있냐는 것이었다.

 

이렇게 string으로 잡히니 type이 안 잡혀서 써주는 의미가 없다고 해서 다른 방법을 알려줬다.

그건 바로 enum을 사용하는 것이었다.

 

그~래서 enum을 사용하려고 이거저거 알아보다가 흥미로운 글을 읽게 되었다.

이 글을 토대로 작성하는 포스팅이기 때문에 한 번쯤 읽어보는 것도 추천한다.

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

 

 

enum을 사용하면 안되는 이유

결론부터 말하면 enum을 사용하면 Tree-shaking(번들링 할 때 사용하지 않는 코드를 제겅하는 과정)이 안되어서 최적화가 안된다.

왜냐하면 enum이라는 개념은 JavaScript에는 없는 오직, TypeScript에서 사용하는 개념이기 때문이다.

TypeScript는 결국 JavaScript으로 변환되기 때문에 JavaScript를 고려해야 한다는 것을 잊지 말자!

 

 

방안

Union Types를 사용하자

const enum을 사용도 방안 중 하나이지만 긴 문자열을 경우 Union Types에 비하면 불리하기 때문에 디폴트로 Union Types를 사용하도록 하자.

 

export const OS = {
  IOS: 'IOS',
  Anderoid: 'Anderoid',
} as const;
type OS = typeof OS[keyof typeof OS];

Union Types는 Interface에서 작성한 코드이다 😆

그렇다.. 난 알지는 못했지만 잘 사용하고 있었던 것이다..

 

export를 붙여서 다른 파일에서도 Union Types를 사용할 수 있도록 해주었다.

근데 왜 type OS가 string으로 잡혔던 것일까..?

이건 내가 잘못 코딩해서였다 😭

 

// Before
const OS = {
  IOS: 'IOS',
  Anderoid: 'Anderoid'
};
export type OS = typeof OS[keyof typeof OS];

// After
const OS = {
  IOS: 'IOS',
  Anderoid: 'Anderoid'
} as const;
export type OS = typeof OS[keyof typeof OS];

 

After을 보면 as const를 추가해줬다.

 

바로 고쳐진 것을 알 수 있다.

 

 

 

마치며

결국 원래 코드로 돌아왔지만 팀원에게 설명할 정도로 enum에 대해서 공부했기 때문에 매우 만족스럽다.

그냥 쓰는 것보다 이유를 알고 쓰는 것이 좋다고 생각한다.

 

 

 

참고

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

 

https://velog.io/@sensecodevalue/Typescript-Enum-%EC%99%9C-%EC%93%B0%EC%A7%80-%EB%A7%90%EC%95%84%EC%95%BC%ED%95%98%EC%A3%A0

[Typescript] Enum 왜 쓰지 말아야하죠?