Loop through a TypeScript enum
Discover how to iterate over the keys and values of a TypeScript enum
Enums are awesome. Let’s learn about a cool trick today.
Enums are cool, but string enums are even better. I’m using those quite a lot in my projects because they allow to write clear & readable code.
In this article, I’ll show you how to iterate over the keys & values of a string enum in TypeScript.
Example
Let’s assume that we have the following string enum:
This is a basic enum that represents the possible states of some action (welcome back to the Todo app wonderland!).
Iterating over the values
In order to iterate over the values of this enum, we can use the Object.values() built-in function, which returns an array whose elements are the enumerable property values found on the object.
Note that, as stated in the MDN documentation, the order is the same as that given by looping over the property values of the object manually.
Here I’ve used the functional style, but you can also use a for..of loop, which is more efficient:
With both, you should get the following:
console.log src/database/services/database.service.spec.ts:207
To do
console.log src/database/services/database.service.spec.ts:207
In progress
console.log src/database/services/database.service.spec.ts:207
Done
Neat!
String enums are great because they are easy to refactor and easily “findable” in the code base. This is why I usually prefer string enums over string unions. Although, as pointed out by Frédéric Camblor, it all depends on what you need to be able to do; if you want to iterate over the values at runtime then prefer enums; if you want to iterate over the values at compile time only, then you can use unions strings with mapped types.
Iterating over the keys
Of course, it’s also possible to loop over the keys of a string enum, using Object.keys().
References
Here are a few references about this:
- https://github.com/Microsoft/TypeScript/issues/20813
- https://github.com/microsoft/TypeScript/issues/4753
- https://stackoverflow.com/questions/39372804/typescript-how-to-loop-through-enum-values-for-display-in-radio-buttons
Conclusion
In this small article, I’ve shown you how to easily loop over keys and values of your string enums in TypeScript.
As I’ve explained in my book, string enums are really useful for many use cases. I wish there were as powerful as Java/Kotlin enums, but maybe that’ll come later… ;-)
That's it for today! ✨
Go Further
Sébastien Dubois
Sébastien Dubois
Sébastien Dubois
Want to go deeper?
Sébastien Dubois
About Sébastien
I'm Sébastien Dubois, and I'm on a mission to help knowledge workers escape information overload. After 20+ years in IT and seeing too many brilliant minds drowning in digital chaos, I've decided to help people build systems that actually work. Through the Knowii Community, my courses, products & services and my Website/Newsletter, I share practical and battle-tested systems.
I write about Knowledge Work, Personal Knowledge Management, Note-taking, Lifelong Learning, Personal Organization, Productivity, and more. I also craft lovely digital products and tools.
If you want to follow my work, then become a member and join our community.
Ready to get to the next level?
Want to level up as a developer?
- 📖 Dev Concepts — 12 volumes covering IT & software development from scratch
- 💼 Knowledge Worker Kit — Productivity guides for knowledge workers
- 🚀 Obsidian Starter Kit — Organize your dev knowledge
- 🎯 Join Knowii — Community + ALL courses & tools
Found this valuable? Share it with someone who needs it.