Beginner's TypeScript #tips
Tags: programming, beginners, typescript
Published: 2024-01-24 15:00:00

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/047svjs4mkoajiyshw1f.png)

⭐ **Typescript enums and why we should avoid them** ⭐

In the beginner's code bases, we often use Typescript **enums** to store a bunch of **constants**.

```ts
export enum CompassDirection {
  North, // 0
  East, // 1
  South, // 2
  West, // 3
}
```
The above code creates a new type **CompassDirection** with **four** possible values: **CompassDirection.North**, **CompassDirection.East**, **CompassDirection.South**, and **CompassDirection.West**.

Each constant gets assigned a numerical value starting at **0**, so in that example, **CompassDirection.North** is equal to **0**, and **CompassDirection.West** is equal to **3**.

These values can be customized, and we can use **strings**, **objects**, or **anything** we want instead of **numbers**:

```ts
export enum CompassDirection {
  North = 'N',
  East = 'E',
  South = 'S',
  West = 'W',
}
```

So **Why should we avoid enums**? 🤔


We should avoid **enums** because they are neither convenient nor performant. For instance, this is what the last example gets compiled into by the Typescript compiler:

```ts
var CompassDirection;
(function (CompassDirection) {
  CompassDirection['North'] = 'N',
  CompassDirection['East'] = 'E',
  CompassDirection['South'] = 'S',
  CompassDirection['West']= 'W',
})(CompassDirection || (CompassDirection = {}))
```

That is not pretty, and it comes at the extra cost of all that code being downloaded in the browser and then interpreted, which impacts performance.

Also, **enums** are not very convenient to be used in component templates. If we want to use an **enum** in a component template, we need this additional code to make that type accessible on the component instance:

```ts
export enum CompassDirection {
  North = 'N',
  East = 'E',
  South = 'S',
  West = 'W',
}

// In Angular Hello Component
@Component({...})
export class HelloComponent {
  compassDirection = CompassDirection;
}
```

Instead, we could use a **union** type:

```ts
type CompassDirection = 'North' | 'East' | 'South' | 'West'
```

We still get a type associated with specific values, but now this gets compiled into the following:

```ts
```

We **did not forget** anything in the above block: **Union** types are like **interfaces** and do not get compiled into anything, meaning they do not increase the size of your code base or impact performance.

Also, since those types are just the union of other types (such as **strings** or **numbers**), these **constants** can be used as-is in a component template without needing to tweak our component class.

In other words, **union** types preserve type safety without degrading our app’s performance, which is a **win-win**.

---

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:
- **Medium:** https://medium.com/@nhannguyendevjs/
- **Dev**: https://dev.to/nhannguyendevjs/
- **Hashnode**: [https://nhannguyen.hashnode.dev](https://nhannguyen.hashnode.dev/)/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/
- **Buy Me a Coffee:** [https://www.buymeacoffee.com/nhannguyendevjs/](https://www.buymeacoffee.com/nhannguyendevjs/)