[TypeScript] Enum(열거형)과 리터럴 타입

interface Student {
    StudentNo: number;
    name: string;
    gender: string;
}

Student인터페이스에서 gender는 string으로 타입이 명시되어있지만 사실 gender는 male아니면 female이죠??

이 두가지로 한정지어 명시할수 있게 하는 방법은 없을까요??

크게 두가지 방법이 있습니다.

 

먼저 Enum을 사용하는 방법입니다.

Enum이란 쉽게 말하면 연관된 아이템을 함께 묶어서 표현할 수 있는 수단이라고 생각할수 있습니다.

enum GenderType {
    Male,
    Female,
}

interface Student {
    studentNo: number;
    name: string;
    gender: GenderType;
}

function getStudentInfo(StudentNo: number): Student {
    return {
        studentNo: 123456,
        name: 'Cine',
        // gender: 'male', // error
        gender: GenderType.Male,
    }
}

enum을 사용하기 위해서는 enum 키워드를 이용해서 선언을 해줍니다.

GenderType이라는 enum은 Male, Female이 들어갈수 있으며 아래 getStudentInfo 함수의 return에서 gender: 'male'은 에러가 발생합니다.

gender는 GenderType으로 명시가 되어있는데 string타입을 주었기 때문이죠.

이러한 에러는 GenderType.Male을 사용하여 해결할 수 있습니다.

interface는 실행될때 코드에 영향을 주지 않기 때문에 자바스크립트로 컴파일할때 코드가 사라졌지만 enum은 컴파일할때 자바스크립트로 구현이 되어 나타납니다.

이것은 enum은 런타임에 존재하는 실제 객체라는 의미입니다.

하지만 자바스크립트를 보면 Male이 0으로 바뀌고 0인것이 "Male"로 다시 변환이 되는 모습인데요.

이것은 숫자형 Enum이라는 것입니다.

타입스크립트에서는 문자형 Enum으로 선언할수도 있는데요. 

 

enum GenderType {
    Male = 'male',
    Female = 'female',
}

interface Student {
    studentNo: number;
    name: string;
    gender: GenderType;
}

function getStudentInfo(StudentNo: number): Student {
    return {
        studentNo: 123456,
        name: 'Cine',
        // gender: 'male', // error
        gender: GenderType.Male,
    }
}

문자형 열거형은 프로퍼티에 문자열 값을 할당하면 되는데요.

숫자형의 경우 다른 프로퍼티를 추가하면 자동으로 증감해주지만 문자형 열거형은 그런 기능은 존재하지는 않습니다.

 

 

 

리터럴 타입이라는 것도 있습니다.

interface Student {
    studentNo: number;
    name: string;
    gender: 'male' | 'female';
}

function getStudentInfo(StudentNo: number): Student {
    return {
        studentNo: 123456,
        name: 'Cine',
        // gender: 'male', // error
        gender: GenderType.Male,
    }
}

훨신 간단하죠??

GenderType이라는 enum을 따로 만들지 않고 프로퍼티를 초기화 할때 넣어주고 싶은 문자만 나열해서 | 만 붙여주면 됩니다.