TypeScript 5회차 - 열거형(Enum)과 리터럴 타입

https://youtu.be/-TlpYcmHvb8
https://youtu.be/70w82P-KiVM

Enum이란?

연관된 아이템들을 함께 묶어서 표현 할 수 있는 수단.

Enum선언

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

Enum 타입으로 타입 지정하고 싶은 인터페이스의 property의 타입을 위에 선언한 Enum의 이름으로 바꿔준다. (ex - gender: GenderType)

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

let studentID:number = 12345;
let studentName:string = 'Jenny Kim';
let age:number = 21;
let gender:string = 'female';
let subject:string = 'Javascript';
let courseCompleted:boolean = false;

interface Student {
    readonly studentID: number;
    studentName: string;
    age?: number;
    gender: GenderType;
    subject: string;
    courseCompleted: boolean;
    //addComment (comment: string) : string;
    addComment?: (comment: string) => string;
}

인터페이스가 갖는 property의 타입만 변경하면 이 인터페이스를 타입으로 쓰는 함수의 반환 값도 Enum타입에 맞게 변경해야 한다. => getStudentDetail 함수와 saveStudentDetail 함수, student1 의 return 값 속성중 gender를 GenderType.Male이나 GenderType.Female 로 변경.

function getStudentDetails(studentID: number): Student{
    return {
        studentID: 123456,
        studentName: 'Mark Jacobs',
        age: 20,
        //gender: 'male',
        gender: GenderType.Male,
        subject: 'Node JS',
        courseCompleted: true
    }
}

function saveStudentDetails (student: Student): void {
    
}

saveStudentDetails({
    studentID: 121212,
    studentName: 'Janet Jackson',
    age: 30,
    //gender: 'Female',
    gender: GenderType.Male,
    subject: 'Mongo DB',
    courseCompleted: false
})

let student1 = {
    studentID: 121212,
    studentName: 'Janet Jackson',
    age: 30,
    gender: GenderType.Female,
    subject: 'Mongo DB',
    courseCompleted: false
}

saveStudentDetails(student1)

Enum은 인터페이스와 달리 형식이 변경되어 컴파일된 JS 파일에 나타난다. Enum은 인터페이스와 달리 런타임에 실제 존재하는 객체라는 것을 보여준다.

아래는 JS 파일에 나타난 Enum 형식.

var GenderType;
(function (GenderType) {
    GenderType[GenderType["Male"] = 0] = "Male";
    GenderType[GenderType["Female"] = 1] = "Female";
    GenderType[GenderType["GenderNeutral"] = 2] = "GenderNeutral";
})(GenderType || (GenderType = {}));

이렇게 Enum에 선언된 값의 순서에 따라 값의 value를 순차적으로 0~n의 숫자로 부여한다.
이것을 타입스크립트에서의 '숫자 열거형'(Numeric Enum) 이라고 한다.

숫자 열거형 enum은 양방향 매핑이 되어있다.

console.log(GenderType[0]);
console.log(GenderType["Male"]);

따라서 위의 코드를 실행시키면 첫번째 코드는 숫자 0이 부여된 value인 "Male"을 출력하고 두번째 코드는 "Male"에 부여된 숫자인 0을 출력한다.

여기서 잠깐!!

타입스크립트는 '문자형 열거형'(String Enum)도 허용된다.
(문자 열거형 enum은 단방향 매핑이다)

숫자 열거형을 문자형 열거형으로 바꾸려면 Enum의 각 값에 원하는 문자열을 할당하면 된다.

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

그러면 JS에 컴파일 된 Enum 이 아래 처럼 값의 value로 string을 저장하는 형식으로 변경된다.

var GenderType;
(function (GenderType) {
    GenderType["Male"] = "male";
    GenderType["Female"] = "female";
    GenderType["genderNeutral"] = "genderNeutral";
})(GenderType || (GenderType = {}));

문자형 enum은 숫자형 enum 처럼 자동으로 값이 증가하는 기능은 없지만 문자형인 만큼 보기 쉬운 것이 장점이다.

---

Enum외에 다른 방식으로 Gender property 값을 제한하는 방법

리터럴 타입

파이프 기호를 사용하여 원하는 property 값들을 정의.

Student 인터페이스에서 gender 프로퍼티에 리터럴 타입을 정의해보자.

interface Student {
    readonly studentID: number;
    studentName: string;
    age?: number;
    //gender: GenderType;
    gender: 'male' | 'female' | 'genderNeutral';
    subject: string;
    courseCompleted: boolean;
    //addComment (comment: string) : string;
    addComment?: (comment: string) => string;
}

마찬가지로 getStudentDetail 함수와 saveStudentDetail 함수, student1 의 return 값 중 gender property를 위에서 정의한 리터럴 타입 속에 정의된 값 중 하나로 지정한다.
(해당 값으로 작성하려 gender: 를 입력 시 위에서 정의한 리터럴 타입들이 auto complete 되는 걸 볼 수 있다.)

function getStudentDetails(studentID: number): Student{
    return {
        studentID: 123456,
        studentName: 'Mark Jacobs',
        age: 20,
        gender: 'male',
        //gender: GenderType.Male,
        subject: 'Node JS',
        courseCompleted: true
    }
}


saveStudentDetails({
    studentID: 121212,
    studentName: 'Janet Jackson',
    age: 30,
    gender: 'female',
    //gender: GenderType.Male,
    subject: 'Mongo DB',
    courseCompleted: false
})


let student1: Student = {
    studentID: 121212,
    studentName: 'Janet Jackson',
    age: 30,
    gender: 'female',
    //gender: GenderType.Female,
    subject: 'Mongo DB',
    courseCompleted: false
}

saveStudentDetails(student1)