enum..

export enum GenderType {
  MALE = '남성',
  FEMALE = '여성',
}

Javascript에는 타 언어(예를 들면 Java) '번들러'라는 개념이 존재한다. 번들러는 'Tree-Shaking'이라는걸 하기도 하는데,

enum은 Javascript 런타임 객체로 컴파일된다. -> 번들에 포함된다.

불필요 코드를 발견해도 런타임에서 객체로 동작하므로 번들러가 Side-Effect로 간주해 Tree-Shaking할때 건들지 못한다.

그럼 뭘 써야하나

1. 객체 리터럴 + as const

export const gender_type = {
  MALE: '남성',
  FEMALE: '여성',
} as const; 

• 'MALE' | 'FEMALE' 쓰고싶을때

type GenderKey = keyof typeof gender_type;

• '남성' | '여성' 쓰고싶을때

type GenderValue = typeof gender_type[GenderKey];

객체 리터럴 + as const의 장점

• 불필요한 양방향 매핑 제거
• 런타임 코드 최소화
• 트리셰이킹 정상 작동

2. 간단한 경우, Union Type을 활용

type Gender = '남성' | '여성'

그래도 enum을 쓰면 좋을 때는 없나?

1. 양방향 맵핑(*)이 필요할 때
2. 기존 enum 리팩토링에 너무 많은 시간을 투자해야될 때
3. 런타임에 사용할 필요가 있을 때

*단방향 매핑 vs 양방향 매핑

특징	단방향 매핑	양방향 매핑
데이터 흐름	한 방향으로만 가능	양쪽 모두 가능
TypeScript 구현 예시	객체 리터럴(as const)	enum
런타임 코드 생성	없음 (TypeScript에서 제거됨)	있음 (런타임 객체 생성)
사용성	메모리 효율적, 단순한 데이터 구조	키와 값 간의 변환이 필요할 때 유용
트리 셰이킹	트리 셰이킹에 적합	런타임 객체로 인해 트리 셰이킹 방해 가능

References

https://www.typescriptlang.org/docs/handbook/enums.html
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions
https://webpack.js.org/guides/tree-shaking/
https://webpack.js.org/guides/tree-shaking/
https://blog.logrocket.com/typescript-enums-vs-objects-key-differences/
https://dev.to/swyx/why-i-dont-use-typescript-enums-dhj