Convert an Enum to String or Number in TypeScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Convert an Enum to String or Number in TypeScript #

To convert a numeric enum to a string, use bracket notation to access a specific value on the enum to get its name, e.g. NumericEnum[NumericEnum.Yes]. Similarly, you can convert a string enum to string, by using dot notation to access a specific property.

index.tsx
// ✅ NUMERIC Enums enum NumericEnum { Yes, No, Maybe, } // 👇️ to string const str1 = NumericEnum[NumericEnum.Yes]; console.log(str1); // 👉️ "Yes" // 👇️ to number const num2 = NumericEnum.Yes; console.log(num2); // 👉️ 0 // ✅ STRING Enums enum StringEnum { Yes = 'Y', No = 'N', Maybe = 'M', } // 👇️ to string const str2 = StringEnum.Yes; // 👉️ "Y" console.log(str2);

The first enum in the example is a numeric enum, where the Yes property points to a value of 0, No points to a value of 1 and Maybe to a value of 2.

To convert a numeric enum to a string, we have to get the name for a specific value.

With numeric enums, we can use a reverse mapping to access the name for a specific value.

index.tsx
enum NumericEnum { Yes, No, Maybe, } // 👇️ Both lines do the same console.log(NumericEnum[0]); // 👉️ "Yes" console.log(NumericEnum[NumericEnum.Yes]); // 👉️ "Yes"

By passing a specific value of the enum between the brackets, we are able to convert it to a string by getting the corresponding name.

If you need to convert a numeric enum to a number, access a specific property using dot notation.

index.tsx
// ✅ NUMERIC Enums enum NumericEnum { Yes, No, Maybe, } // 👇️ to number const num2 = NumericEnum.Yes; console.log(num2); // 👉️ 0 console.log(typeof num2); // 👉️ "number"

Similarly, you can convert a string enum to a string by accessing one of the names in the enum using dot notation.

index.tsx
// ✅ STRING Enums enum StringEnum { Yes = 'Y', No = 'N', Maybe = 'M', } // 👇️ to string const str2 = StringEnum.Yes; // 👉️ "Y" console.log(str2);

Note that reverse mappings don't work for string enums. String enum members do not get a reverse mapping generated at all.

Enums are real objects in TypeScript, so you can use the Object.keys() and Object.values() methods to get an array of the enum's names or values.

index.tsx
// ✅ STRING Enums enum StringEnum { Yes = 'Y', No = 'N', Maybe = 'M', } const names = Object.keys(StringEnum); console.log(names); // 👉️ ['Yes', 'No', 'Maybe'] const values = Object.values(StringEnum); console.log(values); // 👉️ ['Y', 'N', 'M']

This works in a similar way with numeric enums. However, the Object.keys() method returns an array containing the enum's names and values, so you have to use the filter method to filter out the unnecessary values.

index.tsx
// ✅ 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]
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.