[typescript] enum과 const object 사용 문제 및 보완

enum과 const object는 비슷하게 동작하는듯 하면서도 다르다. 그 차이에 대해서 알아보자.

enum

값 또는 상수를 가독성 높게 사용할 수 있다.

// 상수인 경우
enum Gender {
  Male,
  Female,
};

// 문자열인 경우
enum Gender {
  Male = 'male',
  Female = 'female',
};

const object

일반 Javascript 객체와 동일하다.

// 상수인 경우
const Gender = {
  Male: 0,
  Female: 1,
};

// 문자열인 경우
const Gender = {
  Male: 'male',
  Female: 'female',
};

차이

1. enum

transpile 이후에 역방향 매핑을 위한 값이 부가적으로 생겨난다.

// 작성
enum Gender {
  Male = 0,
  Female = 1,
};

// transpile 이후의 상태,
var Gender;
(function (Gender) {
    Gender[Gender["Male"] = 0] = "Male";
    Gender[Gender["Female"] = 1] = "Female";
})(Gender || (Gender = {}));

// Gender의 상태는 풀어서 작성하면 다음과 같다
var Gender = {
  Male: 0,
  Female: 1,
  // 역방향 매핑을 위한 값들이 생겨났다
  '0': 'Male',
  '1': 'Female',
}

2. const object

object는 primitive 타입이 아니기 때문에 const이더라도 내부의 값은 수정이 가능하다.
즉, enum으로써의 불변성이 보장되지 않는다.

const Gender = {
  Male: 0,
  Female: 1,
};
Gender.male; // 0
Gender.Male = 2; // <-- 값을 변경할 수 있다
Gender.Male; // 2

보완

1. enum

역방향 매핑은 경우에 따라 필요하지만 현재 코드에서 사용하지 않는다면 const enum으로 변경하자.
const enum을 사용하면 transpile 이후에 역방향 매핑을 위한 부가적인 코드가 추가되지 않는다.

// 작성
const enum Gender {
  Male,
  Female,
};
console.log(Gender.Male);

// transpile 이후
console.log(0 /* Male */); // 해당 하는 값이 바로 설정되었다

2. const object

as const를 사용하여 object 내부 필드의 수정을 방지하자.

const Gender = {
  Male: 0,
  Female: 1,
} as const;

Gender.Male = 2; // Cannot assign to 'Male' because it is a read-only property.

결론

• 역방향 매핑의 사용이 필요하다면 enum을 사용하자.
• 그렇지 않다면 const enum이나 as const를 사용하자.
  • as const는 타입 추론시에 타입 추론의 범위를 줄여준다.