7 TypeScript Tricks with Enum (and Fruits) π§Ί
Arnaud Leymet
Posted on July 27, 2021
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 = "π";
Posted on July 27, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 28, 2024
November 4, 2024