The Dark Side of TypeScript Enums: What You Need to Know

Unlocking the Power of Enums in TypeScript

What are Enums?

Enums, short for Enumerated Types, are a common language feature in statically typed languages like C, C#, Java, and Swift. They allow you to define a group of named constant values that can be used within your code. In TypeScript, enums are denoted using the enum keyword followed by the name of the enum and its constant values.

Creating an Enum

Let’s create an enum to represent the days of the week:

enum DayOfWeek {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}

We can then use this enum to create a function that determines if it’s the weekend:

function isItTheWeekend(day: DayOfWeek) {
return day === DayOfWeek.Saturday || day === DayOfWeek.Sunday;
}

The Surprising Truth About Enums

You might expect that passing a number to a function that expects an enum would result in an error. But surprisingly, this is valid TypeScript code:

isItTheWeekend(6); // This is allowed!

This is because enums are actually just JavaScript objects with properties under the hood. The named properties are assigned a number representing their position in the enum, and the object also has number keys with a string value representing the named constant.

Using Enums for Bit Flags

Enums can be useful for creating bit flags. Let’s take our FileState enum and add a new state for the file, ReadWrite:

enum FileState {
Read = 1,
Write = 2,
ReadWrite = FileState.Read | FileState.Write
}

We can then use the | operator to perform a bitwise operation on the enum values to create a new enum value.

Controlling Enum Values

By default, enum values are assigned a number based on their position in the enum definition. However, we can explicitly define the value of an enum member. We can also control the indexes of an enum by specifying the value of a subset of its members.

Non-Numeric Enums

Enums don’t have to be numeric values. They can be any constant or computed value. Let’s create a string enum:

enum Color {
Red,
Green,
Blue
}

The generated code is quite different from numeric enums. We can no longer pass in a number to a function that expects this enum, and we also can’t pass in an arbitrary string.

Mixing and Matching Enum Values

We can mix and match the values of enums within an enum itself. Provided that all assignable values are of the same type, we can generate those numbers in a bunch of different ways, including computed values.

Best Practices

While enums can be a powerful tool in your TypeScript toolbox, they can also lead to confusion if used incorrectly. It’s recommended to use enums sparingly and with caution. Always ensure that the intent of the enum is clear, and avoid using heterogeneous enums unless absolutely necessary.

Take Your App to the Next Level with LogRocket

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. Try it for free today!