Enum

Enum(열거형)이란?

• 자바스크립트에 없는 타입이지만, 자바스크립트의 값으로 사용할 수 있는 타입

• 여러 상수를 나열하는 목적으로 사용된다.

• enum 이라는 예약어로 선언한다.

enum Node {
  Mesh, // enum 내부에 있는 이름을 멤버(member)라 부른다.
  Texture,
  Decal,
}

• enum은 자바스크립트 코드로 변환된다.

var Node = {
  0: 'Mesh',
  1: 'Texture',
  2: 'Decal',
  Mesh: 0,
  Texture: 1,
  Decal: 2,
}

• enum의 멤버 순서대로 0부터 숫자가 할당된다.

  • 임의의 숫자를 할당하게 되면 그 다음 멤버의 값은 이전 값의 +1로 할당된다.

• 문자열도 할당 가능한데, 한 멤버를 문자열로 할당하면 그 뒤에 멤버들은 전부 직접 값을 할당해야 한다.

• enum 타입의 속성은 값으로 사용 가능하다.

const a = Node.Mesh; // 0
const b = Node[Node.Mesh]; // 'Mesh'

• enum은 값 보다 타입으로 사용되는 경우가 더 많다.

  • 타입으로 사용하게 되면 멤버의 유니온과 비슷한 역할을 한다.

// node: 'Mesh' | 'Texture' | 'Decal'
const logNode = (node: Node) => {
  console.log(Node[node]);
}

단점

• Enum은 아직 불안전하다.

const logNode = (node: Node) => {}

logNode(Node.Mesh); 
logNode('Mesh'); // Error (node의 타입은 'Mesh' | 'Texture' | 'Decal' 이지만 에러 발생

• Enum을 사용하면 Tree-shaking이 되지 않는다.

  • JavaScript에 존재하지 않는 것을 구현하기 위해 TypeScript 컴파일러는 IIFE(즉시 실행 함수)를 포함한 코드를 생성하게 되는데 IIFE를 '사용하지 않는 코드'라고 판단할 수 없어서 tree-shaking이 일어나지 않는다

Tree-shaking이란 사용하지 않는 코드를 삭제하는 기능을 말한다. 최종 번들 크기를 줄여 최적화 가능

Enum 타입을 사용하되, 자바스크립트 코드로 생성되지 않게 하려면 const enum 을 사용하면 된다.

그렇다면 언제 사용해야 좋을까?

• 태그드 유니온(브랜딩)에 사용하면 좋다.

• 단, 같은 enum의 멤버여야 서로 구분된다. 다른 enum의 멤버끼리는 구분되지 않을 수 있다.

enum Node {
  Mesh,
  Decal
}

interface MeshNode {
  type: Node.Mesh,
}

interface DecalNode {
  type: Node.Decal,
}

const MeshOrDecal = (node: MeshNode | DecalNode) => {
  if(node.type === Node.Mesh) {
    node; // MesNode
  } else {
    node; // DecalNode
  }
}