How to Merge Enumerations in TypeScript

TypeScript, a statically typed superset of JavaScript, offers powerful features to create and manipulate types, including enums. Enums, short for enumerations, allow developers to define a set of named constants, making code more readable and maintainable.

There are scenarios where you might want to merge multiple enums into one, combining their respective values into a single type. TypeScript allows this by leveraging its type system. Let's delve into how you can merge enums effectively.

Basics of Enumerations in TypeScript

Firstly, let's revisit how to define enums in TypeScript:

1enum Color1 {
2  Red = 'RED',
3  Green = 'GREEN',
4}
5
6enum Color2 {
7  Yellow = 'YELLOW',
8  Blue = 'BLUE',
9}
10

These enums Color1 and Color2 represent distinct sets of constants, each with its own scope and values.

Merging Enumerations

Merging enums involves combining multiple enum types into one, creating a new enum that encompasses all the members from the merged enums.

In TypeScript, you can accomplish enum merging by creating a new enum and using the spread operator (...) to merge the members of the existing enums. Here's an example:

1const Colors = {
2  ...Color1,
3  ...Color2,
4  Black: 'BLACK',
5};
6

In this case, Colors is a constant object that merges the members of Color1 and Color2. The spread operator allows the inclusion of all the members from both enums, resulting in a combined enum Colors containing constants from both Color1 and Color2. Additionally, a new member, Black, has been introduced in this example.

Utilizing Merged Enums

Once you've merged the enums, you can use the combined enum Colors just like any other enum type:

1type Color = keyof typeof Colors;
2
3function getColor(value: Color): void {
4  console.log(value);
5}
6
7getColor('Red'); // Output: RED
8getColor('Green'); // Output: GREEN
9getColor('Blue'); // Output: BLUE
10getColor('Black'); // Output: BLACK
11

The Color type is defined as keyof typeof Colors, allowing you to use it as a type for parameters in functions or method signatures. You can pass any member from the merged object (Color1, Color2, or the new Black) as a parameter.