열거형(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
'프론트엔드 > TypeScript(공부)' 카테고리의 다른 글
| 타입 별칭과 인덱스 시그니처: (0) | 2025.04.04 |
|---|---|
| 객체 타입 정의 (0) | 2025.04.04 |
| 원시 타입과 리터럴 타입 (0) | 2025.04.04 |
| 타입스크립트 컴파일러 옵션 완벽 가이드 (0) | 2025.04.02 |
| 자바스크립트 모듈과 ES 모듈 시스템(ESM) 완벽 정리 (0) | 2025.04.02 |