1. 열거형(Enum)타입 이란?

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

//app.ts

enum GenderType {
  female,
  male
}
// enum(열거형타입)에 GenderType을 선언하고 배열안에 해당되는 값을 열거 해준다.

interface UserInfo {
  userId: number;
  userName: string;
  age: number;
  gender?: GenderType; 
  // 성별을 직접 입력하는것이 아닌 위에서 선언한 enum의 변수를 할당 해 준다.
  courseCompleted: boolean;
}

function getUserDetail(userId: number): UserInfo {
  {
    return {
      userId: 3,
      userName: "code lee",
      age: 27,
      gender: GenderType.female,
      //위의 interface의 gender부분이 GenderType으로 
      //할당하였기때문에 이 함수에서도 'GenderType.해당값'으로 설정한다.
      courseCompleted: true,
    };
  }
}

function saveUserDetails(user:UserInfo): void{
 } 
   
 saveUserDetails({
     userId : 2,
     userName : 'code park',
     age : 29,
     gender : GenderType.female,
     //이 부분도 마찬가지로 위의 interface를 재사용하여 사용하고있기 
   //때문에 gender부분에'GenderType.해당값'으로 설정한다.
     courseCompleted : false
 })

1-1. 숫자형 열거형(Numeric Enum)

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

//위의 app.ts에서 enum부분이 컴파일된 내용이다. 여기서보게 되면 
//GenderType["female"] = 0, GenderType["male"] = 1 이런내용을 볼 수 있는데 
//여기서 숫자는 enum에 입력된 순서대로 숫자가 적용된다.

이렇게 숫자로 enum에 입력된 내용이 열거되는것을 숫자열거형(numeric enum)이라 한다.

1-2. 문자형 열거형(String Enum)

//app.ts

enum GenderType {
  female = 'female', // 값의 내용을 그대로 스트링으로 입력해준다.
  male = 'male'
}

----------------------------------------------------------

//app.js

var GenderType;
(function (GenderType) {
    GenderType["female"] = "female"; // 숫자형이 아닌 문자형으로 변경
    GenderType["male"] = "male";
})(GenderType || (GenderType = {}));

문자형 열거형으로 표한하고 싶다면 enum의 각 값에 내용 그대로 string으로 입력 해 주고 컴파일된 내용을 보게되면 수자형으로 입력되었었던 부분에 문자형으로 변경된걸 확인 할 수 있다.

2. 리터럴 타입

• 리터럴 타입에도 '숫자형 열거형', '문자형 열거형' 이렇게 있으며, 리터럴 타입은 enum보다 더욱 간단하게 표현할 수 있다.

interface UserInfo {
  userId: number;
  userName: string;
  age: number;
  gender?: "male" | "female"; // 리터럴 타입, 문자형 열거형
  courseCompleted: boolean;
}

function getUserDetail(userId: number): UserInfo {
  {
    return {
      userId: 3,
      userName: "code lee",
      age: 27,
      gender: "female", 
      // interface에서 gender부분을 리터럴 타입으로 선언하였기 때문에
      //원하는 값을 string으로만 넣어주면 완성된다.
      courseCompleted: true,
    };
  }
}

function saveUserDetails(user: UserInfo): void {}

saveUserDetails({
  userId: 2,
  userName: "code park",
  age: 29,
  gender: "male",
  // interface에서 gender부분을 리터럴 타입으로 선언하였기 때문에
  //원하는 값을 string으로만 넣어주면 완성된다.
  courseCompleted: false,
});

interface의 key값중 리터럴로 표현하고싶은 부분의 value값들을 '|'기준으로 열거하여 표현해준뒤 interface가 적용되는 부분에서는 string형태로 해당 value를 입력 해 주면 된다.