What is Enum in TypeScript
Kento Honda
Posted on March 4, 2023
Intro
Currently, I am learning TypeScript by reading the book, "Learning TypeScript" (written by Josh Goldberg), and joining a private book club with highly motivated TypeScript learners.
While I am participating in this book club, sometimes I have heard the term "enum" in the explanation of something in TypeScript by other participants.
Even though I have recognized that I will learn and cover this topic later on, I decided to write an article describing the fundamental concepts of "enum" in TypeScript because I am very curious about it.
So, now is the time to get started!
What is Enum in TypeScript?
Enum in TypeScript is one of TypeScript's built-in features that allows us to declare a set of constant variables. In other words, TypeScript gives us a special syntax to create an object containing string type or number type value.
Here is a sample code of Enum; we can specify all the possible variables in Enum. In this case, we have four constant values as the name of animals.
enum Animals {
Dog,
Cat,
Fox,
Seal,
}
What the code snippet above does is define a new Enum named Animal with four possible values.
And one of Enum's key features is that Enum assigns a number to each value with auto-incrementation by 1, starting from the first value with 0.
To explain that, I put another code sample;
enum Animals {
Dog, // Dog has the number 0
Cat, // Cat has the number 1
Fox, // Fox has the number 2
Seal, // Seal has the number 3
}
let myFavoriteAnimal: Animals = Animals.Cat;
console.log(myFavoriteAnimal) // 1 is outputted
myFavoriteAnimal = Animals.Seal;
console.log(myFavoriteAnimal) // 3 is outputted
This sample code describes one of the benefits of using an enum in TypeScript.
Instead of using numeric values directly in your code, declaring constant variables in an enum is much easier to understand and improves the readability of your code.
String Enum
Here is another type of Enum so-called "String Enum". Each variable that is defined in a string enum has string literal type as their value type.
(FYI, you can check about 'what is Literal Type in TypeScript from Literal Type)
enum Direction {
North = "North", // (enum member) Direction.North = "North"
East = "East", // (enum member) Direction.East = "East"
South = "South", // (enum member) Direction.South = "South"
West = "West", // (enum member) Direction.West = "West"
}
Based on this code snippet, we can utilize string enum like the additional code sample below;
enum Direction {
North = "North",
East = "East",
South = "South",
West = "West",
}
function getDirection(d: Direction): string {
switch (d) {
case Direction.North:
return 'The right direction is North';
case Direction.East:
return 'The right direction is East';
case Direction.South:
return 'The right direction is South';
case Direction.West:
return 'The right direction is West';
default:
throw new Error('Invalid direction');
}
}
console.log(getDirection(Direction.North)); // Output: "The right direction is North"
console.log(getDirection(Direction.West)); // Output: "The right direction is West"
In this case, the getDirection function has a switch statement that makes us get different returned values based on the direction given to this function as a parameter.
Except for the case that an invalid parameter does not exist in the Direction Enum, we could get the exact expected return value from the getDirection function by passing one of constant values (like Direction.North) in it.
Conclusion
In summary, Enum in Typescript is a special type allowing us to have constants with an assigned number incremented by 1 from 0. That results in making our codes easier to follow for others and improving their maintainability.
However, I have heard differing opinions on the use of Enum in TypeScript such as using Enum in TypeScript is not a good case for developers. So probably my next article could be the one talking about if we should avoid using Enum or not in TypeScript!
References
Posted on March 4, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.