TypeScript Enums vs String Literal Unions

When working with TypeScript, developers often need to define a set of named constants. Two common approaches are using enums or string literal unions. In this tutorial, we’ll explore the differences between TypeScript Enums and String literal unions with some examples.

What are TypeScript Enums?

Enums, short for enumerations, allow developers to define a set of named constants. They provide a way to create a group of related values that can be used throughout your TypeScript code. Enums can be numeric or string-based.

Here’s an example of a numeric enum:

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

In this case, Direction is an enum with four members: Up, Down, Left, and Right. The values assigned to these members are incrementing numbers starting from 1.

String enums, on the other hand, allow you to assign string values to each member:

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

Enums can make your code more readable and easier to maintain by providing a clear set of named constants. They also offer auto-completion and type-checking benefits in modern IDEs.

However, enums have some drawbacks. They are not only types but also values, which means they need to be imported whenever they are used in other files. Additionally, enums can be more verbose compared to string literal unions.

Check out Check if a String is in an Enum in TypeScript

What are String Literal Unions in TypeScript?

String literal unions, introduced in recent versions of TypeScript, provide an alternative way to define a set of named constants. They allow you to create a union type of string literals.

Here’s an example of a string literal union:

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

In this case, Direction is a union type that can hold one of the four string values: "Up", "Down", "Left", or "Right".

String literal unions offer several benefits over enums:

1. They are simply types, not values, so there’s no need to import them in other files. This can lead to cleaner and more concise code.
2. They provide tab completion and type checking in modern IDEs, just like enums.
3. They have a more lightweight syntax compared to enums.

However, string literal unions lack some of the features that enums provide, such as the ability to assign numeric values or use computed values.

Check out Convert TypeScript Enums to Arrays

Examples and Comparison of TypeScript Enums vs String Literal Unions

Let’s look at a few examples to compare enums and string literal unions in TypeScript.

Example 1: Defining a set of constants

Enum:

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

String Literal Union:

type Color = "Red" | "Green" | "Blue";

In this example, both the enum and string literal union define a set of color constants. The enum allows assigning string values to each member, while the string literal union directly defines the allowed string values.

Example 2: Using constants in functions

Enum:

function printColor(color: Color) {
  console.log(color);
}

printColor(Color.Red);

String Literal Union:

function printColor(color: Color) {
  console.log(color);
}

printColor("Red");

Both approaches allow you to use the defined constants as function parameters. With enums, you need to use the enum name followed by the member name (e.g., Color.Red), while string literal unions allow you to directly use the string value (e.g., "Red").

Example 3: Iterating over constants

Enum:

for (const color in Color) {
  console.log(color);
}

String Literal Union:

const colors: Color[] = ["Red", "Green", "Blue"];
for (const color of colors) {
  console.log(color);
}

Iterating over enum members is straightforward using a for...in loop. With string literal unions, you need to create an array of the allowed values and use a for...of loop to iterate over them.

Read Convert an Enum to an Array in TypeScript

Summary: TypeScript Enums vs String Literal Unions

Let me show you a summary of the differences between TypeScript enums vs string literal unions.

Conclusion

Both TypeScript enums and string literal unions define a set of named constants. Enums offer additional features like numeric and computed values, but they require importing and have a more verbose syntax. String literal unions, on the other hand, have a lightweight syntax and don’t need to be imported, but they lack some of the advanced features of enums.

In this tutorial, I explained the difference between TypeScript enums and string literal unions.

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/