How To Convert TypeScript Enums To Arrays?

In this tutorial, I will explain how to convert TypeScript enums to arrays with detailed examples. As a developer, I encountered a situation where I needed to dynamically generate a list of options for a dropdown menu in a TypeScript application. This required me to convert an enum to an array in the Typescript code.

Table of Contents

What is an Enum in TypeScript?

Enums, short for enumerations, are a feature in TypeScript that allows you to define a set of named constants. These constants can either be numeric or string-based. Enums are useful for creating a collection of related values that can be used interchangeably in your code.

Here’s a quick example of a numeric enum:

enum DaysOfWeek {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday
}

And a string enum:

enum Colors {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

Check out How to Check if an Array is Null or Empty in TypeScript?

Convert Numeric Enums to Arrays in TypeScript

Let’s start with numeric enums. The process involves using the Object.keys() and Object.values() methods to extract the keys and values of the enum.

Here’s an example:

enum DaysOfWeek {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday
}

// Convert enum to array of keys
const daysOfWeekKeys = Object.keys(DaysOfWeek).filter(key => isNaN(Number(key)));

// Convert enum to array of values
const daysOfWeekValues = Object.values(DaysOfWeek).filter(value => typeof value === 'number');

console.log(daysOfWeekKeys); // Output: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
console.log(daysOfWeekValues); // Output: [0, 1, 2, 3, 4, 5, 6]

In this example, we use Object.keys() to get all the keys of the enum and filter out the numeric keys. Similarly, we use Object.values() to get all the values and filter out the non-numeric values.

Here is the exact output in the screenshot below:

Read How to Remove Empty Strings from an Array in TypeScript?

Convert String Enums to Arrays in TypeScript

For string enums, the process is slightly different as we need to work with string values directly in TypeScript.

Here’s an example:

enum Colors {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

// Convert enum to array of keys
const colorKeys = Object.keys(Colors);

// Convert enum to array of values
const colorValues = Object.values(Colors);

console.log(colorKeys); // Output: ["Red", "Green", "Blue"]
console.log(colorValues); // Output: ["RED", "GREEN", "BLUE"]

In this case, we use Object.keys() and Object.values() directly, as we don’t need to filter out any numeric values.

Check out How to Check if an Array is Not Empty in TypeScript?

Advanced Example: Using Enums in a Dropdown Menu

Let’s dive into a more advanced example where we use enums to populate a dropdown menu in a React component. This example demonstrates a practical use case of converting enums to arrays.

import React from 'react';

enum States {
  California = "CA",
  NewYork = "NY",
  Texas = "TX",
  Florida = "FL",
  Illinois = "IL"
}

const StateDropdown: React.FC = () => {
  const stateKeys = Object.keys(States);
  const stateValues = Object.values(States);

  return (
    <select>
      {stateValues.map((state, index) => (
        <option key={index} value={state}>
          {stateKeys[index]}
        </option>
      ))}
    </select>
  );
};

export default StateDropdown;

In this example, we define a States enum with state abbreviations. We then convert the enum to arrays of keys and values and use them to populate the options of a dropdown menu.

Read How to Check if an Array is Empty in TypeScript?

Handling Enums with Mixed Values

Sometimes, enums can have mixed values (both numeric and string). Here’s how you can handle such cases:

enum MixedEnum {
  First = 1,
  Second = "SECOND",
  Third = 3,
  Fourth = "FOURTH"
}

// Convert enum to array of keys
const mixedEnumKeys = Object.keys(MixedEnum).filter(key => isNaN(Number(key)));

// Convert enum to array of values
const mixedEnumValues = Object.values(MixedEnum).filter(value => typeof value === 'number' || typeof value === 'string');

console.log(mixedEnumKeys); // Output: ["First", "Second", "Third", "Fourth"]
console.log(mixedEnumValues); // Output: [1, "SECOND", 3, "FOURTH"]

In this example, we filter the keys and values to ensure we only get the relevant parts of the enum.

Conclusion

In this tutorial, I explained how to convert Typescript enums to arrays using different methods with examples. Whether you are working with numeric, string, or mixed enums, the techniques I explained here help you efficiently convert enums to arrays for various use cases.