Typescript: Enums

Jatin Sharma - Mar 12 '23 - - Dev Community

In this article, you'll learn about what enums are and how you can use them in your projects. Enums, short for Enumerated Types.

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Table of Contents

Enums

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

Numeric enums

We will first take a look at Numeric enums and how we can create them. An enum can be defined using the enum keyword.

enum Direction  {
    Up, 
    Down, 
    Left, 
    Right,
}
Enter fullscreen mode Exit fullscreen mode

Above, we have a numeric enum where Up is initialized with 0. All of the following members are auto-incremented from that point on. In other words, Direction.Up has the value 0, Down has 1, Left has 2, and Right has 3.

In the Numeric enums, the values are in the incremented order as explained above. You can manipulate these values as you want. Let’s take a few examples of that:

// Up = 1, Down = 2, Left = 3, Right = 4
enum Direction  {
    Up = 1, 
    Down, 
    Left, 
    Right,
}

// Up = 1, Down = 5, Left = 6, Right = 7
enum Direction  {
    Up, 
    Down = 5, 
    Left, 
    Right,
}

// Up = 10, Down = 11, Left = 14, Right = 15
enum Direction  {
    Up = 10, 
    Down, 
    Left = 14, 
    Right,
}
Enter fullscreen mode Exit fullscreen mode

In the above code example, I have updated the values and shown you what will be the value of the others members.

String enums

String enums are a similar concept. In a string enum, each member has to be constant-initialized with a string literal, or with another string enum member.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
Enter fullscreen mode Exit fullscreen mode

To access any members you can do the following:

console.log(Direction.Up) // output: UP
Enter fullscreen mode Exit fullscreen mode

Heterogeneous enums

enums can be mixed with string and numeric members, but it’s not clear why you would ever want to do so. it’s advised that you don’t do this.

enum ExtraFries {
  No = 0,
  Yes = "YES",
}
Enter fullscreen mode Exit fullscreen mode

If you want to learn more about Enums, consider reading the documentation.

Wrapping up

In this article, I have explained what enums are and how you can use them in your projects. Enums, short for Enumerated Types.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .