TypeScript의 enum과 const enum의 차이를 비교하고, 대체할 수 있는 방법을 살펴봅시다.

enum과 const enum의 차이점

1. enum의 동작 방식

enum을 사용하면 TypeScript는 이를 실제 JavaScript 객체로 변환합니다. 각enum멤버는 이 객체의 속성이 되며, 이 속성을 통해 값에 접근할 수 있습니다. 이 방식은 코드의 가독성을 높이고, 런타임에서도 enum의 멤버를 동적으로 사용할 수 있게 합니다.

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

위 코드는 컴파일 후 다음과 같은 JavaScript 객체로 변환됩니다:

var Direction;
(function (Direction) {
  Direction[(Direction['Up'] = 0)] = 'Up';
  Direction[(Direction['Down'] = 1)] = 'Down';
  Direction[(Direction['Left'] = 2)] = 'Left';
  Direction[(Direction['Right'] = 3)] = 'Right';
})(Direction || (Direction = {}));

2. const enum의 동작 방식

반면, const enum은 컴파일 시 모든 참조가 상수 값으로 인라인 처리됩니다. 결과적으로, const enum은 런타임에 실제 객체로 존재하지 않으며, 컴파일된 코드의 크기가 줄어들고 성능이 최적화됩니다. 그러나 const enum은 모듈 경계를 넘어 사용할 수 없으며, 디버깅 시 어려움을 겪을 수 있습니다.

const enum Direction {
  Up,
  Down,
  Left,
  Right,
}

위 코드는 컴파일 후 다음과 같이 인라인된 상수로 변환됩니다:

var direction = 0; /* Up */

enum과 const enum의 단점

두 방식 모두 장단점이 있지만, 다음과 같은 단점도 고려해야 합니다.

• 모듈 경계 문제 - const enum은 모듈 간의 상호작용이 어려워 모듈화된 코드에서는 사용하기 까다롭습니다.
  
• 디버깅 문제 - const enum을 사용할 경우, 디버깅 시 값이 인라인된 숫자로 표시되어 문제를 추적하기 어려울 수 있습니다.
  
• 런타임 오버헤드 - 일반 enum은 객체를 생성하기 때문에 런타임 오버헤드가 발생할 수 있습니다.

대체 코드: 객체 리터럴을 사용한 enum 구현

이러한 단점을 피하면서도 비슷한 기능을 구현하기 위해, 객체 리터럴을 사용한 방법을 고려할 수 있습니다. 이 방법은 런타임 오버헤드를 없애고, const enum과 유사한 최적화를 제공하면서도, 보다 유연한 구조를 유지할 수 있습니다.

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

type Direction = (typeof Direction)[keyof typeof Direction];

각각의 단점을 피하면서 비슷한 기능이 필요하다면 as const 객체 리터럴이 좋은 대안입니다.