Top 8 functions you’ll ever need to work with Enums in TypeScript

Discover helper functions to simplify work with enums

Working on multiple projects built on TypeScript, I noticed a common functionality that I had to bring from project to project. Functions that were helping me work with enums on the previous project will be helpful on the new one. So decided to gather them together and share what I have with you guys.

In this article, we’ll go through my top 8 helper functions that I use all the time whenever working with the enums.

Topics to cover

1. Check if a key is property of enum
2. Check if enum has a given value
3. Transform enum to list of keys
4. Transform enum to list of values
5. Transform enum value to its appropriate key
6. Transform enum to entries
7. Create a function that transforms enum value into CSS class
8. Project the list of objects from an enum

Initial source code:

Initial code that we will use most of the time look in the following way:

1. Check if a key is property of enum

Problem:

We have an enum and want to check whether a given value is its enum key.

Solution:

2. Check if enum has a given value

Problem:

You have an enum, and you want to check whether a given value is a value of this enum.

Solution:

3. Transform enum to list of keys

Problem:

We want to pass an enum and get the list of its keys.

Solution:

An interesting article was written by Stefan Baumgartner called “TypeScript: Improving Object.keys”, where he explains how to improve the type of Object.keys() function. It can be found here: https://fettblog.eu/typescript-better-object-keys/ So you can make an existing function even better if you want with ObjectKeys<T> type.

4. Transform enum to list of values

Problem:

We want to pass an enum and get the list of its values.

Solution:

5. Transform enum value to its appropriate key

Problem:

We want to be able to pass an enum value and get its appropriate key. A returned type shouldn’t be a string but an enum key.

Solution:

6. Transform enum to entries

Problem:

An Object has a useful function called entries. We want a similar one for the enums. Whenever we pass an enum, we want to get the list of elements in format key-value.

Solution:

7. Create a function that transforms enum value into CSS class

Problem:

We want to have a function that takes an enum value and returns a DOM element class which consists of a prefix, enum key in kebab or snake case, and suffix.

Solution:

8. Project the list of objects from an enum

Problem:

We might have the options, radio buttons, checkboxes, etc., on the page. It would require transforming an enum to a list of objects with a label and value or any other object build in a key-value fashion.

Solution:

Further reading

If you’re interested in TypeScript, you might want to check these articles as well:

Top 5 techniques in TypeScript to bring your code to the next level.

TypeScript: Use polymorphism in place of the switch and other conditionals

Conclusion

I hope you found this article interesting and came across new techniques. Please feel free to reach out if you have any questions.

Hit the 👏👏👏 button and subscribe, which will motivate me to write more articles.