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

1. 열거형 (Enum)

enum GenderType {
	Male,
	Female,
}

interface Student {
	gender: GenderType;
}

function getStudentDetails(studentID: number): Student {
	return {
		gender: GenderType.Male,
	};
}

let student1 = {
	gender: GenderType.Female,
};

• 인터페이스 특정 프로퍼티에 들어갈 수 있는 값을 제한하고 싶을 때 사용
• 연관된 아이템들을 함께 묶어서 표현할 수 있는 수단
• enum 키워드 사용 : 이름을 지어 주고, 선택지로 쓸 수 있는 값을 이름 속에 넣어줌
• 선언된 enum을 타입으로 쓰기 위해 인터페이스 내에 타입의 이름을 enum의 이름을 넣어줌
• 특정 값만 입력할 수 있게 강제하고 싶을 때, 그리고 그 값들이 공통점이 있을 때 사용
  
  

2. 숫자 열거형 (Numeric Enum)

enum GenderType {
	Male,
	Female,
}

//위와 같음
enum GenderType {
	Male = 0,
	Female = 1,
}

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

• 컴파일 시 코드가 사라지는 인터페이스와 달리 enum은 코드가 구현되어 자바스크립트 파일에 나타남
• 이것은 enum이 런타임에 존재하는 실제 객체라는 것을 보여줌
• 컴파일 된 자바스크립트 파일을 보면 enum 속의 선언된 순서에 따라 0부터 시작해서 순차적으로 증가하는 숫자를 할당한 것을 보여줌
  
  

enum Os {
	Window = 3,
	Ios = 10,
	Android,
}

console.log(Os[10]); // Ios
console.log(Os['Ios']); // 10

//JavaScript
var Os;
(function (Os) {
    Os[Os["Window"] = 3] = "Window";
    Os[Os["Ios"] = 10] = "Ios";
    Os[Os["Android"] = 11] = "Android";
})(Os || (Os = {}));

• enum에 수동으로 값을 주지 않으면 0부터 시작, 수동으로 값을 주면 해당 값부터 시작
• 자바스크립트 파일을 보면 양방향 매핑이 되어 있음
  
  

3. 문자형 열거형 (String Enum)

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

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

enum Os {
	Window = 'win',
	Ios = 'ios',
	Android = 'and',
}

let myOs: Os;

myOs = Os.Window;

• enum 속의 member 들에게 각각의 값을 할당
• 컴파일 후 자바스크립트를 보면 숫자가 문자형으로 바뀐 것을 확인 가능
• string enum은 숫자형처럼 자동 증가하는 기능은 없지만, 코드를 실행할 때 조금 더 읽기 쉬운 장점이 있음
• 숫자가 아니므로 단반향 매핑만 가능
  
  

4. 리터럴 타입

interface Student {
	gender: 'male' | 'female';
}

• 인터페이스의 프로퍼티에서 리터럴 타입을 정의
• 리터럴 타입을 정의하기 위해서는 파이프 표시( | )를 넣고 string value를 구분시켜 줌
• enum을 사용했을 때와 똑같은 결과를 얻지만 더욱 읽기 쉽고 간결한 코드 작성 가능
• 리터럴 타입으로 정의된 string value에 대해서는 자동완성 기능 가능
  
  

type Job = 'police' | 'developer' | 'teacher';

interface User {
	name: string;
	job: Job;
}

const user: User = {
	name: 'Bob',
	job: 'developer',
};

interface HighSchoolStudent {
	name: string;
	grade: 1 | 2 | 3;
}

• 문자형 리터럴 타입 : 정해진 스트링 값을 가짐
• 숫자형 리터럴 타입 : 정해진 숫자 값을 가짐
  
  

참고 : 땅콩코딩, 코딩앙마