Get all Enum Names as an Array in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 13, 2022

banner

Photo from Unsplash

Get all Enum Names as an Array in TypeScript #

To get all enum names as an array:

  1. Pass the enum as a parameter to the Object.keys() method.
  2. If the enum is numeric, filter the enum values out of the array.
  3. For string enums, the Object.keys() method returns an array containing the enum names.
index.ts
// ✅ NUMERIC Enums enum NumericEnum { Yes, No, Maybe, } const names1 = Object.keys(NumericEnum).filter((v) => isNaN(Number(v))); console.log(names1); // 👉️ ['Yes', 'No', 'Maybe'] const values1 = Object.values(NumericEnum).filter((v) => !isNaN(Number(v))); console.log(values1); // 👉️ [0, 1, 2] for (const name1 of names1) { console.log(name1); // 👉️ Yes, No, Maybe } // ✅ STRING Enums enum StringEnum { Yes = 'Y', No = 'N', Maybe = 'M', } const names2 = Object.keys(StringEnum); console.log(names2); // 👉️ ['Yes', 'No', 'Maybe'] const values2 = Object.values(StringEnum); console.log(values2); // 👉️ ['Y', 'N', 'M']

Enums in TypeScript are real objects and exist at runtime. This is why we are able to pass an enum to the Object.keys method.

The Object.keys() method returns an array containing the object's keys.

index.ts
// 👇️ ['name', 'age'] console.log(Object.keys({ name: 'Tom', age: 30 }));

However, the output for numeric and string enums is different.

index.ts
// ✅ NUMERIC Enums enum NumericEnum { Yes, No, Maybe, } // ✅ STRING Enums enum StringEnum { Yes = 'Y', No = 'N', Maybe = 'M', } // 👇️ ['0', '1', '2', 'Yes', 'No', 'Maybe'] console.log(Object.keys(NumericEnum)); // 👇️ ['Yes', 'No', 'Maybe'] console.log(Object.keys(StringEnum));
Notice that when a numeric enum is passed to the Object.keys method, we get get an array containing the values and the names of the enum, whereas for a string enum, we only get the names.

This is why we used the filter method in the first example - to filter out the enum values from the array.

If you need to iterate over the array of enum names, you can use a for...of loop or the Array.forEach method.

index.ts
// ✅ STRING Enums enum StringEnum { Yes = 'Y', No = 'N', Maybe = 'M', } const names2 = Object.keys(StringEnum); console.log(names2); // 👉️ ['Yes', 'No', 'Maybe'] for (const name of names2) { console.log(name); // 👉️ "Yes, No, Maybe" } names2.forEach((name, index) => { console.log(name); // 👉️ "Yes, No, Maybe" });

Note that you can also use reverse mappings when working with numeric enums.

index.tsx
// ✅ NUMERIC Enums enum NumericEnum { Yes, No, Maybe, } const yes = NumericEnum.Yes; console.log(yes); // 👉️ 0 const nameOfYes = NumericEnum[yes]; console.log(nameOfYes); // 👉️ Yes

In the example, we use the value of the Yes property in the numeric enum (0) to get the corresponding name (Yes).

Here is a more direct representation of how it works.

index.tsx
// ✅ NUMERIC Enums enum NumericEnum { Yes, No, Maybe, } console.log(NumericEnum[0]); // 👉️ Yes console.log(NumericEnum[1]); // 👉️ No console.log(NumericEnum[2]); // 👉️ Maybe

Unfortunately, you can only use this approach to get tha names of numeric enums.

String enum members don't get a reverse mapping generated at all.

Note that the examples above would not work if you use const enums, because const enums can only use constant enum expressions and are completely removed during compilation.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.