TS 열거형 (Enum) 과 리터럴 타입

📃 열거형 (Enum) 과 리터럴 타입

인터페이스 프로퍼티 타입중 gender string으로 명시 되어있는 타입이 있습니다. 만약 gender 프로퍼티에 들어갈수 있는 값을 male, female 이 두가지 값만으로 제한하고 싶을때 단순히 프로퍼티 타입을 string으로 명시하는것 말고는 없을까요?

크게는 두가지가 있습니다. Enum과 리터럴 타입입니다.

✔ Enum

Enum 이란 연관된 아이템들을 함께 묶어서 표현 할 수 있는 수단입니다.
이넘은 컴파일링시 사라지는 인터페이스와는 달리 이넘은 코드가 구현되어 자바스크립트에 코드로 나타납니다. 이것은 이넘은 런타임에 존재하는 실제 객체라는것을 보여줍니다.

enum 타입으로 사용하기 위해서는 선언을 먼저해야합니다. enum의 이름을 적은뒤 값으로는 선택지로 쓰일수 있는 값을 enum 속에 넣어줍니다. enum 이름 {값}

아래 예제를 참고하겠습니다.

이제 선언된 enum을 타입으로 사용하기 위해 인터페이스의 gender를 enum으로 바꾸어 줍니다.

바꾸어주면 인터페이스를 사용하는 함수 getStudentDetail()에서 에러가 발생합니다. 이유는
gender 타입의 값이 genderType이 아닌 string 이기때문에 생긴 에러입니다. gender: genderType.Male,

그리고 saveStudentDetails() 함수에서 파라미터 값으로 Student 인터페이스를 가지고있는 객체 student1에서도 값을 바꾸어 줍니다. gender: genderType.Female,

enum genderType {
  Male,
  Female,
}

let student1 = {
  studentId: 10,
  studentName: "sim",
  age: 32,
  gender: genderType.Female,
};

interface Student {
  readonly studentId: number;
  studentName: string;
  age?: number;
  gender: genderType;
}

function getStudentDetail(studentID: number): Student {
  return {
    studentId: 12345,
    studentName: "kim",
    age: 13,
    gender: genderType.Male,
  };
}

function saveStudentDetails(student: Student): void {
  console.log(student.age);
}

saveStudentDetails(student1);

그리고 컴파일린된 자바스크립트를 보면 Male은 숫자 0 Female은 숫자 1이 있습니다.

...
var genderType;
(function (genderType) {
    genderType[genderType["Male"] = 0] = "Male";
    genderType[genderType["Female"] = 1] = "Female";
})(genderType || (genderType = {}));
...

이것은 타입스크립트가 enum 속의 선언된 값의 순서에 따라 0부터 시작해서 순차적으로 증가하는 숫자를 할당하는것을 보여줍니다. 즉 Male = 0, Female = 1 값을 가진것을 보여줍니다.
이것은 숫자 열거형(Numeric Enum) 이라는 것입니다.

하지만 저는 enum 속의 값을 벨류가 숫자 값이 아닌 스트링 벨류인 male이 되기를 원합니다

타입스크립트에서는 문자형 열거형(String Enum)을 허용하고 있습니다.

genderType enum을 숫자형 enum에서 string 으로 바꾸려면 간단하게 enum 속의 맴버들에게 각각의 값을 할당해 주면 됩니다.

enum genderType {
  Male = "mail",
  Female = "female",
}

컴파일링된 자바스크립트 입니다. 바뀐것을 확인할수 있습니다.

var genderType;
(function (genderType) {
    genderType["Male"] = "mail";
    genderType["Female"] = "female";
})(genderType || (genderType = {}));

✔ 리터럴 타입

리터럴 타입은 enum 보다 심플한 타입입니다.
Student 인터페이스에 gender 프로퍼티에서 enum 타입을 지운뒤 gender: "male" | "female"; 입력해줍니다. 파이프 표시 | 를 사용한뒤 string 값만 구분 시켜주면 됩니다.
enum을 사용했을때와 같은 결과를 얻는 코드이지만 예시에서는 리터럴 타입이 더 간결하고 읽기쉬워 보입니다.

타입스크립트에서 리터럴 타입속에 정의된 string 값에 대해서 오토 컴플릿 옵션을 줍니다.

let student1: Student = {
  studentId: 10,
  studentName: "sim",
  age: 32,
  gender: "female",
};

interface Student {
  readonly studentId: number;
  studentName: string;
  age?: number;
  gender: "male" | "female";
}

function getStudentDetail(studentID: number): Student {
  return {
    studentId: 12345,
    studentName: "kim",
    age: 13,
    gender: "male",
  };
}

function saveStudentDetails(student: Student): void {
  console.log(student.age);
}

saveStudentDetails(student1);