본문 바로가기
📌 Front End/└ TypeScript

[TypeScript] 열거형(Enum)타입

by 쫄리_ 2024. 7. 31.
728x90
반응형

열거형(Enum)

열거형(enum)타입은 여러개의 값을 나열하는 용도로 사용된다.
값이 모두 숫자인 enum을 숫자형 enum 혹은 숫자 열거형 타입이라고 부르며,
값이 모두 문자열인 enum을 문자형 enum 혹은 문자열 열거형 타입이라고 한다.
그리고 enum은 컴파일 결과 객체가 된다.


숫자 열거형(Numeric enums)

숫자형 타입에서는 value의 할당을 생략할 수 도 있습니다.
할당을 생략하게 되면 값은 0 부터 차례대로 할당됩니다.

enum State {
  REQUEST,
  LOADING,
  DONE,
  ERROR,
}

console.log(State.REQUEST); // 0

문자열 열거형(String enums)

문자형 타입에서는 값의 할당을 해주어야 합니다.
만약에 빼먹으면 숫자형 타입으로 인식이 됩니다.

enum State {
  REQUEST = "REQUEST",
  LOADING = "LOADING",
  DONE = "DONE",
  ERROR = "ERROR",
}

console.log(State.REQUEST); // "REQUEST"

 


Enum의 사용법

클래스 외부에서 정의해 사용한 예시

 

사용예시

enum Gender {
    Male,
    Female
}

class Saram {
    #gender: Gender;

    constructor(gender:Gender){
        this.#gender = gender;
    }

}

new Saram(Gender.Male);

 

사용예시

// 3명의 사람을 입력한 후 아래의 조건에 맞는 사람만 출력
    // 사람 정보    - 이름, 나이, 직업, 성별
    // 조건         - 20 < 나이 < 50, 직업 직장인
    // 예외         - 나이가 음수인 사람이 선택되면 해당 사람을 제외하고 다음 사람 동작
enum Genders {
    남성,
    여성
};

enum Job{
    직장인, 결정사, 쇼호스트, 배우, 모델, 가수, 아이돌, 기업가
};

class Peoples {
    #name: string;
    #age: number;
    #job: Job;
    #gender: Genders;

    constructor(name:string, age:number, job:Job, gender:Genders){
        this.#name = name;
        this.#age = age;
        this.#job = job;
        this.#gender = gender;
    }

    set Name(name:string) {this.#name = name;}
    get Name():string {return this.#name;}

    set Age(age:number) {this.#age = age;}
    get Age():number {return this.#age;}

    set Job(job:Job) {this.#job = job;}
    get Job():Job {return this.#job;}

    set Gender(gender:Genders) {this.#gender = gender;}
    get Gender():Genders {return this.#gender;}
}

let peoples: Peoples[] = [
    new Peoples('홍길동', 44, Job.가수, Genders.남성),
    new Peoples('권소현', 29, Job.직장인, Genders.여성),
    new Peoples('이리나', 19, Job.직장인, Genders.남성)
];

for(let people of peoples){
    try{
        if(people.Age < 0) throw new Error("음수 나이");
    } catch(e) { continue; }

    if(!(people.Age > 20 && people.Age < 50 && people.Job == Job.직장인)) continue;
    console.log('출력');
    console.log(people.Name);
    console.log(people.Age);
    console.log(people.Job);
    console.log(people.Gender);
}

 


열거형(enum) 키, 값 확인

열거형(enum)타입은 여러개의 값을 나열하는 용도로 사용된다.

  • 열거형 키(Key) 확인
  • 열거형 값(Value) 확인

열거형 키(Key) 확인

열거형에 키가 존재하는지 확인하는 방법입니다.

키가 존재하는지 확인하기 위해 in 연산자를 사용할 수 있습니다.

※ in 연산자로 확인하고자 하는 키(Key)는 

    백틱( ` ) 또는 작은따옴표( ' ) , 큰 따옴표( " )로 감싸줘야 합니다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = "BLUE"
}

console.log("Blue" in Color); // true
console.log("Pink" in Color); // false

열거형 값(Value) 확인

📝 열거형 값(Value) 확인 형태

         * 단, Object.values()는 ES2017 또는 이후 버전에서 사용할 수 있습니다.

Object.values(열거형).includes(값)

// 타입에 대해 좀 더 안전하게 처리하고 싶은 경우
Object.values(열거형).includes(값 as 열거형)

 

es2017 버전을 사용하기 위해서 tsconfig.json 파일을 수정합니다.
"compilerOptions"의 "lib"에 es2017을 추가합니다.

 

만약, 컴파일 옵션을 변경할 수 없거나 es2017 이전 버전인 경우 

반복문을 사용하여 값이 존재하는지 체크해야 합니다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = "BLUE"
}

function valueInColor(val) {
  for(let k in Color) {
    if(Color.hasOwnProperty(k) && Color[k] === val) {
      return true;
    }
  }
  return false;
}

console.log(valueInColors("BLUE")); // true

 

※ 위 코드의 단점으로는 열거형이 여러 개 존재하는 경우 열거형마다 값을 체크하는 함수를 구현해야 합니다.

 


728x90
반응형