How to Merge Enums in TypeScript with Different Values?

If you’re working with TypeScript, you’ve probably used enums to define a set of named constants. But what if you need to combine two or more enums, especially when they have different values? In this tutorial, I’ll walk you through everything you need to know about merging enums in TypeScript, with clear examples and explanations.

What Is an Enum in TypeScript?

An enum (short for “enumeration”) is a special data type in TypeScript that allows you to define a set of named constants. Enums make your code more readable and less error-prone by replacing magic numbers or strings with meaningful names.

Here’s a simple example:

enum Color {
  Red,
  Green,
  Blue
}

You can then use Color.Red, Color.Green, or Color.Blue in your code.

Why Merge Enums?

Sometimes, you might have multiple enums representing related concepts, and you want to combine their values for easier access or to avoid duplicate code. For example, you might have:

enum Mammals {
  Human = 'Human',
  Dolphin = 'Dolphin'
}

enum Reptiles {
  Snake = 'Snake',
  Lizard = 'Lizard'
}

Suppose you want a single object or type that contains both mammals and reptiles. That’s where merging enums comes in.

Check out How to Iterate Over Enums in TypeScript?

Can You Merge Enums Directly in TypeScript?

TypeScript doesn’t support merging enums directly using syntax like enum Combined extends Mammals, Reptiles {}. However, you can merge their values into a new object or type using a few simple techniques.

Let’s explore these methods step by step.

Method 1: Merging Enums into an Object Using Spread Syntax

Enums in TypeScript are real objects at runtime. This means you can use the object spread syntax (...) to merge them into a new object.

Example

Here is an example.

enum Mammals {
  Human = 'Human',
  Dolphin = 'Dolphin'
}

enum Reptiles {
  Snake = 'Snake',
  Lizard = 'Lizard'
}

const Animals = { ...Mammals, ...Reptiles };

console.log(Animals);
// Output: { Human: 'Human', Dolphin: 'Dolphin', Snake: 'Snake', Lizard: 'Lizard' }

Here is the exact output in the screenshot below:

Now, Animals contains all values from both enums. You can access them like this:

console.log(Animals.Human);   // 'Human'
console.log(Animals.Snake);   // 'Snake'

Tip: If both enums have a key with the same name, the value from the last spread will overwrite the previous one. So be careful with duplicate keys!

Read Convert String to Enum in TypeScript

Method 2: Using Object.assign to Merge Enums

Another way to merge TypeScript enums is with Object.assign, which works similarly to the spread operator.

Example

You can refer to the example below.

enum Mammals {
  Human = 'Human',
  Dolphin = 'Dolphin'
}

enum Reptiles {
  Snake = 'Snake',
  Lizard = 'Lizard'
}

const Animals = Object.assign({}, Mammals, Reptiles);

console.log(Animals);
// Output: { Human: 'Human', Dolphin: 'Dolphin', Snake: 'Snake', Lizard: 'Lizard' }

You can use Animals.Human or Animals.Lizard as needed.

Here is the exact output in the screenshot below:

Read Get Key by Value from enum String in Typescript

Method 3: Create a Union Type from Two Enums

Sometimes, you want to merge enums in TypeScript at the type level, not just at the value/object level. This is helpful for function arguments or variable types.

Example

You can see an example below:

enum Mammals {
  Human = 'Human',
  Dolphin = 'Dolphin'
}

enum Reptiles {
  Snake = 'Snake',
  Lizard = 'Lizard'
}

type Animal = Mammals | Reptiles;

function printAnimal(animal: Animal) {
  console.log(animal);
}

printAnimal(Mammals.Human);   // 'Human'
printAnimal(Reptiles.Snake);  // 'Snake'

Here, the Animal type can be any value from either Mammals or Reptiles enums.

Here is the exact output in the screenshot below:

Check out How to Compare String to Enum in TypeScript

Method 4: Create a Combined Enum Manually

If you want a single enum with all values in TypeScript, you can manually create a new enum and copy over the values.

Example

Let me show you an example below:

enum Animals {
  Human = 'Human',
  Dolphin = 'Dolphin',
  Snake = 'Snake',
  Lizard = 'Lizard'
}

This is the most straightforward approach, but it requires you to maintain the combined enum manually.

Read TypeScript Enum with Multiple Values

Best Practices When Merging Enums

Here are some best practices I thought I would share with you when merging enums in TypeScript.

• Avoid Duplicate Keys: If two enums have the same key name, merging them into an object will overwrite values. Plan your enum names to avoid conflicts.
• Use Union Types for Types: If you just need to accept values from multiple enums in a function or variable, use a union type.
• Prefer Objects for Runtime Merging: If you need a combined object for lookups or iteration, use the spread operator or Object.assign.
• Manual Combination for Large Enums: For large enums or when you want full control, consider generating the combined enum with a script or code generator.

Conclusion

In this tutorial, I explained how to merge enums in TypeScript using various methods such as using the spread operator, Object.assign(), or union types. Do let me know if these examples help you in the comments below.

You may also like the following tutorials:

• How to Sort by Enum in TypeScript?
• How to Convert TypeScript Enum to Number
• TypeScript Enum Duplicate Values