본문 바로가기

FrontEnd/TypeScript

[TypeScript] Enum 타입

본 내용은 이정환님의 "한 입 크기로 잘라먹는 타입스크립트" 강의 내용을 바탕으로 작성되었습니다.

 

Enum(열거형) 타입 : 열거형 타입은 자바스크립트에는 존재하지 않고 타입스크립트에서만 사용 할 수 있는 특별한 타입입니다.

enum Role {
  ADMIN,
  USER,
  GUEST,
}

위과 같이 여러개의 값을 나열하는 용도로 사용합니다.

 

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입
// enum의 각 멤버에는 다음과 같이 숫자를 할당 가능
enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "name1",
  role: Role.ADMIN, //관리자
};

const user2 = {
  name: "name2",
  role: Role.USER, // 회원
};

const user3 = {
  name: "name3",
  role: Role.GUEST, // 게스트
};

위 예시처럼 enum 멤버에 직접 숫자를 할당하지 않아도 0부터 1씩 늘어나는 값을 자동으로 할당합니다.

그리고 enum의 자동 할당되는 값을 0 외의 숫자로 바꾸고 싶으면 시작하는 위치에 값을 직접 할당해주면 됩니다.

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

enum Role {
  ADMIN, // 0 할당(자동)
  USER,  // 1 할당(자동)
  GUEST, // 2 할당(자동)
}


// or

enum Role {
  ADMIN = 10, // 10 할당 
  USER,       // 11 할당(자동)
  GUEST,      // 12 할당(자동)
}

또한 enum 타입은 숫자만 가능한게 아니라 문자열 값도 할당할 수 있습니다.

enum Role {
  ADMIN,
  USER,
  GUEST,
}

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

const user1 = {
  name: "name1",
  role: Role.ADMIN, // 0
  language: Language.korean,// "ko"
};

 

 

enum은 컴파일 될 때 다른 타입들처럼 사라지지 않고 자바스크립트 객체로 변환되게 됩니다.

enum Role {
  ADMIN,
  USER,
  GUEST,
}

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

// ----------------------------------------

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
    Language["japanese"] = "jp";
})(Language || (Language = {}));

 

출처 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8