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 = "π";
Top comments (5)
This is not valid, typescript throwing error here
I just added TypeScript playground links for each examples.
You'll see that this works just fine :)
Maybe my local typescript version might not supported. Thanks
You can also write about
const enum
Indeed; here it is; a brand new part about
const enum
at the end of the post.