TypeScript: Enums

This is part three of my Learn Typescript series here on DEV and in this post I am going to be talking about Enums in typescript, ever heard of that? Doesn't matter let's get to it already.

An enum is a way to organize a collection of related values or a structure that proposes several allowed values for a variable. Many programming languages like C, C# and Java have an enum data type but enums are not a javascript data type. This is one of the numerous features that typescript ships with. In TypeScript we have string enums and number (numeric) enums. Here is an example definition of a enum in typescript:

enum CardSuit {
    Clubs,
    Diamonds,
    Hearts,
    Spades
}

// Sample usage
var card = CardSuit.Clubs;

// Safety
card = "not a member of card suit"; // Error : string is not assignable to type `CardSuit`

TypeScript enums are number based. By default, the numbering of enums starts at 0, but you can also set a different value for the first or any other members manually.

enum Color {
    Red,
    Green,
    Blue
}
var col = Color.Red;
col = 0; // Effectively same as Color.Red

Accessing Enum Values

With number enums it's is possible to access the enum name from the integer. However, a sting enum's values do not have this capability. This means you can use the enum name followed by the name of the constant to get the value. Also, with a number enum, you can also use the value to return the name.

For example, an enum called Orientation with East, West, North, South could use Orientation.East to get the value zero or use Orientation[0] to get East. This works because TypeScript generates a map object which gives you access using the name of the entry or the value.

Here is the code of the orientation enum:

enum Orientation {
    East,
    West,
    North,
    South,
}
let directionInNumber = Orientation.East; // Access with the Enum
let directionInString = Orientation[0];  // Access the Enum string from number
console.log(directionInNumber);
console.log(directionInString);

This is not possible with an enum that has strings for value (string enums). The following code does not compile because lines 8 and 9 wrongly accessed the enum.

enum OrientationString {
    East = "E",
    West = "W",
    North = "N",
    South = "S",
}
let directionInNumber = OrientationString.East; // Access with the Enum
let directionInString = OrientationString[0];  // Access the Enum string from number
let directionInString2 = OrientationString["E"];  // Access the Enum string from number
console.log(directionInNumber);
console.log(directionInString);
console.log(directionInString2);

The JavaScript output looks like the following for the number enum (the first example):

let Orientation;
(function (Orientation) {
    Orientation[Orientation["East"] = 0] = "East";
    Orientation[Orientation["West"] = 1] = "West";
    Orientation[Orientation["North"] = 2] = "North";
    Orientation[Orientation["South"] = 3] = "South";
})(Orientation || (Orientation = {}));
let directionInNumber = Orientation.East;
let directionInString = Orientation[0];
console.table(Orientation);

The JavaScript code generated by TypeScript creates a closure that assigns to a variable (Orientation) the four possible values by number as well as with string. The Orientation variable is an array with eight elements. The code on line 10 added an output that demonstrates how the values are accessible either way.

Speeding Up Enum

An enum can be set as a constant to speed up its performance. This way, during execution, instead of referencing the function generated by TypeScript to JavaScript, it will use the value.

For instance, without constant enum, the value set to a direction with Orientation.East will be equal to a function that looks for the value in the map to get the value. However, with a constant, the value is set in the transpiled code to 0 directly – no more function or mapping.

This brings us to the end of the this post on enums thank you for giving it a read. Be sure to check out the next post in this Typescript series. Until then Chao!

Comments

[Aleksei Berezkin]

There's a controversial opinion that TS enums are better be avoided because they, unlike the rest of TS, generate the code. What's your thoughts of it?

[Brandon Damue]

Hello Berezkin. I haven't taken a closer look at that. But I will be sure to do my research so that I will be able to shade more light on that. Thank you