literal union type vs string enums

• Using a union of string literal types

type Theme = 'DEFAULT' | 'LIGHT' | 'DARK';

• Using an enum

enum Theme {
    DEFAULT,
    LIGHT,
    DARK,
}

#Differences

1. TypeScript does not generate code for the union of string literals. As a result, the generated code will have a smaller size.
   Here is the generated code when TypeScript transpiles the `Theme` enum:
   js

   var Theme;
   (function (Theme) {
       Theme[(Theme['DEFAULT'] = 0)] = 'DEFAULT';
       Theme[(Theme['LIGHT'] = 1)] = 'LIGHT';
       Theme[(Theme['DARK'] = 2)] = 'DARK';
   })(Theme || (Theme = {}));

2. In the case of using a union type, you still have to type the full string when creating a new variable, for example:
   js

   type Theme = 'DEFAULT' | 'LIGHT' | 'DARK';
   const theme: Theme = 'DEFAULT';

   Popular editors like Visual Studio Code help us choose the value from the list of possible values quickly but we have to manually change the value in all places if we want to refactor the value to something else.
   On the other hand, using `enum` gives a few remarkable benefits when you refactor the code or develop a library. Let's take a look at a simple use case where your library provides the following function to switch the website to a given theme:
   js

   const switchTheme = (theme: Theme) => {
       ...
   };
   
   export { Theme, switchTheme };

   The consumers now can pass a particular theme to the `switchTheme` function without caring about the real value behind:
   js

   // consumer
   import { Theme, switchTheme } from 'your-lib';
   
   switchTheme(Theme.DARK);

   In comparison to `switchTheme('DARK')`, how convenient and safe the invoke above is.

#Good to know

const Theme = {
    DEFAULT: 'Default',
    LIGHT: 'Light',
    DARK: 'Dark',
} as const;

type Theme = typeof Theme[keyof typeof Theme];

let darkTheme: Theme = Theme.DARK;
let lightTheme: Theme = 'Light';
const invalidTheme: Theme = 'Blue';     // ERROR

#Good practice

console.log(Theme.DARK); // 2

enum Theme {
    DEFAULT = 0,
    LIGHT = 1,
    DARK = 2,
}

// TypeScript doesn't throw errors
const theme: Theme.DEFAULT = 3;

enum Theme {
    DEFAULT = 'Default',
    LIGHT = 'Light',
    DARK = 'Dark',
}

console.log(Theme.DARK);                // 'Dark'
let theme: Theme.DEFAULT = 'Default';   // ERROR

#See also

• const enum vs enum