답변

TypeScript에서는 두 종류의 enum을 지원합니다:

숫자(enum): 기본값은 0부터 시작하여 순서대로 할당됩니다.
문자열(enum): 각 값은 명시적으로 지정되어야 하며, 문자열입니다.

또한 이종(enum)이 있지만, 그 사용은 권장되지 않습니다.

예시:

enum Status { Init, Loading, Ready = 5, Error } // Status.Error === 6

enum HttpCode {
  Ok = 200,
  NotFound = 404,
  Internal = 'INTERNAL_ERROR'   // 오류! 문자열이나 숫자만 가능
}

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
}

상수 값은 컴파일 단계에서 계산됩니다. ENUM 값이 다른 계산이나 표현식(예: 함수)에 의존하는 경우, 이는 계산된 값(computed member)으로 간주됩니다. 이전의 enum 멤버만을 사용하여 현재 멤버의 기본값을 계산할 수 있습니다.

중요한 특징:

숫자 enum은 enum → 숫자 → 문자열-이름으로의 역 매핑을 지원합니다.
문자열 enum은 오직 직렬 연결(이름 → 값)만 지원합니다.
하나의 enum 내에서 타입 혼합 시 컴파일 오류가 발생합니다.

함정 질문

새로운 enum 멤버 선언 시 다른 enum의 값을 사용할 수 있나요?

답변: 예, 다만 이 값이 상수이거나 이전에 선언된 멤버여야 합니다.

예시:

enum A { X = 1 }
enum B { Y = A.X } // OK

그러나 함수 기반 계산이나 다른 곳의 데이터(예: 함수 호출)를 사용할 수는 없습니다.

주제에 대한 세부사항을 모르는 것 때문에 발생한 실제 오류 예시들.

이야기

외부 API에 데이터 직렬화를 위해 숫자 enum이 사용되었습니다. enum 멤버의 순서를 변경하였을 때 값이 "흐트러졌고", 외부 시스템에서 다른 숫자를 받기 시작했습니다. 이로 인해 외부 클라이언트에서 추적할 수 없는 잘못된 상태가 발생했습니다.

이야기

한 React 프로젝트에서 문자열 enum과 숫자 enum을 switch-case에 잘못 사용하여 값이 문자열로 변환될 것으로 기대했습니다. 불일치로 인해 switch가 제대로 작동하지 않았고, 구성 요소는 유효하지 않은 UI를 반환했습니다.

이야기

부분 값이 함수에 의해 계산되는 enum을 만들려고 했을 때, TypeScript는 오류를 던지지 않았지만 여러 번의 빌드에서 값이 undefined로 나타났습니다. 이는 enum이 경로의 식별자로 사용될 때 라우팅 문제를 일으켰습니다. 중요한 오류는 production bundle에서만 재현되었습니다.

TypeScript에서 enum 타입은 어떻게 작동하며, 어떤 종류의 enum이 있으며, 상수 값과 계산된 값의 차이는 무엇인가요? enum 사용 시 발생할 수 있는 함정은 무엇인가요?

답변

함정 질문

주제에 대한 세부사항을 모르는 것 때문에 발생한 실제 오류 예시들.