안녕하세요~! 이번시간에는 타입스크립트에서 여러 타입에 대한 지정할때 자주 사용하는 enum보다 웬만하면 union type을 사용해야하는 이유에 대해 간단하게 말씀드려보려고 합니다!

Enum은 Union 타입보다 더 큰 번들사이즈를 만들어냅니다!

일반적으로 타입스크립트에서 tsc 커맨드로 자바스크립트 코드로 컴파일을 진행할때 타입스크립트만의 특징들을 제거해줍니다

같은 것들을 제거해주죠! 때문에 자바크립트 코드로 컴파일을하여도 파일의 사이즈에 대해 영향을 끼치진 않습니다. 하지만 Enum으로 타입을 지정할경우는 조금 다릅니다. 어떤식으로 다른지 살펴보겠습니다!

먼저, Union Type을 사용할때입니다.

type SPA = "React" | "Vue" | "Angular";

const myFavorite:SPA = "React";

위와 같이 SPA라는 타입을 만들어 myFavorite에 사용하여 React를 사용해주고 컴파일을 해주면 어떤 결과가 나올까요?

"use strict";
const myFavorite = "React";

바로 이렇게 자바스크립트 코드로 변환이 됩니다. 타입 정의에 대한 흔적은 찾아볼 수 가없죠!

그래서 번들사이즈에 영향을 끼치지 않는다는 것입니다.

하지만, enum을 사용하게된다면??

enum SPA {
    React = "React",
    Vue = "Vue",
    Angular = "Angular"
}

const myFavorite:SPA = SPA.React

위 처럼 enum을 사용하여 타입을 지정했습니다. 그리고 컴파일을 해준다면 어떻게 될까요?

"use strict";
var SPA;
(function (SPA) {
    SPA["React"] = "React";
    SPA["Vue"] = "Vue";
    SPA["Angular"] = "Angular";
})(SPA || (SPA = {}));
const myFavorite = SPA.React;

바로 위와 같이 코드로 변환이 됩니다.

한눈에 봐도 union 타입보다 사이즈가 커지고 복잡해진것을 알 수 있죠!

때문에 꼭 Enum을 사용해야하는 경우가 아니라면 union type을 사용을 권장드립니다.

이상 Enum보다 Union Type의 사용이 권장되는 이유에 대해 알아보았습니다

감사합니다.