Enum

 

 

회사에서 프로젝트를 진행하며 Enum을 사용하고 있다.

사실 Enum에 대해서 잘 모른채로 그냥 기존 코드를 복붙하는 식으로 사용하고 있었다.

아래 이어지는 글은 타입스크립트 공식문서 Enum부분 과 다른 블로그 글들을 보고 정리하는짜집기한 글이다.

---

Enum

Enum을 사용하면 맥락이나 케이스를 더 명료하게 만들 수 있다.

타입스크립트에서는 number,string에 기반한 Enum을 제공한다.

 

숫자형 Enum

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

위 경우에서 Up = 1, Down = 2, Left = 3, Right =4 이다.

Up = 1 로 시작하고, 그 이후 따라오는 값들은 'auto-incremented' 한 성질(자동증가) 을 갖는다.

 

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

위의 경우에도 마찬가지로 auto-incremented한 성질때문에 Up = 0 ,Down = 1,... 이다.

 

문자형

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

String Enum 은 auto-incremented하지 않지만, 'serialize' (직렬화) 가 잘 된다는 이점이 있다.

 

String Enum은 약간의 런타임 차이가 있다. String Enum에서 각 멤버는 문자열 리터럴 또는 다른 String Enum 으로 초기화 되어야 한다. 디버깅중이고 Numeric Enum의 런타임을 읽어야 하는 경우 값이 불투명한 경우가 있다. 즉, 자체적으로 유의미한 값을 전달하지 않는다. 하지만 String Enum을 사용하면 Enum 멤버 자체의 이름에 관계없이 코드가 실행될 때 유의미한 값을 제공할 수 있다.

 

 

Heterogeneous enums

enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

JS의 런타임을 의도적으로 이용하는 경우가 아니라면, 이렇게 하지 않는게 좋다.

 

 

 

Enum을 사용하는 이유?? 

(출처 https://medium.com/@seungha_kim_IT/typescript-enum%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3b3ccd8e5552)

 

그냥 상수, 배열, 객체를 사용하지 않고 굳이 Enum을 사용하는 것일까??

Enum은 추상화의 수단이다.

다음 코드와 같이 string, number 타입으로 모든 변수를 정의해도 무방하다.

type EvaluationStatus = 'PASSED' | 'FAILED'
const PASSED:EvaluationStatus = 'PASSED'

이제 PASSED에 'REVOKED'와 같은 값을 넣는다면 컴파일 에러가 난다.

 

하지만 EvaulationStatus가 많아진다면 이를 깔끔히 유지하는 것은 쉽지가 않다. (아래 코드 참고)

//REVOKED뿐만 아니라 값이 8개 정도 더생긴다고 생각해보자.
//영 깔끔하지 않다.
type EvaluationStatus = 'PASSED' | 'FAILED' | 'REVOKED'

const PASSED:EvaluationStatus = 'PASSED'
const REVOKED:EvaluationStatus = 'REVOKED'
const FAILED:EvaluationStatus = 'FAILED'

 

이런 경우 enum을 사용해 리터럴 타입과 값에 이름을 붙혀 코드의 가독성을 높힐 수 있다.

export enum ApplyingStatusEnum {
    PASSED = 'PASSED',
    REVOKED = 'REVOKED',
    FAILED = 'FAILED'
}

const PASSED : ApplyingStatusEnum = ApplyingStatusEnum.PASSED

 

 

Enum은 그 자체로 객체이다.

• JS의 객체는 속성을 자유롭게 변경할 수 있는데 반해, enum의 속성을 변경할 수 없다.
• 객체의 속성은 다양한 타입으로 타입추론이 이루어지는 반면, enum은 항상 리터럴 타입이 사용된다.
• 객체는 JS가 허용하는 모든 값이 올 수 있지만, enum의 속성값으로는 String, Number만 허용된다.

같은 '종류' 를 나타내는 여러 숫자 or 문자열을 다뤄야 할 때 적당한 이름을 붙힌 객체로 코드의 가독성을 높히고 싶다면 enum을 사용하는 것이 좋다.

 

 

---

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/

Enum을 사용하지 않는게 좋다는 글도 있다. 

 

=> Tree shaking을 100%이해하지 못했지만, 요약하면

Typescript에만 있는 개념인 Enum이 JS로 변환되는 과정에서 적절하게 변환되지 못하기 때문

인 것 같다.

 

+ 23.3.8 Enum이 안좋은 이유와 그 대안에 대해 작성한 글

실제 작동하는 Javascript를 무겁게 만드는 enum과 그 대안 : as const를 활용한 객체