Typescript

How Typescript Enums Work

Enums, short for Enumerations, are preset constants which 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 straight forward 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:

typescript Copy
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:

typescript Copy
// Generate a Cat generatePet(1);

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

typescript Copy
// 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 simple 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.

typescript Copy
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:

typescript Copy
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:

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

Enum Values from Functions

Enums can also be functions which 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:

typescript Copy
// 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:

typescript Copy
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):

javascript Copy
const getThree = function() { return 3; }

Calculated Enums

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

typescript Copy
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 wriitten. 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!

Last Updated Thursday, 29 July 2021
Click to Subscribe Subscribed

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email