Is there a deeper philosophical rationale behind choosing to use (or not use) enums in TypeScript, along with string union types?

Question

Is there a deeper philosophical rationale behind choosing to use (or not use) enums in TypeScript, along with string union types?

Recently, I delved into the world of enum and const enum in Typescript, causing some confusion. I grasped that const enum gets transpiled into simple values while regular enums do not. I also recognized certain distinctions between using string union type versus a plain enum, such as iterating over values.

However, the question remains: when and why should one opt to use (or not use) (const) enum? The unpredictability of whether enumeration will be needed makes it challenging.

In a Korean post, it was mentioned that "tree-shaking cannot optimize transpiled enum since they are IIFE". (Link)

So, is it better to always go for const enum without hesitation, or are there additional pros and cons when considering alternatives like string union types?

TLDR

If const enum is lighter than enum, why choose the latter in practical scenarios?
Knowing that Babel does not support const enum, why do some still prefer enum over string union type, even if no iteration is required?

typescript types enums constants union

Answer 1

Answer №1

It is my belief that TypeScript inherited enums from its roots in C#. Numerical enums in TypeScript can be risky due to their lack of type safety. Consider the following example:

const enum Foo{
  a,
  b
}

const handle=(arg:Foo)=>arg

handle(42) // no error

This behavior is attributed to TypeScript's use of a structural type system rather than a nominal one.

Using non-const enum can result in excessive boilerplate code:

var Foo;
(function (Foo) {
    Foo[Foo["a"] = 0] = "a";
    Foo[Foo["b"] = 1] = "b";
})(Foo || (Foo = {}));

Therefore, I recommend avoiding the use of enums altogether. Instead, consider utilizing immutable objects. For example:

const Foo = {
  a: 1,
  b: 2
} as const;

type Values<T> = T[keyof T]

type Foo = Values<typeof Foo>;

const handle = (arg: Foo) => arg

handle(Foo.a) // ok
handle(Foo.b) // ok

handle(42) // error

On the topic of string unions, imagine this scenario:

enum Events {
  click = 'click',
  hover = 'hover'
}

type Union = 'click' | 'hover'

If you have been using Events.click in multiple files and then need to rename it to _click, you only need to make a simple adjustment in the enum declaration:

enum Events {
  click = '_click',
  hover = '_hover'
}

By using string unions instead of literals, you only have to update one type declaration. This approach offers efficiency and ease when making changes compared to manually updating each instance of a literal string.

Ultimately, the decision between enums and string unions depends on the specific use case at hand.

Answer 2

It is my belief that TypeScript inherited enums from its roots in C#. Numerical enums in TypeScript can be risky due to their lack of type safety. Consider the following example:

const enum Foo{
  a,
  b
}

const handle=(arg:Foo)=>arg

handle(42) // no error

This behavior is attributed to TypeScript's use of a structural type system rather than a nominal one.

Using non-const enum can result in excessive boilerplate code:

var Foo;
(function (Foo) {
    Foo[Foo["a"] = 0] = "a";
    Foo[Foo["b"] = 1] = "b";
})(Foo || (Foo = {}));

Therefore, I recommend avoiding the use of enums altogether. Instead, consider utilizing immutable objects. For example:

const Foo = {
  a: 1,
  b: 2
} as const;

type Values<T> = T[keyof T]

type Foo = Values<typeof Foo>;

const handle = (arg: Foo) => arg

handle(Foo.a) // ok
handle(Foo.b) // ok

handle(42) // error

On the topic of string unions, imagine this scenario:

enum Events {
  click = 'click',
  hover = 'hover'
}

type Union = 'click' | 'hover'

If you have been using Events.click in multiple files and then need to rename it to _click, you only need to make a simple adjustment in the enum declaration:

enum Events {
  click = '_click',
  hover = '_hover'
}

By using string unions instead of literals, you only have to update one type declaration. This approach offers efficiency and ease when making changes compared to manually updating each instance of a literal string.

Ultimately, the decision between enums and string unions depends on the specific use case at hand.

Is there a deeper philosophical rationale behind choosing to use (or not use) enums in TypeScript, along with string union types?

Answer №1

Similar questions

An effective way to retrieve a property from an observable by utilizing a pipe

Switch up the styling of a component by updating its properties with a switch statement

Angular (TypeScript) time format in the AM and PM style

Converting a TypeScript object into a JSON string

Posting forms in NextJS can be optimized by utilizing onChange and keypress events for input fields

While working with Ngrx/effects, an error with code TS2345 occurred. The error message stated that the argument is of type 'Product[]', which cannot be assigned to a parameter of type

Is it feasible to incorporate a method into a prototype and ensure that 'this' is associated with the appropriate type in TypeScript?

Error: In Angular Firebase, the type 'string' cannot be assigned to the type 'Date'

Error Alert: Next.js TypeScript is reporting that the necessary packages are missing from your setup

The presence of a setupProxy file in a Create React App (CRA) project causes issues with the starting of react-scripts,

TypeScript compilation will still be successful even in the absence of a referenced file specified using require

The typescript MenuProvider for react-native-popup-menu offers a range of IntrinsicAttributes

tips for managing response time in firebase authentication state

`What exactly do auth.guard.ts and the AuthenticationService do in Angular 8?`

eliminate any redundant use of generics

How to identify generic return type in TypeScript

How can I generate pure JavaScript, without using Typescript modules?

Angular: ngx-responsive has a tendency to hide elements even if they meet the specified conditions

Encountering an error during the registration process of @fastify/middie

The refresh function in the table is not working as expected when implemented in a functional component. The table being used is Material