How to compare Enums in Typescript

avatar

Borislav Hadzhiev

Last updated: Feb 13, 2022

banner

Photo from Unsplash

Compare Enums in Typescript #

To compare enums, use dot notation to get the value for a specific enum property and compare it to another value, e.g. if (MyEnum.Small < 2) {}. The values for numeric enums, without provided initial value, are auto-incrementing integers, starting at 0.

index.tsx
enum ShirtSizes { Small, Medium, Large, } const small = ShirtSizes.Small; // 👉️ 0 const medium = ShirtSizes.Medium; // 👉️ 1 if (small < medium) { console.log('✅ This runs'); } if (small === 0) { console.log('✅ This runs'); } const enumKey = ShirtSizes[ShirtSizes.Small]; console.log(enumKey); // 👉️ "Small" if (enumKey === 'Small') { console.log('✅ This runs'); }

You can access specific values on an enum by using dot notation.

To compare the value against another, use one of the comparison operators, e.g. < (less than) > (greater than) or === (equals).

The if block is only ran if the condition is met.

The example shows a numeric enum, for which we haven't specified initial value for the value for the Small key is 0, Medium = 1 and Large = 2.

When using numeric enums, you can use reverse mappings to get the corresponding key based on a value.

index.tsx
enum ShirtSizes { Small, Medium, Large, } const small = ShirtSizes.Small; // 👉️ 0 const medium = ShirtSizes.Medium; // 👉️ 1 const enumKey = ShirtSizes[ShirtSizes.Small]; console.log(enumKey); // 👉️ "Small" const eKey = ShirtSizes[0]; console.log(eKey); // 👉️ Small

The examples above use reverse mappings to get the enum key, which corresponds to the value 0.

Note that you can only use reverse mappings when working with numeric enums, because they aren't generated for string enums.

Here is an example of how to get an array of the keys and values of a string enum and check if a specific value is contained in the arrays.

index.js
enum ShirtSizes { Small = 'SMALL', Medium = 'MEDIUM', Large = 'LARGE', } const keys = Object.keys(ShirtSizes); console.log(keys); // 👉️ ['Small', 'Medium', 'Large'] if (keys.includes('Small')) { console.log('✅ This runs'); } const values = Object.values(ShirtSizes); console.log(values); if (values.includes('SMALL' as unknown as ShirtSizes)) { console.log('✅ This runs'); }

Enums in TypeScript are real objects, so we are able to use the Object.keys() and Object.values() methods to get an array of the enum keys and values.

The examples used the includes() method to check if a specific value is contained in the keys and values of the enum, but you could adjust this according to your use case.

If working with numeric enums, the Object.keys() method returns an array containing the enum's keys and values, so you have to filter out the unnecessary values.

index.tsx
enum ShirtSizes { Small, Medium, Large, } const keys = Object.keys(ShirtSizes).filter((v) => isNaN(Number(v))); console.log(keys); // 👉️ ['Small', 'Medium', 'Large'] if (keys.includes('Small')) { console.log('✅ This runs'); } const values = Object.values(ShirtSizes).filter((v) => !isNaN(Number(v))); console.log(values); // 👉️ [0, 1, 2]

The concept with numeric enums is the same, however we had to add a call to the filter method to exclude the unnecessary values from the returned array.

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.