DEV Community

Cover image for 7 TypeScript Tricks with Enum (and Fruits) ๐Ÿงบ
Arnaud Leymet
Arnaud Leymet

Posted on • Updated on

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:


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

enum Fruit {
  APPLE = '๐ŸŽ',
  BANANA = '๐ŸŒ',
  CHERRY = '๐Ÿ’',
}
Enter fullscreen mode Exit fullscreen mode

1. Merge enums

Merging enums is pretty straightforward using the pipe | operator:

enum OtherFruit {
  DATE = 'date',
}

type AnyFruit = Fruit | OtherFruit
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ 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
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ 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"]
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ 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)
// => ["๐ŸŽ", "๐ŸŒ", "๐Ÿ’"]
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ 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
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ 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)
}
// => ๐ŸŽ
//    ๐ŸŒ
//    ๐Ÿ’
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ 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 = {}));
Enter fullscreen mode Exit fullscreen mode

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 = '๐Ÿ’',
}
Enter fullscreen mode Exit fullscreen mode

...as it compiles to nothing. ๐Ÿ•ณ๏ธ

Just until we use part of its values:

const chosenFruit = Fruit.BANANA
// => compiles to:
// var chosenFruit = "๐ŸŒ";
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ Try on TypeScript Playground

Top comments (5)

Collapse
 
kgsnaidu profile image
Gowri Sankara Naidu Karri • Edited
type FruitValue = `${Fruit}`
Enter fullscreen mode Exit fullscreen mode

This is not valid, typescript throwing error here

Collapse
 
prod profile image
Arnaud Leymet

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

Collapse
 
kgsnaidu profile image
Gowri Sankara Naidu Karri

Maybe my local typescript version might not supported. Thanks

Collapse
 
captainyossarian profile image
yossarian

You can also write about const enum

Collapse
 
prod profile image
Arnaud Leymet

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