열거형(Enum) 타입

2025. 4. 4. 16:34프론트엔드/TypeScript(공부)

728x90

# 🧾 Enum(열거형) 타입 정리

TypeScript의 `enum` 타입은 여러 값을 직관적으로 정의하고 관리하기 위한 전용 타입입니다.

---

## 🔸 1. 열거형(Enum) 타입이란?

- JavaScript에는 없고 **TypeScript에서만 제공**되는 타입입니다.
- 여러 개의 값을 **이름 있는 상수로 나열**하여 가독성과 안전성을 높입니다.
- 숫자 또는 문자열 값을 그룹으로 정의할 수 있습니다.

---

## 🔹 2. 기본 문법

```ts
enum Role {
  ADMIN,
  USER,
  GUEST,
}
  • Role.ADMIN → 0
  • Role.USER → 1
  • Role.GUEST → 2 (자동 증가)

🔸 3. 숫자 열거형 (Numeric Enum)

✅ 숫자값 직접 할당

enum Role {
  ADMIN = 10, // 시작 값을 10으로 설정
  USER,       // 11 (자동 증가)
  GUEST,      // 12 (자동 증가)
}

const user = {
  name: "이정환",
  role: Role.ADMIN, // 10
};
  • 값을 설정하지 않으면 기본값은 0, 이후 1씩 자동 증가
  • 시작값을 지정하면 나머지는 그 뒤부터 자동으로 증가

🔹 4. 문자열 열거형 (String Enum)

✅ 문자열 값 할당

enum Language {
  korean = "ko",
  english = "en",
}

const user = {
  name: "이정환",
  language: Language.korean, // "ko"
};
  • 모든 멤버의 값이 문자열인 경우
  • "ko"나 "en"처럼 직접 문자열을 입력하는 실수 방지

🔸 5. Enum 활용 예시

🛡️ 권한 관리 예시

enum Role {
  ADMIN,
  USER,
  GUEST,
}

const user1 = { name: "이정환", role: Role.ADMIN };
const user2 = { name: "홍길동", role: Role.USER };
const user3 = { name: "아무개", role: Role.GUEST };

🌐 언어 설정 예시

enum Language {
  korean = "ko",
  english = "en",
  japanese = "jp",
}

const user = { name: "이정환", language: Language.korean };

🔹 6. Enum의 컴파일 결과

enum은 런타임에도 존재하는 객체로 컴파일됩니다.

숫자 Enum 컴파일 예시

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));

문자열 Enum 컴파일 예시

var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
})(Language || (Language = {}));

문자열 enum은 역방향 매핑이 지원되지 않음 (숫자 enum만 가능)


✅ 요약 정리

항목 설명

숫자 Enum 기본값 0, 이후 자동 증가. 필요 시 시작값 설정 가능
문자열 Enum 명시적으로 문자열 값 설정. 오타 방지 효과
런타임 객체 enum은 컴파일 후 객체로 변환되어 JS에서도 사용 가능

 

728x90