타입스크립트 정리하기 5. Enum

본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다.

본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다.

 

5. Enum

 

5-1. 특정한 값을 가진 Enum

enum의 기본값은 각 요소가 풀어질 때 숫자 값이 할당된다.

 

enum MimeType {
    JPEG,
    PNG,
    PDF
  }

MimeType의 PDF를 사용하게 되면, 값은 2가 된다.

 

이 때, 각 요소에 값을 할당할 수 있다.

enum MimeType {
    JPEG = <any>'image/jpeg',
    PNG = <any>'image/png',
    PDF = <any>'application/pdf'
  }

이제 MimeType의 PDF를 사용하게 되면, 값은 'application/pdf'가 된다.

타입스크립트 2.4버전 부터는 <any> 제네릭을 제거해도 string타입의 enum을 정의할 수 있다.

 

문자열 뿐만 아니라 숫자값도 지정할 수 있다.

enum MyType {
    MIN = 10,
    MAX = 1000,
    MID = 500
}

배열값도 지정이 가능하다.

enum FancyType {
    OneArr = <any>[1],
    TwoArr = <any>[2,2],
    ThreeArr = <any>[3,3,3]
}

이와 같이 선언한 enum은 런타임에서 다음과 같이 선언된다.

var FancyType;
(function (FancyType){
    FancyType[FancyType["OneArr"] = [1]] = "OneArr";
    FancyType[FancyType["TwoArr"] = [2,2]] = "TwoArr";
    FancyType[FancyType["ThreeArr"] = [3,3,3]] = "ThreeArr";
})(FancyType || (FancyType={}));

5-2. enum의 모든 값을 가져오는 방법

enum SomeEnum {A, B}

let enumValues: Array<string>=[];

for (const value in SomeEnum) {
    if (SomeEnum.hasOwnProperty(value)) {
        const element = SomeEnum[value];
        
    }
}

enumValues.forEach(v => console.log(v)) // A, B가 순서대로 출력된다.

5-3. custom enum 수행 없이 enum을 확장하는 방법

// 두 개의 enum 타입이 일치하는지 확인
type TestEnumType = SourceEnum | AdditionToSourceEnum;
// 합쳐진 결과를 확인하기 위해, 두 개의 인스턴스를 사용할 수 있는 value로 변경해야한다.
let TestEnum = Object.assign({}, SourceEnum, AdditionToSourceEnum);
// 다음과 같이 선언할 수도 있다.
// let TestEnum = {...SourceEnum, ...AdditionToSourceEnum};

function check(test: TestEnumType){
    return test === TestEnum.value2
}

console.log(TestEnum.value1) // value1
console.log(TestEnum.value2 === 'value2') // true
console.log(check(TestEnum.value2)); // true
console.log(check(TestEnum.value3)) // false

5-4. custom enum 수행하기 : enum 확장하기

때때로 enum을 스스로 정의하고 수행하는 일이 필요하다. 다른 enum을 확장하는 확실한 방법이 없기 때문이다.

Custom enum은 다음의 방식을 따른다.

 

class Enum {
    constructor(protected value: string) {
        
    }
    public toString() {
        return String(this.value);
    }

    public is(value: Enum | string){
        return this.value = value.toString();
    }
}

class SourceEnum extends Enum {
    public static value1 = new SourceEnum('value1');
    public static value2 = new SourceEnum('value2');
}

class TestEnum extends SourceEnum {
    public static value3 = new TestEnum('value3');
    public static value4 = new TestEnum('value4');
}

function check(test: TestEnum){
    return test === TestEnum.value2;
}

let value1 = TestEnum.value1;

console.log(value1 + 'hello');
console.log(value1.toString() === 'value1');
console.log(value1.is('value1'));
console.log(!TestEnum.value3.is(TestEnum.value3));
console.log(check(TestEnum.value2));
// TSLint attention을 준다. 
// '==='를 사용하는 대신 is() 메소드를 사용한다.
console.log(TestEnum.value1 == <any>'value1');