Typescript에서 상수 관리: enum vs const enum vs as const

김가연·2023년 6월 7일
0

TypeScript

목록 보기
1/8

TypeScript에서 상수 관리를 위해 enum과 const enum, as const라는 방법을 사용할 수 있습니다.
이번 글에서는 각각의 특징을 알아보고, 어떤 상황에서 어떤 방법을 선택해야 하는지 살펴보겠습니다.

enum

Enum은 Typescript에서 제공하는 문법으로, 서로 연관된 상수들을 하나의 namespace로 묶어 추상화시키기 위해 도입되었습니다. enum을 사용하면 상수의 집합을 정의하고, 각 상수에 대한 이름과 값을 지정할 수 있습니다.

특징

  • 그룹화: 상수들을 그룹화하여 관리할 수 있습니다.

  • 이름과 값 지정: 각 상수에는 이름과 값이 지정되어 있어 가독성을 높입니다.

  • 변경 제한: Enum 멤버의 값을 변경할 수 없어 상수의 불변성을 보장합니다.

  • 리터럴 타입 제한: 내부 속성은 리터럴 타입으로 제한됩니다.

  • 런타임 상수 값 접근: Enum을 사용하면 런타임에서도 상수 값에 접근할 수 있습니다.

  • 번들 크기 증가: JavaScript 객체로 변환되어 번들 크기가 커질 수 있습니다.

const enum


const enum은 TypeScript에서 사용되는 특별한 형태의 enum입니다.

특징

  • 번들 크기 감소: 컴파일 후에 상수 값들이 직접 대체되기 때문에 번들 크기를 줄일 수 있습니다.

  • 실행 시 오버헤드 없음: const enum의 상수 값은 실행 시에 추가적인 오버헤드 없이 직접 사용할 수 있습니다.

  • 상수 리터럴 값 제약: 각 멤버가 반드시 상수 리터럴 값이어야 하므로, 다른 표현식이나 변수를 사용할 수 없습니다.

  • 런타임 동적 동작 제한: 컴파일 시에 상수 값이 결정되기 때문에, 런타임에서 동적인 동작이 필요한 경우에는 제한적입니다.

const enum vs enum

주요한 차이점은 컴파일된 JavaScript 코드에 대한 영향입니다.
const enum은 컴파일된 결과 코드에 등장하지 않기 때문에 번들 크기가 작아집니다.
반면, enum은 실제 JavaScript 객체로 변환되어 불필요한 코드 추가 및 tree shaking이 되지 않아 번들 크기가 크게 증가할 수 있습니다.

또한 enum은 런타임에 동적으로 값을 가져올 수 있는 반면, const enum은 컴파일 시에 상수 값이 결정되기 때문에 런타임에서 동적인 동작이 필요한 경우에는 사용할 수 없습니다.

그러나
const enum pitfall 문제로 인해 as const 가 const enum의 역할을 완전히 대체하는 추세입니다.

Const Assertion (as const)

Const Assertion은 변수를 리터럴 타입으로 선언하는 방법입니다. 이를 통해 리터럴 타입의 추론 범위를 줄이고, 변수의 값이 변경되지 않음을 보장하여 상수로 사용할 수 있습니다.

특징

  • 리터럴 타입 선언: as const를 사용하여 변수를 리터럴 타입으로 선언할 수 있습니다. 이는 변수의 타입을 고정하고 변경을 방지하여 상수로 사용할 수 있게 합니다.

  • 값 변경 제한: as const로 선언된 변수는 값의 변경이 제한됩니다. 변수의 값을 다른 값으로 대체하거나 재할당할 수 없습니다.

  • 정적 추론 범위 제한: as const를 사용하면 컴파일러가 변수의 타입을 정적으로 추론할 때 리터럴 타입으로 제한됩니다. 이는 보다 엄격한 타입 검사와 타입 안정성을 제공합니다.

  • 번들 크기 영향 없음: as const는 컴파일 후에는 영향을 주지 않으므로 번들 크기에 영향을 미치지 않습니다.

Const Assertion을 사용하여 변수를 리터럴 타입으로 선언하면 값의 변경이 제한되고, 컴파일러는 해당 변수를 보다 엄격하게 검사하여 타입 안정성을 제공합니다. 또한, 번들 크기에는 영향을 주지 않기 때문에 번들 최적화에 유리합니다. 이를 통해 상수 값의 안정성과 성능을 유지할 수 있습니다.

정리

이번 글에서는 Typescript에서 상수 관리를 위해 사용되는 enum, const enum, as const에 대한 개념과 각각의 특징을 알아보았습니다.

결론적으로, 상수 값의 양방향 매핑이 필요하지 않고, 단순히 값을 받아와서 Literal Type으로 지정하고자 한다면 as const 문법을 사용하는 것이 충분합니다. 이를 통해 값의 변경을 제한하고 정적 추론 범위를 좁혀서 상수로 사용할 수 있습니다.

이외에도 양방향 매핑이 필요한 경우에는 enum을 활용할 수 있습니다. enum은 상수 값과 이름을 매핑하여 서로 변환할 수 있는 기능을 제공합니다. 이를 통해 런타임에서도 상수 값을 사용할 수 있습니다.

그러나 const enum은 위에서 언급한 pitfall 문제로 인해 권장되지 않습니다. 따라서 const enum 사용을 피하고, 필요한 경우에는 enum이나 as const를 선택하는 것이 좋습니다.

profile
프론트엔드 개발자

0개의 댓글