Convert Enum to Array in TypeScript

When working with enums in TypeScript, you may encounter situations where you need to convert an enum to an array. This can be useful when creating a select box or iterating over the enum values.

In this tutorial, we will learn how to convert a TypeScript enum to an array. I will explain different methods, such as object.keys(), object.value() and custom functions to achieve this.

Table of Contents

What are Enums in TypeScript?

Before we dive into converting enums to arrays, let’s quickly review what enums are in TypeScript. Enums allow you to define a set of named constants. They provide a way to give friendly names to numeric or string values. Here’s an example of a TypeScript enum:

enum USStates {
  California = 'CA',
  Texas = 'TX',
  Florida = 'FL',
  NewYork = 'NY'
}

In this example, we have an enum called USStates, representing some states in the United States. Each enum member is assigned a string value representing the state’s abbreviation.

Convert an Enum to an Array Using Object.keys() in TypeScript

One of the easiest ways to convert an enum to an array is using the built-in Object.keys() method in TypeScript. The Object.keys() method returns an array of a given object’s own enumerable property names. Here’s how you can use it:

enum USStates {  
   California = 'CA', 
   Texas = 'TX',  
   Florida = 'FL',  
   NewYork = 'NY'
  }
const statesArray = Object.keys(USStates);
console.log(statesArray);
// Output: ['California', 'Texas', 'Florida', 'NewYork']

As you can see, Object.keys(USStates) returns an array containing the names of the enum members. This approach works well when you need an array of enum keys.

Check out: Extend Interfaces with Classes in TypeScript

Convert an Enum to an Array Using Object.values() in TypeScript

If you need an array of enum values instead of keys, you can use the Object.values() method. It returns an array of a given object’s own enumerable property values. Here’s an example:

enum USStates {
  California = 'CA',
  Texas = 'TX',
  Florida = 'FL',
  NewYork = 'NY'
}
const statesArray = Object.values(USStates);
console.log(statesArray);
// Output: ['CA', 'TX', 'FL', 'NY']

In this case, Object.values(USStates) returns an array containing the values of the enum members.

Check out: Choose Between TypeScript Classes and Interfaces

Create a Custom Function to Convert an Enum to an Array in TypeScript

While using Object.keys() and Object.values() is straightforward, you may want to create a reusable function to convert an enum to an array. Here’s an example of such a function:

enum USStates {
  California = 'CA',
  Texas = 'TX',
  Florida = 'FL',
  NewYork = 'NY'
}

function enumToArray<T extends { [key: string]: string }>(enumObj: T): string[] {
  return Object.values(enumObj);
}

const statesArray = enumToArray(USStates);
console.log(statesArray); // Output: ['CA', 'TX', 'FL', 'NY']

This custom enumToArray function takes an enum object as a parameter and returns an array of its values. It uses a generic type T to ensure type safety.

Create Custom Function to Convert Enum to Array in TypeScript

Check out: Loose vs Strict Equality in TypeScript

Handling Numeric Enums in TypeScript

So far, we’ve focused on string enums, but what about numeric enums? When converting numeric enums to arrays, you might encounter some challenges. Let’s consider an example:

enum USRegions {
  Northeast = 1,
  Midwest,
  South,
  West
}

In this case, we have a numeric enum USRegions representing different regions of the United States if we try to use Object.values(USRegions), we’ll get an array of numbers:

const regionsArray = Object.values(USRegions);
console.log(regionsArray);
// Output: [1, 2, 3, 4]

However, we might want an array of the enum member names instead. To achieve this, we can use Object.keys(USRegions) and filter out the numeric keys:

const regionsArray = Object.keys(USRegions).filter((key) => isNaN(Number(key)));
console.log(regionsArray);
// Output: ['Northeast', 'Midwest', 'South', 'West']

We get an array containing only the enum member names by filtering out the numeric keys using isNaN(Number(key)).

enum USRegions {
  Northeast = 1,
  Midwest,
  South,
  West
}
const regionsArray = Object.values(USRegions);
console.log(regionsArray);
// Output: [1, 2, 3, 4]

const regionsArray1 = Object.keys(USRegions).filter((key) => isNaN(Number(key)));
console.log(regionsArray1);
// Output: ['Northeast', 'Midwest', 'South', 'West']

Conclusion

Converting a TypeScript enum to an array is a common task that you may encounter in various scenarios. Whether you need an array of enum keys or values, TypeScript provides built-in methods like Object.keys() and Object.values() to make the conversion straightforward.

You can also create custom functions to handle more complex cases or improve code reusability. Converting enums to arrays is particularly useful when working with user interfaces, such as populating select boxes or iterating over enum values.

By understanding the different approaches to convert TypeScript enums to arrays, you can effectively work with enums in your projects and leverage their benefits.