Typescript enum 타입

enum 타입

 

enum 타입이란 자바스크립트에는 없고 타입스크립트에만 있는 것인데 각각 enum 타입으로 열거형을 사용하여 이름이 있는 상수들을 정의할 수 있게된다.

 

 

enum Fruit {
    Apple,
    Banana = 5,
    Orange,
}

console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange)
// 0 5 6

• 위의 코드를 보면 enum 타입을 이용하여 객체 형식의 열거형으로 타입들의 상수들을 정의할 수 있게되었다.
• 이때 초기화 되지 않은 열거형의 첫번째 값은 '0'으로 시작하며 만약 Apple = 1 이라고, 값을 지정해 주면, 다음부터는 자동증가하여 Fruit.Apple 은 1, Banana 은 2, Orange 는 3가 된다.

 

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Fruit;
(function (Fruit) {
    Fruit[Fruit["Apple"] = 0] = "Apple";
    Fruit[Fruit["Banana"] = 5] = "Banana";
    Fruit[Fruit["Orange"] = 6] = "Orange";
})(Fruit || (Fruit = {}));
console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange);

위의 코드는 자바스크립트로 컴파일한 결과인데 보면 enum의 각 원소들이 이름과 값이 양방향으로 맵핑되는 것을 알 수 있다.

 

 

 

 

enum Fruit {
    Apple,
    Banana = 5,
    Orange,
}


console.log(Fruit.Banana); //5
console.log(Fruit['Banana']); //5
console.log(Fruit[5]); //Banana

enum은 객체이므로 런타임에서 사용할 수도 있다. 위의 코드를 보면 객체로서의 결과가 나타나는 것을 확인 할 수 있다.

양방향성 때문에 Fruit[5]을 해줘도 Banana가 출력되는 특징 또한 확인 할 수 있다.

 

 

 

 

enum Language {
    Korean = 'ko',
    English = 'en',
    Japanes = 'jp',
}

숫자말고 문자 또한 들어올 수 있다.

 

 

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Language;
(function (Language) {
    Language["Korean"] = "ko";
    Language["English"] = "en";
    Language["Japanes"] = "jp";
})(Language || (Language = {}));

하지만 숫자와 다른 것이 양방향으로 맵핑되는 숫자와 다르게 단방향으로만 맵핑되는 것을 컴파일된 자바스크립트에서 확인 할 수 있다.

 

 

 

//enum Some {
//Key1 = 1
//}
//양방향 맵핑
//Some['Key1] = 1;
//Some[1] = 'Key1'; //이걸 아래의 유틸리티 함수에서 지워준다.


function getIsValidEnumValue(enumObject: any, value: number | string){
    return Object.keys(enumObject)
    .filter(key => isNaN(Number(key)))
    .some(key => enumObject[key] === value);
}

• 위의 코드처럼 enum 타입을 이용하여 유틸리티 함수를 작성할 수도 있다.
• enum 객체의 특정 value가 있는지 검사하는 함수인데 enum 객체에서 모든 키를 뽑아내고 중간에 filter와 isNaN을 이용하여 양방향 맵핑을 차단하여 단방향으로 바꿔준다고 할 수 있다.
• 마지막으로 some을 이용하여 value가 있는지 검사한다.

 

 

 

enum Fruit {
    Apple,
    Banana,
    Orange,
}

enum Language {
    Korean = 'ko',
    English = 'en',
    Japanes = 'jp',
}

console.log('1 in Fruit:', getIsValidEnumValue(Fruit, 1)); //true
console.log('1 in Fruit:', getIsValidEnumValue(Fruit, 5)); // false
console.log('Ornage in Fruit:', getIsValidEnumValue(Fruit, Ornage)); // false
console.log('ko in Language:', getIsValidEnumValue(Language, ko)); //true
console.log('Korean in Language:', getIsValidEnumValue(Language, Korean)); // false

위와 같이 enum의 성질을 이용하면 숫자일때는 양방향 맵핑이 가능함과 문자의 단방향 맵핑의 가능함에 따라 결과가 다르게 나오는 것을 알 수 있다.

 

 

 

 

const enum 타입

 

컴파일 후 굳이 enum을 객체로 남겨둘 필요가 없다면 const 을 enum 앞에 붙이면 컴파일 결과에 enum 객체를 없애는데 해결이 된다.

const enum Fruit {
    Apple,
    Banana,
    Orange,
}

const fruit: Fruit = Fruit.Apple;

const enum Language {
    Korean = 'ko',
    English = 'en',
    Japanes = 'jp',
}

const lang: Language = Language.Korean;

 

 

 

• 아래 컴파일 결과 코드를 보면 확실히 enum 객체는 없어지고 사용한 값만이 남게되었다. 즉 번들 파일의 크기를 줄이게 되었다.
• 하지만 const을 사용하게 되면 유틸리티 함수를 타입스크립트에서 사용할 수 없다는 단점이 존재한다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fruit = 0 /* Apple */;
const lang = "ko" /* Korean */;