Difference Between Enums Vs String Literal Unions In TypeScript

When working with TypeScript, developers often need to reuse the methods or variables in many places or need clear labels.

In TypeScript, String literal unions are simple and best for one-time use cases, and Enums give more structure and are useful when the options are reused in many places or need clear labels.

Use string literals for simplicity and enums for better organization and reusability. To define a fixed set of named constants, two common approaches are enums and string literal unions.

In this tutorial, we’ll dive into the differences between Enums vs String literal unions in TypeScript and help you decide which one to use in your TypeScript projects.

Table of Contents

What are Enums in TypeScript?

Enums, short for “enumerations,” are a feature in TypeScript that allows you to define a set of named constants. Here’s an example of defining an enum for cardinal directions:

enum Direction {
  Up,
  Down,
  Left,
  Right
}

By default, enums are number-based, with the first value starting at 0 and incrementing by 1 for each additional value. You can also explicitly set the values:

enum Direction {
  Up = 1,
  Down = 2,
  Left = 3,
  Right = 4
}

Enums can also be string-based:

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

One unique feature of enums is reverse mapping. You can access an enum value by its key, but you can also get the key by its value:

enum Direction {
  Up,
  Down,
  Left,
  Right
}

console.log(Direction.Up);    // 0
console.log(Direction[0]);    // "Up"

Here is the output of the above TypeScript code.

TypeScript Enums vs Types Explained with Examples

What are String Literal Unions in TypeScript?

String literal unions, also known as union types, allow you to define a type that can be one of several string literals. Here’s how you would define the same cardinal directions using a string union:

type Direction = "Up" | "Down" | "Left" | "Right";

With this type definition, a variable of type Direction can only be assigned one of those four string values.

Enums vs String Literal Unions in TypeScript

So, when should you use enums and when should you use string unions? Let’s compare them:

Type Safety: Both enums and string unions provide type safety. They restrict the possible values to a predefined set.
Autocompletion: Both enums and string unions provide autocompletion in modern IDEs, making it easy to work with the available options.
Iterability: String unions are naturally iterable using loops or array methods. Enums, on the other hand, are not iterable by default.
Performance: Enums, especially numeric enums, generate more efficient JavaScript code compared to string unions. However, the performance difference is often negligible.
Reverse Mapping: Enums support reverse mapping, allowing you to access keys by their values. String unions do not have this capability.
Importing: When using string unions, you can directly use the string literals without importing anything. With enums, you need to import the enum wherever you want to use it.
Type Safety with Numbers: Numeric enums can be less type-safe. If you pass an invalid numeric value to a function expecting an enum, it will still compile without errors.

Here’s a summary table comparing enums and string unions:

Feature	Enum	String Union
Type Safety	✔️	✔️
Autocompletion	✔️	✔️
Iterability	❌	✔️
Performance	✔️	❌
Reverse Mapping	✔️	❌
No Import Required	❌	✔️
Type Safety with Numbers	❌	✔️

Conclusion

In most cases, string literal unions are the recommended choice over enums in TypeScript. They provide better type safety, are iterable, and don’t require importing. Enums have some advantages, like performance and reverse mapping, but these are less commonly needed.

Consider using string unions by default, and only use enums if you specifically need their unique features. This will keep your code simpler, more flexible, and easier to maintain in the long run.

Remember, the choice between enums and string unions depends on your specific use case and requirements. Evaluate the trade-offs and choose the option that best fits your needs.