답변.

문제의 역사:

Enum은 C/C++ 및 기타 언어에서 유래한 타입으로, 유한한 명명된 상수 집합을 설명합니다. JavaScript에는 없었지만 TypeScript에서는 지원이 구현되었습니다. 성능을 개선하기 위해 const enum이 도입되었는데, 이는 값이 컴파일 단계에서 직접 대체되며, 완전한 객체로서 작동하지 않습니다.

문제:

일반 enum은 JS에서 상당한 양의 보조 코드를 생성합니다(이름<->값의 양방향 연결을 제공하는 객체). 이는 항상 필요하지 않으며, 특히 최대 성능과 최소 번들 크기가 중요한 경우에 그렇습니다.

해결책:

컴파일 시 값 인라인을 필요로 하고 불필요한 코드를 피하려면 const enum을 사용하십시오. 그러나 const enum은 제한이 있습니다. 이들은 TypeScript 프로젝트 내에서만 작동하며, 다양한 모듈로의 변환 시 사용이 어려울 수 있으며, tree shaking 및 import/export에서 문제가 발생할 수 있습니다.

코드 예시:

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

const move = Direction.Left; // JS에서 2로 변환됨

주요 특징:

값이 enum 객체를 생성하지 않고 직접 대체됩니다.
enum 본문에서 복잡한 값이나 계산을 지원하지 않습니다.
내보내기가 불가능합니다(대부분 라이브러리 또는 isolatedModules 사용 시 오류 발생).

트릭 질문.

d.ts 파일과 공용 라이브러리에서 const enum을 사용할 수 있습니까?

아니요. 라이브러리에서는 const enum을 피하는 것이 좋습니다. 이는 컴파일 시에만 인라인 처리되므로, 종종 재구성 및 타입 정의 시 오류를 유발합니다.

isolatedModules 매개변수 또는 babel로 컴파일할 때 const enum을 사용하면 어떻게 됩니까?

오류가 발생합니다: babel과 isolatedModules는 const enum의 인라이닝을 지원하지 않으며, 단일 파일의 컴파일 단계에서 안전한 값 대체를 보장할 수 없습니다.

const enum에서 계산된 값 및 문자열 값을 사용할 수 있습니까?

복잡한 계산(예: 함수나 변수에 의한 표현식)은 금지됩니다. 오직 간단한 숫자와 문자열만 사용할 수 있습니다.

일반적인 오류 및 안티 패턴

라이브러리의 일반 API 또는 .d.ts 파일에서 const enum 사용.
const enum의 인라이닝을 지원하지 않는 변환(예: 특정 플러그인 없이 babel을 통해).
간단한 대신 복잡한 표현식 및 문자열 값을 추가.

실생활 예

부정적 케이스

라이브러리에서 const enum을 게시하고 .d.ts에 설명하였으나 소비자가 최종 번들에 가져올 문자열이 없어 오류가 발생했습니다.

장점:

빠른 실행, 의존 프로젝트에 불필요한 코드 없음.

단점:

사용자에게 컴파일 및 런타임 오류 발생.

긍정적 케이스

프로젝트의 비공식 부분 내에서만 const enum을 사용하고 외부로 내보내지 않았습니다:

const enum Color { Red, Green, Blue }
let arr = [Color.Red, Color.Green];