TypeScript Enum 가이드

1. Enum이란?

Enum(열거형)은 TypeScript에서 관련된 상수들의 집합을 정의하는 기능입니다. 관련된 값들을 그룹화하고 타입 안전성을 제공합니다.

2. Enum의 주요 특징

2.1 숫자형 Enum (Numeric enums)

enum Direction {
  Up = 1,    // 1부터 시작
  Down,      // 2
  Left,      // 3
  Right      // 4
}

// 사용 예시
let direction: Direction = Direction.Up;
console.log(direction); // 1 출력

2.2 문자열 Enum (String enums)

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

// 사용 예시
let direction: Direction = Direction.Up;
console.log(direction); // "UP" 출력

2.3 계산된 멤버 (Computed members)

enum FileAccess {
  None,
  Read = 1 << 1,
  Write = 1 << 2,
  ReadWrite = Read | Write
}

3. Enum의 장점

3.1 타입 안전성

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE"
}

function setStatus(status: Status) {
  // ...
}

setStatus(Status.Active); // OK
setStatus("ACTIVE");      // Error: 타입 불일치

3.2 자동 완성 지원

enum Color {
  Red,
  Green,
  Blue
}

let color: Color = Color. // IDE에서 Red, Green, Blue 자동 완성 제공

4. Enum의 컴파일 결과

// TypeScript 코드
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 = {}));

5. Const Enum

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

// 컴파일 결과: enum이 완전히 제거되고 값만 남음
let direction = 0; // Direction.Up

6. Enum의 실제 사용 예시

6.1 API 응답 상태

enum ResponseStatus {
  Success = 200,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404,
  ServerError = 500
}

6.2 사용자 역할

enum UserRole {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST"
}

6.3 주문 상태

enum OrderStatus {
  Pending = "PENDING",
  Processing = "PROCESSING",
  Shipped = "SHIPPED",
  Delivered = "DELIVERED",
  Cancelled = "CANCELLED"
}

6.4 함수에서의 사용

function handleResponse(status: ResponseStatus) {
  switch (status) {
    case ResponseStatus.Success:
      // 성공 처리
      break;
    case ResponseStatus.BadRequest:
      // 잘못된 요청 처리
      break;
    // ...
  }
}

6.5 객체에서의 사용

interface User {
  id: number;
  name: string;
  role: UserRole;
}

const user: User = {
  id: 1,
  name: "John",
  role: UserRole.Admin
};

7. Enum 사용 시 주의사항

• enum은 런타임에 실제 객체로 존재하므로 번들 크기에 영향을 줄 수 있습니다.
• const enum을 사용하면 컴파일 시점에 값으로 대체되어 번들 크기를 줄일 수 있습니다.
• 문자열 enum은 숫자 enum보다 더 명시적이지만, 더 많은 메모리를 사용합니다.
• enum은 TypeScript에서만 사용 가능하며, JavaScript로 컴파일될 때 추가 코드가 생성됩니다.

8. Enum vs Union Type

// enum 사용
enum Status {
  Active,
  Inactive
}

// union type 사용
type Status = "Active" | "Inactive";

// union type의 장점
// - 더 간단한 타입 시스템
// - JavaScript와의 호환성
// - 더 작은 번들 크기

9. 결론

Enum은 TypeScript에서 강력한 타입 시스템을 제공하며, 관련된 상수들을 그룹화하고 타입 안전성을 보장하는데 유용합니다. 하지만 프로젝트의 요구사항과 성능 고려사항에 따라 enum 또는 union type을 선택하는 것이 좋습니다.