A Deep Dive into How Typescript Enums Work

Enums, short for Enumerations, are preset constants that can be defined by a developer for use elsewhere in the code.

For Javascript developers, the concept of enums is usually new, but they are relatively straightforward to understand. Enums add context to what we're writing.

How to define Enums

Enums can be defined in Typescript using the Enum keyword. Here is an example:

enum Pet {
    Dog,
    Cat,
    Goldfish,
    Skeleton
}

By default, each of these will be assigned a value. So Dog will be 0, Cat is 1, and so on. Suppose we have a function, then, that generates pets. Before, we may have written this:

// Generate a Cat
generatePet(1);

Now, we can add context to what we're doing, and use our enum list, to do this:

// Generate a Cat
generatePet(Pet.Cat);

The above code is equivalent to what we did before, only we're using our enums instead.

So wait.. why use enums?

You may be wondering "what's the point?", and it's a valid question. Enums essentially allow us to give more context to what we are doing. Instead of having the user memorize a list of possible pet numbers, we can simply ask them to use the enum list. This also gives the next person who reads our code, a better idea of what we were trying to do.

Numeric and String Enums

We can define enums as numbers or strings. Let's look at these in a little detail.

enum Pet {
    Dog = 2,
    Cat,
    Goldfish,
    Skeleton
}

Above, we have given Dog a numeric value of 2. Every item after that, will be incremented by 1, so Cat becomes 3, Goldfish becomes 4, etc, but you can also just define them as you please:

enum Pet {
    Dog = 2,
    Cat = 9,
    Goldfish = 15,
    Skeleton = 44
}

Typically we don't mix strings and numbers to avoid confusion, but we can also define enums as entirely strings too:

enum Counting {
    One = "one",
    Two = "two",
    Three = "three"
}

Enum Values from Functions

Enums can also be functions that return values. If you only define one value in an enum, functions must go at the end. If you put functions at the start, then all enums will require values.

As such, the following throws an error:

// This will throw an error, since the function is at the start
// So typescript assumes all will be functions
enum Counting {
    One = getOne(),
    Two,
    Three,
}

But this will not:

enum Counting {
    One,
    Two,
    Three = getThree(),
}

In the above One returns 0, Two returns 1, and Three returns the value of getThree(). Our getThree() function, to give an example, may look like this (to return the value 3):

const getThree = function() {
    return 3;
}

Calculated Enums

Enums may be calculated, (i.e. a calculation), or refer to other Enums as well. For example:

enum FirstEnum {
    One,   // Returns "0"
    Two,   // Returns "1"
    Three  // Returns "2"
}

enum AnotherEnum {
    One: FirstEnum.One, // returns FirstEnum.One, i.e. "0"
    Two: 1 + 1,         // Calculates and returns "2"
    Three: 1 * 3,       // Calculates and returns "3"
    Star: One           // Refers to AnotherEnum.One, returns "0"
}

Conclusion

Enums are a powerful way in typescript to add more semantics to your code. They give you a good way to let people reading your code know what you were trying to accomplish, and thus improve the maintainability of what you've written.

They also make your life easier, by allowing you to reference standard constants across your codebase.

We hope you've enjoyed this guide to Typescript Enums!

Also Published here