Enums in TypeScript

Introduction

Enums in TypeScript are special types that allows you to define special keywords and associate them with constant variables. In other words, an enum is a collection of constant variables. Enums are one of those data types that do not exist in JavaScript.

Constants in JavaScript

To define a constant variable in JavaScript, we use the const keyword.

// JavaScript
const USER_ID = 123
USER_ID = 456 // Error: Assignment to constant variable.

Constant variables in JavaScript cannot be updated. Any attempt to change the value will result in JavaScript throwing an error. From the example, changing the value of USER_ID results in an error.

Using Enums in TypeScript

Enums in TypeScript offer a way to group constant variables. To create an enum, you use the keyword enum.

// TypeScript
enum ClientStatus {
  gold = 100,
  silver = 50,
  bronze = 30
}

In the example above, we have an enum ClientStatus with three constants. Enums support accessing values from both directions, that is from key to value, and value to key (see log statements below).

// TypeScript
enum ClientStatus {
  Gold = 100,
  Silver = 50,
  Bronze = 30
}

console.log(ClientStatus.Gold) // 100
console.log(ClientStatus["50"]) // Silver

By default, enums are number based, starting at zero. If we create an enum and we do not assign any values to the constants, the first constant will have a value of 0, the second constant will have a value of 1, the third, 2, and so on. (See example below).

// TypeScript
enum Compass {
  North,
  East,
  South,
  West,
}

console.log(Compass.North) // 0
console.log(Compass.East) // 1
console.log(Compass.South) // 2
console.log(Compass.West) // 3

Another thing worth noting is if a constant is initiated with a number, the other constants that comes after it (if they are not assigned a value) will be assigned a value of the previous constant's value plus one. (See example below).

// TypeScript
enum Compass {
  North = 11,
  East,
  South,
  West
}

console.log(Compass.North) // 11
console.log(Compass.East) // 12
console.log(Compass.South) // 13
console.log(Compass.West) // 14

Enums are not only number based. They can also be string-based like the example below.

// TypeScript
enum Compass {
  North = "NORTH",
  East = "EAST",
  South = "SOUTH",
  West = "WEST"
}

console.log(Compass.North) // NORTH

Using Objects as const

A preferred option among many JavaScript developers is to use Objects with the as const syntax. This works the same way as enums.

const Compass = {
  north: "NORTH",
  east: "EAST",
  south: "SOUTH",
  west: "WEST"
} as const

console.log(Compass.north) // NORTH
console.log(Compass.east) // EAST
console.log(Compass.south) // SOUTH
console.log(Compass.west) // WEST

In terms of performance, using Object with the as const syntax is considered a better approach over than using enums.

Conclusion

In this lesson, we discussed enums in TypeScript - what they are and how they are used. We also considered the as const syntax which can be used with objects to serve the same purpose as enums.

Useful Link

• Enums in TypeScript - Official Documentation

Thanks for reading.

Let's connect on LinkedIn | Twitter