How to access an Enum by Index in TypeScript

avatar

Borislav Hadzhiev

Mon Feb 14 20222 min read

banner

Photo by Meiying Ng

Access an Enum by Index in TypeScript #

To access an enum by index:

  1. Use the Object.values() method to get an array containing the enum's values.
  2. Use square brackets to access the array at the specific index and get the value.
index.ts
// ✅ For STRING Enums enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } const indexOfS = Object.keys(Sizes).indexOf('Small'); console.log(indexOfS); const s = Object.values(Sizes)[indexOfS]; console.log(s); // 👉️ "S" const indexOfM = Object.keys(Sizes).indexOf('Medium'); console.log(indexOfM); // 👉️ 1 const m = Object.values(Sizes)[indexOfM]; console.log(m); // 👉️ "M" // ✅ For Numeric Enums enum NumericEnum { Small, Medium, Large, } const s1 = NumericEnum[0]; console.log(s1); // 👉️ Small const m1 = NumericEnum[1]; console.log(m1); // 👉️ Medium

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

The Object.keys() method returns an array containing the keys of the enum and the Object.values() method - an array containing the enum's values.

index.ts
// ✅ For STRING Enums enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } console.log(Object.keys(Sizes)); // 👉️ ['Small', 'Medium', 'Large'] console.log(Object.values(Sizes)); // 👉️ ['S', 'M', 'L']

Now we can use an index to access the specific key or value of the enum.

When used with numeric enums, the Object.keys() and Object.values() methods return an array containing both the enum's keys and values, so if you need just one or the other, you need to filter out the unnecessary values.

index.ts
// ✅ For Numeric Enums enum NumericEnum { Small, Medium, Large, } const names = Object.keys(NumericEnum).filter((v) => isNaN(Number(v))); console.log(names); // 👉️ ['Small', 'Medium', 'Large'] const values = Object.values(NumericEnum).filter((v) => !isNaN(Number(v))); console.log(values); // 👉️ [0, 1, 2]

However, when working with numeric enums, you can use reverse mappings to get an enum's key by its value.

index.ts
// ✅ For Numeric Enums enum NumericEnum { Small, Medium, Large, } const s1 = NumericEnum[0]; console.log(s1); // 👉️ "Small" const m1 = NumericEnum[1]; console.log(m1); // 👉️ "Medium"

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.

If your numeric enums have a different initial value than 0, you can pass the enum to the Object.values() method and access the specific index.

index.ts
enum NumericEnum { Small = 1, Medium, Large, } const s1 = Object.values(NumericEnum)[0]; console.log(s1); // 👉️ "Small" const m1 = Object.values(NumericEnum)[1]; console.log(m1); // 👉️ "Medium"

Even though the enum in the example has an initial value of 1, we are able to access the pair at index 0 by using the Object.values() method.

index.ts
enum NumericEnum { Small = 1, Medium, Large, } // 👇️ ['Small', 'Medium', 'Large', 1, 2, 3] console.log(Object.values(NumericEnum));

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.