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

Syntax

String Entries Enum

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: Resistor Values

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

When to use enum