Enum을 사용하면 안되는 이유

 

프로젝트를 하던 중 '고용 형태' 를 열거형 enum타입으로 d.ts 확장자 파일에서 설정해주고 사용하려고 했는데,
해당 파일에서 enum 타입을 as const로 export해서 사용할때 잘 안되는 것을 확인하여 이유를 찾아보면서,

일단 d.ts확장자는 컴파일 시점에서만 사용되며, 런타임에는 포함되지 않기에 동작이 안되는 것을 확인하였다.
(enum은 실제 런타임 값을 생성하는 구조체 이기에!!)

그치만 다른 ts파일에서도 enum을 사용하려고 조금 더 알아 보면서, 
enum을 깡으로 쓰는것은 안티 패턴이라는 글을 많이 찾아보게 되었다.

이유부터 말하자면

1. enum은 Typescript에서 열거형 기능을 만들기 위해 생성한 기능으로 , 다시 JS로 트랜스파일이 되면서 번들러에서 TreeShaking을 못하게 되는 문제가 있다
2. number일 경우 enum형은 안전하지 않을 수 있다.

해결책은

1. const enums 
const 지정자를 열거형에 붙여 정의하는 것이다. 트랜스 파일이 될때 기존 함수가 아닌 직접 매핑이 일어나고, 트리쉐이킹도 정상적으로 동작한다.
일반적인 열거형과 달리 컴파일 과정에서 완전히 제거된다.
2. union Type 사용
가장 권장되는 방법이다. 위의 const 선언 방법은 번들링 과정에서 파일 크기에 있어서 더 효율적이나,
babel등에서 트랜스파일이 안되는 경우가 있다고 한다.

 

const ODirection = {
    Up: 0,
    Down: 1,
    Left: 2,
    Right: 3,
} as const;

 

이런 식으로 모던 타입스크립트에서는 as const를 대신 사용하면 enum을 사용할 필요가 없다.

 

export const DIRECTION = {
	UP: 0,
	DOWN: 1,
	LEFT: 2,
	RIGHT: 3,
} as const;
type DIRECTION = typeof DIRECTION[keyof typeof DIRECTION];

이런식으로 해당 열거형 타입도 선언해서 사용 할 수 있다.

 

참고글 

https://www.typescriptlang.org/ko/docs/handbook/enums.html