[TypeScript] 타입스크립트의 열거형 (enum) / 리터럴 타입에 대해 알아보자.

서론

 

gender 속성을 가져올때, 'male' / 'female' 만의 경우의수가 있다고 해보겠습니다. 

이때 type을 단순히 string으로만 해두면 아예 의도하지않은 값이 들어올 수 있습니다. 

 

이때에 '열거형'이라는 개념을 사용해줄 수 있겠습니다.

 

열거형(ENUM)

• 제한된 선택지: GenderType.Male 또는 GenderType.Female만 허용하므로 데이터의 무결성이 지켜집니다.
• 코드 가독성: 숫자로 관리하는 것보다 GenderType.Male이라고 쓰는 것이 코드를 읽는 사람에게 훨씬 친절합니다.

//열거형 : 사용자 정의 타입
enum GenderType {
    Male,
    Female
}

interface Student{
    stdId : number;
    stdName? : string;
    age? : number;
    gender? : GenderType;
    course? : string;
    completed? : Boolean;
    setName : (name : string) => void; //setName(name : string) : void;
    getName : () => string;
}

//Student 상속
class MyStudent implements Student{
    stdId = 12345;
    stdName = 'kim';
    age = 23;
    gender = GenderType.Male;
    course = 'node.js';
    completed = true;

    setName(name : string) : void{
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName)
    }
    getName() : string{
        return "kim";
    }
}

 

❗️js로 컴파일 시에 ENUM형태가 알아서 구현됩니다.

 

(1) 숫자 enum

//app.ts
enum GenderType {
    Male,
    Female
}

//app.js
var GenderType;
(function (GenderType) {
    GenderType[GenderType["Male"] = 0] = "Male";
    GenderType[GenderType["Female"] = 1] = "Female";
})(GenderType || (GenderType = {}));

 

역방향 매핑

GenderType[GenderType["Male"] = 0] = "Male";

이 코드는 실제로는 두 가지 일을 동시에 합니다.

1. GenderType["Male"] = 0 (이름으로 숫자를 찾음)
2. GenderType[0] = "Male" (숫자로 이름을 찾음)

이것을 역방향 매핑(Reverse Mapping)이라고 합니다.

덕분에 우리는 GenderType[0]을 실행해서 "Male"이라는 문자열을 얻어낼 수 있습니다. (단, 문자열 열거형은 이 역방향 매핑이 지원되지 않고 1:1 매칭만 됩니다!)

 

 

(2) 문자열 열거형

// app.ts
enum GenderType {
    Male = 'male',
    Female = 'female',
    GenderNeutral = 'neutral'
}

// app.js
var GenderType;
(function (GenderType) {
    GenderType["Male"] = "male";
    GenderType["Female"] = "female";
    GenderType["GenderNeutral"] = "neutral";
})(GenderType || (GenderType = {}));

 

• 값이 명확함 (가독성 좋음)
• 서버/DB 데이터와 그대로 맞추기 쉬움
• 역방향 매핑 없음

리터럴 타입

• 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야합니다. 타입스크립트에서 사용되는 리터럴 타입에는 다양한 종류가 있습니다.
• 장점
  • 코드의 가독성이 높아집니다. 
  • 잘못된 값이 들어오는 것을 방지할 수 있습니다.

- 문자 리터럴 타입

let status: 'success' | 'error'
status = 'success'; //유효
status = 'pending'; //에러: 'pending'은 허용되지 않음

 - 숫자 리터럴 타입

- 불리언 리터럴 타입

- 객체 리터럴 타입

let person: {name: 'John', age: 30};
person = {name: 'John', age: 30}; //유효
person = {name: 'Alice', age: 25}; //에러: 값이 일치해야함

- 타입 별칭

type CardinalDirection = 'North' | 'East' | 'South' | 'West';
let direction: CardinnalDirection;
direction = 'North'; // 유효
direction = 'Northeast'; // 에러: 'Northeast'는 허용되지 않음

 

interface Student{
    stdId : number;
    stdName? : string;
    age? : number;
    gender? : 'male' | 'female';
    course? : string;
    completed? : Boolean;
    setName : (name : string) => void; //setName(name : string) : void;
    getName : () => string;
}

//Student 상속
class MyStudent implements Student{
    stdId = 12345;
    stdName = 'kim';
    age = 23;
    gender : 'male' | 'female' = 'male';
    course = 'node.js';
    completed = true;

    setName(name : string) : void{
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName)
    }
    getName() : string{
        return "kim";
    }
}