Typescript: Enums
Tags: typescript, webdev, beginners, tutorial
Published: 2023-03-12 18:46:57

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
{%- # TOC start -%}
- [Enums](#enums)
  * [Numeric enums](#numeric-enums)
  * [String enums](#string-enums)
  * [Heterogeneous enums](#heterogeneous-enums)
{%- # TOC end -%}


## 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.

```ts
enum Direction  {
	Up, 
	Down, 
	Left, 
	Right,
}
```

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:

```ts
// 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,
}
```

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.

```ts
enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
```

To access any members you can do the following:

```ts
console.log(Direction.Up) // output: UP
```

### 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.

```ts
enum ExtraFries {
  No = 0,
  Yes = "YES",
}
```

If you want to learn more about **Enums**, consider reading the [documentation](https://www.typescriptlang.org/docs/handbook/enums.html).

### 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**

* [Twitter](https://twitter.com/j471n_)
    
* [GitHub](https://github.com/j471n)
    
* [LinkedIn](https://www.linkedin.com/in/j471n/)
    
* [Instagram](https://instagram.com/j471n_)
    
* [Website](https://j471n.in)
    
* [Newsletter](https://j471n.substack.com/)
    
* [Buy me a coffee](https://www.buymeacoffee.com/j471n)