[TIL] 내일배움캠프 1.26

TypeScript 강의를 들으면서 Enum에 대한 자료를 찾아보았다.

1. enum은 TypeScript가 자체적으로 구현하는 기능.

JavaScript 로 컴파일 시 사라진다. 따라서 객체를 enum 식으로 작성하는 방식을 주로 사용.

// enum
const enum EDirection {
	Up,
  	Down,
  	Left,
  	Right,
}

// object
const ODirection = {
	Up: 0,
  	Down: 1,
  	Left: 2,
  	Right: 3,
}

하지만, 위의 ODirection 처럼 객체를 선언하면 TypeScript는 타입추론을 바보같이(애매하게) 한다.

우리는 enum 처럼 사용하기위해 객체 선언 마지막에 as const를 붙여주면 된다.

const ODirection = {
	Up: 0,
  	Down: 1,
  	Left: 2,
  	Right: 3,
} as const

readonly 까지 붙은 것을 알 수 있다.

2. Tree-shaking

위에서 설명했듯, enum 은 편리한 기능이지만 TypeScript 자체적으로 구현한 기능이다.

JavaScript에 존재하지 않는 것을 구현하기 위해 "즉시 실행 함수"를 포함한 코드를 생성한다.

// ts
enum Color {
	Red = 'Red',
  	Green = 'Green',
  	Blue = 'Blue',
}

// js
"use strict";
var Color;
(function (Color) {
    Color["Red"] = "Red";
    Color["Green"] = "Green";
    Color["Blue"] = "Blue";
})(Color || (Color = {}));

Tree-shaking 은 사용하지 않는 코드를 삭제하는 기능을 말한다.
나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 그렇게 불렀다고 한다.

사용하지 않는 코드를 삭제해 번들 크기를 줄일 수 있다.

쓰이지 않는 코드를 지우는게 맞지만, 쓰이더라도 Tree-shaking이 되도록 하기 위해 enum에 const를 붙여 선언한다.

// ts
const enum MOBILE_OS {
    IOS = 'iOS',
    ANDROID = 'Android',
}
const ios = MOBILE_OS.IOS

// js
"use strict";
const ios = "iOS"

Tree-shaking 관점에서는 Union Type과 같다고 한다.

참고자료
https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/