7 TypeScript Tricks with Enum (and Fruits) 🧺

Enums are one of the key features of TypeScript.

Relying on basic enums, (numeric and auto-incremented) is standard and the most common use case. Yet Enums can offer much more:

• Merge enums
• Enum subsets
• Get the keys of an enum
• Get the values of an enum
• Iterate over an enum keys
• Iterate over an enum values
• const enum

---

In the rest of this post, let's assume the following code is available:

enum Fruit {
  APPLE = '🍎',
  BANANA = '🍌',
  CHERRY = '🍒',
}

---

1. Merge enums

Merging enums is pretty straightforward using the pipe | operator:

enum OtherFruit {
  DATE = 'date',
}

type AnyFruit = Fruit | OtherFruit

▶️ Try on TypeScript Playground

---

2. Enum subsets

Because cherries may not be as tasty as other fruits, let's exclude them:

type YummyFruits = Exclude<Fruit, Fruit.CHERRY>
// => type YummyFruits = Fruit.APPLE | Fruit.BANANA

▶️ Try on TypeScript Playground

---

3. Get the keys of an enum dynamically

This one needs the use of two type operators: keyof and typeof.

type FruitKey = keyof typeof Fruit
// => type FruitKey = "APPLE" | "BANANA" | "CHERRY"

const keys = Object.keys(Fruit) as FruitKey[]
// => ["APPLE", "BANANA", "CHERRY"]

▶️ Try on TypeScript Playground

---

4. Get the values of an enum dynamically

This snippet leverages the Template Literal type operator:

type FruitValue = `${Fruit}`
// => type FruitValue = "🍎" | "🍌" | "🍒"

const values: FruitValue[] = Object.values(Fruit)
// => ["🍎", "🍌", "🍒"]

▶️ Try on TypeScript Playground

---

5. Iterate over an enum keys

Looping through the enum keys is as simple as:

for (let fruit of Object.keys(Fruit)) {
  console.log(fruit)
}
// => APPLE
//    BANANA
//    CHERRY

▶️ Try on TypeScript Playground

---

6. Iterate over an enum values

In the same spirit, looping through the enum values:

for (let fruit of Object.values(Fruit)) {
  console.log(fruit)
}
// => 🍎
//    🍌
//    🍒

▶️ Try on TypeScript Playground

---

7. const enum

By default, enums generate a bunch of code when compiled to JavaScript:

var Fruit;
(function (Fruit) {
    Fruit["APPLE"] = "🍎";
    Fruit["BANANA"] = "🍌";
    Fruit["CHERRY"] = "🍒";
})(Fruit || (Fruit = {}));

There is however a way not to generate this much code: by leveraging const enum.

Adding just a const in front of our Fruit enum makes a big difference:

const enum Fruit {
  APPLE = '🍎',
  BANANA = '🍌',
  CHERRY = '🍒',
}

...as it compiles to nothing. 🕳️

Just until we use part of its values:

const chosenFruit = Fruit.BANANA
// => compiles to:
// var chosenFruit = "🍌";

▶️ Try on TypeScript Playground

Comments

[yossarian]

You can also write about const enum

[Arnaud Leymet]

Indeed; here it is; a brand new part about const enum at the end of the post.

[Gowri Sankara Naidu Karri]

type FruitValue = `${Fruit}`

This is not valid, typescript throwing error here

[Arnaud Leymet]

I just added TypeScript playground links for each examples.
You'll see that this works just fine :)

[Gowri Sankara Naidu Karri]

Maybe my local typescript version might not supported. Thanks