How Typescript Enums Work
📣 Sponsor
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:
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 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.
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 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:
// 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 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!
More Tips and Tricks for Typescript
- How the TypeScript Record Type Works
- How Template Literal Types work in TypeScript
- How the TypeScript Pick Type works
- How the TypeScript Partial Type Works
- How the typeof Operator works in TypeScript
- How to convert a String to a Number in TypeScript
- How the TypeScript ReturnType Type works
- How Intrinsic Type Manipulations work in TypeScript
- How the TypeScript Parameters Type Works
- How Typescript Generic Types Work