DEV Community

TypeScript Enums: 5 Real-World Use Cases

Alex on March 12, 2024

If you’re looking to make your TypeScript code more organized, enums are a powerful tool. They group related values together, giving your code bett...

Read full post

official_dulin • Apr 9 • Edited

The initializers here are not necessary. We could leave off the initializers entirely.

enum Movement {
  Up,
  Down,
  Left,
  Right
}

Here, Up would have the value 0, Down would have 1, etc. This auto-incrementing behavior is useful for cases where we might not care about the member values themselves, but do care that each value is distinct from other values in the same enum.

But of course, you can still use String enums

Manish Mandal • Mar 13

I prefer using regular objects with "as const" to act like enums as it has more use cases

Alex • Mar 13 • Edited

Great advice, thanks!
Object like

const loadingState = {
  Idle: 'idle',
  Loading: 'loading',
  Success: 'success',
  Error: 'error',
} as const

can work the same way as enums.
Could you mention the use cases where this approach is better?

Cristóbal Gajardo Vera • Mar 19 • Edited

When working with Angular, if you define an enum to be used as an input property, it willl require you to assign that enum to a class attribute of the parent component and later use it in the html template, else you simply can't us it. An this is just an example.

In that case, a map using as const and also keyof typeof will let you to use the typed string in the html.

The approach that unify the definition for enum and let you use it as is, is the following:

const MyEnum = {
  FIRST: 'First',
  SECOND: 'Second',
} as const;

type MyEnum = (typeof MyEnum)[keyof typeof MyEnum];
      // ^? type MyEnum = "First" | "Second"

declare function func(a: MyEnum): void;

func(MyEnum.FIRST); // Valid
func('First'); // Valid

The real problem is that TypeScript doesn't recognize an enum as a string, even if the enum values are all strings. This aspect of enum make them "weird" in constrast of as const objects.

enum MyEnum {
  FIRST = 'First',
  SECOND = 'Second',
};

declare function func(a: MyEnum): void;

func(MyEnum.FIRST); // Valid
func('First'); // Invalid