When to use enum

Generally recommended to avoid enum and just use plain Object.freeze() method

When something is a symbol, define it as enum, not as a magic string

• prefer enum over union type when the list of options is growing and the reference to the values are referenced in multiple locations

Opinion Against enum

There are frequent recommendations to use as const. However, this doesn't guarantee the immutability. It's just a syntactic sugar that assumes object is immutable or manipulated.

Instead, you can represent enum with Object.freeze().

• Pure declarations benefit from Object.freeze()

const availableOptionsForClientFilter: OptionTypes[] = [
	{
		label: "First Option",
		value: FilterOptions.OptionOne,
	},
	{
		label: "Second Option",
		value: FilterOptions.OptionTwo,
	},
];

Object.freeze(availableOptions);

See more details under section:

• Object.freeze vs as const

String Enums

Convention is to capitalize enum options variable names

enum FilterOptions {
  OptionOne = "Option 1",
  OptionTwo = "Option 2",
  OptionThree = "Option 3",
  OptionInvalid = "Invalid",
  OptionUndefined = "Undefined",
}

// Array of `enum` entries
const enumAsArrayOfEntries: {
  key: string;
  value: string;
}[] = Object.entries(FilterOptions).map(
  ([key, value]) => ({key, value})
);

/*
[
  {
    "key": "OptionOne",
    "value": "Option 1"
  }, 
  {
    "key": "OptionTwo",
    "value": "Option 2"
  }, 
  ...
]
*/

const keysOfEntries: string[] = Object.entries(FilterOptions).map(
  ([key, value]) => (key)
);
// ["OptionOne", "OptionTwo", "OptionThree", "OptionInvalid", "OptionUndefined"]

const valuesOfEntries: string[] = Object.entries(FilterOptions).map(
  ([key, value]) => (value)
);
// ["Option 1", "Option 2", "Option 3", "Invalid", "Undefined"] 

Numeric Enums

Up is initialized with 1

• All of the following members are auto-incremented from that point on
  • Up has the value 1
  • Down has 2
  • Left has 3
  • Right has 4

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

Example: Returning a concatenation of lookup values and available type options

export enum ResistorValues {
  black = 0,
  brown = 1,
  red = 2,
  orange = 3,
  yellow = 4,
  green = 5,
  blue = 6,
  violet = 7,
  grey = 8,
  white = 9,
}

type Color = keyof typeof ResistorValues;

export function decodedValue([first, second]: Color[]): number {
  return Number(`${ResistorValues[first]}${ResistorValues[second]}`)
}

Alternative

const OptionObj = {
  OptionOne: "Option 1",
  OptionTwo: "Option 2",
  OptionThree: "Option 3",
  OptionInvalid: "Invalid",
  OptionUndefined: "Undefined",
} as const;

type OptionTypes = typeof OptionObj[keyof typeof OptionObj];

enum vs union

Unions are a compile time concept while enums are transpiled and end up in resulting Javascript.

You can also enumerate over enums.

type TT = "A" | "B" | "С";

function doSomethingWithUnion(p: TT)
{
    // ...
}

doSomethingWithUnion("A");

// equivalent in JS
"use strict";
function doSomethingWithUnion(p) {
    // ...
}
doSomethingWithUnion("A");
var EE;
(function (EE) {
    EE[EE["A"] = 0] = "A";
    EE[EE["B"] = 1] = "B";
    EE[EE["C"] = 2] = "C";
})(EE || (EE = {}));

enum EE
{
    A,
    B,
    C
}

function doSomethingWithEnum(p: EE)
{
    // ...
}

doSomethingWithEnum(EE.A);

// equivalent in js
function doSomethingWithEnum(p) {
    // ...
}
doSomethingWithEnum(EE.A);