Typescript : 열거형(Enum)과 리터럴(Literal) 타입

열거형(Enum)

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

숫자 열거형(Numeric Enum)

일반적인 enum일 경우 JS로 컴파일했을 때, 타입스크립트가 enum에 선언된 순서에따라 0부터 숫자를 할당

• app.ts

enum GenderType {
    Male,
    Female,
    genderNeutral
}

• app.js

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

문자 열거형(String Enum)

enum의 값을 숫자가 아닌 문자로 할당

• app.ts

enum GenderType { // String Enum (문자형 열거형)
    Male = 'male',
    Female = 'female',
    genderNeutral = 'genderNeutral'
}

• app.js

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

enum 사용 예시

• app.ts

enum GenderType { // Numeric Enum (숫자형 열거형)
    Male,
    Female,
    genderNeutral
}

/*
enum GenderType { // String Enum (문자형 열거형)
    Male = 'male',
    Female = 'female',
    genderNeutral = 'genderNeutral'
}
*/


interface Student {
    readonly studentID: number;
    studentName: string;
    age?: number;
    gender: GenderType; // 📍genderType 타입으로 설정(enum)
    subject: string;
    courseCompleted: boolean;
    addComment?: (comment: string) => string;
}

function getStudentDetails(studentID: number): Student{
    return {
        studentID: 123456,
        studentName: 'Mark',
        gender: GenderType.Male, // 📍genderType 타입으로 설정(enum)
        subject: 'Node JS',
        courseCompleted: true
    }; 
}

let student1 = {
    studentID: 121212,
    studentName: 'Jane',
    age: 30,
    gender: GenderType.Female, // 📍genderType 타입으로 설정(enum)
    subject: 'Mongo DB',
    courseCompleted: false
}

function saveStudentDetails (student: Student): void{

}

saveStudentDetails(student1)

리터럴(Literal) 타입

• 파이프 라인을 사용하여 연관된 아이템들을 함께 묶어 타입을 정의

리터럴 타입 사용 예시

• app.ts

interface Student {
    readonly studentID: number;
    studentName: string;
    age?: number;
    gender: 'male'|'female'|'genderNeutral'; // 📍리터럴 타입 정의
    subject: string;
    courseCompleted: boolean;
    addComment?: (comment: string) => string;
}

function getStudentDetails(studentID: number): Student{
    return {
        studentID: 123456,
        studentName: 'Mark',
        gender: 'male', // 📍리터럴에 있는 요소 명시
        subject: 'Node JS',
        courseCompleted: true
    }; 
}

let student1: Student = { // ⭐
    studentID: 121212,
    studentName: 'Jane',
    age: 30,
    gender: 'female', // 📍리터럴에 있는 요소 명시
    subject: 'Mongo DB',
    courseCompleted: false
}

function saveStudentDetails (student: Student): void{

}

saveStudentDetails(student1)

⭐ student1에 Student 타입을 반드시 명시해 주어야 한다. 'male'|'female'|'genderNeutral' 자체가 하나의 타입이기 때문에 student1의 타입을 명시해주지 않으면 gender값 'female'을 단지 string으로 인식해서 객체에 값이 할당되지 않는다. 즉, gender의 값을 string 타입으로 갖는 student1이라는 객체로 인식하는 것이다. gender값을 'male'|'female'|'genderNeutral' 타입으로 갖는 Student 타입이 아니라..ㅎㅎㅎ (이것 때문에 고생했다...)

아래는 타입을 지정해주지 않았을 때 나왔던 에러문이다.

실습 코드 : https://github.com/cijbest/TIL/tree/master/TypeScript/%EC%8B%A4%EC%8A%B5/Day_5

공부 영상 출처 : [땅콩코딩] https://youtu.be/-TlpYcmHvb8