Carl Rippon

Building SPAs

Carl Rippon
BlogBooks / CoursesAbout
This site uses cookies. Click here to find out more

Using Enums in TypeScript

August 12, 2020
typescript

In this post, we will cover what TypeScript enums are and how to create them. We’ll also discover the drawbacks of enums and use cases where they work well.

Enums in TypeScript

What is an enum?

An enum is short for enumeration and is a type that represents named constants. If the meaning of the constant’s value is not apparent, it can make code easier to understand.

Consider the examples below:

if (status === 5) {
  // do something
}

if (status === JobStatus.Completed) {
  // do something
}

The second if statement uses an enum. It is arguably easier to understand than the first if statement.

Enum syntax

The enum syntax is as follows:

enum TypeName {
    value1,
    value2,
    ...
}

The type name follows the enum keyword. The value names are then listed inside curly brackets.

Numeric enums

Enum values are zero-based auto-incrementing numbers by default.

Consider the example below:

enum Level {
  High,
  Medium,
  Low,
}

We can validate that the Level enum represents a zero-based auto-incrementing number by outputting the values to the console:

let level: Level;
level = Level.High;
console.log(level); // 0
level = Level.Medium;
console.log(level); // 1
level = Level.Low;
console.log(level); // 2

What if we assign the enum variable to a number that is isn’t 0, 1 or 2:

level = 5; // ✅ no type error

No type error occurs! That’s perhaps not what we expected.

Numeric enum values are not strongly-typed to the values defined in the enum.

So, generally, a numeric enum isn’t a great choice for a type.

String enums

Enum values can be string’s if we explicitly define a string value after the name. For example:

enum Level {
  High = "H",
  Medium = "M",
  Low = "L",
}

let level: Level;
level = Level.High;
console.log(level); // "H"
level = Level.Medium;
console.log(level); // "M"
level = Level.Low;
console.log(level); // "L"

What if we assign the enum variable to a string that is isn’t "H", "M" or "L":

level = "VH"; // 💥 type error - type '"VH"' is not assignable to type 'Level'

That’s more like it!

What if we set level to a string within the Level type:

level = "H"; // ✅ no type error

So, string enum values are strongly-typed to the named values declared in the enum.

Nice!

String literal unions v string enums

String literal unions are like string enums in that they create a narrow type of specific strings.

type Level = "High" | "Medium" | "Low"

If the strings are meaningful and don’t need to be mapped to something more meaningful, then a string literal union is a concise way of creating the type. String enums are useful when the meaning of string value isn’t apparent because it can be given a meaningful name to help the readability of the code.

Wrap up

Enums are a type that can make code more readable, where the meaning of the value of a variable is not apparent. Numeric enums are not strongly-typed to the values in the enum, but string enums are.

Did you find this post useful?

Let me know by sharing it on Twitter.
Click here to share this post on Twitter

If you to learn more about TypeScript, you may find my free TypeScript course useful:

Take a look