How to Transform Enum Values and Keys into Array Typescript
Jasser Mark Arioste
Hello! In this article, you'll learn how to get enum values and keys in typescript. I assume you already have a basic knowledge of Enums.
Tutorial Objectives#
- Learn what are enums
- How to define enums
- Get all values of enums as an array using the
Object.values()method. - Get all keys of enums as an array using the
Object.keys()method. - Transform an enum into an array of objects
What are enums in Typescript?#
Enums allow a developer to define a set of named constants which makes the code easier to read, and more maintainable. Using Status.Online or Status.Offline is more readable than using 1 or 0.
How to Define Enums?#
Enums can be defined in multiple ways but In my experience, the most common are using numeric enums and string enums.
For numeric enums, the first key has a value of 0 and it will increment the value for the subsequent keys.
// for numeric enum enum OnlineStatus { Offline, Online } console.log(OnlineStatus.Offline) // 0 console.log(OnlineStatus.Online) // 112345678
You can also define specific values like the example below:
// for numeric enum enum OnlineStatus { Offline=1000, Online=1001 } console.log(OnlineStatus.Offline) // 1000 console.log(OnlineStatus.Online) // 100112345678
For string enums, it's just the same as the previous example but you use strings as the values:
// for numeric enum enum OnlineStatus { Offline="offline", Online="online" } console.log(OnlineStatus.Offline) // offline console.log(OnlineStatus.Online) // online12345678
Usually, defining the enums like this will take care of 99% of use cases but you can check the documentation for more advanced ways to define enums.
How to Get Enum Values as an Array#
You can get the enum values by simply using the Object.values() method. For example:
// for numeric enum enum OnlineStatus { Offline="offline", Online="online" } const values = Object.values(OnlineStatus); console.log(values) // ["offline", "online"]12345678
This is possible because when an enum is converted to javascript, It will still be converted to an object.
// this enum enum OnlineStatus { Offline="offline", Online="online" } // will be converted to something like this in javascript: const OnlineStatus = { Offline: "offline", Online: "online" }12345678910
How to Get Enum Keys as an Array#
Similarly, you can get the Enum keys by using the Object.keys() method.
// for numeric enum enum OnlineStatus { Offline="offline", Online="online" } const keys = Object.keys(OnlineStatus); console.log(keys) // ["Offline", "Online"]12345678
Transform the whole enum as an array#
There might be some instances where you want to work with an array of objects instead of an enum. In this case, we can use Object.entries() and Array.prototyp.map() methods to transform an enum into the array that we want.
For example:
// for numeric enum enum OnlineStatus { Offline="offline", Online="online", } const array = Object.entries(OnlineStatus).map(entry => { const [key, value] = entry; // use array destructuring to get the key and value. return { key, value } }); console.log(array) //[{key: "OFFLINE", value: "offline"}, {key: "ONLINE", value: "online"}]1234567891011121314
Explanation:
In line 7, the Object.entries() method will transform the enum into an array of entries. An entry is a tuple, which is represented as an array as well. So the enum becomes like this:
[ ["OFFLINE", "offline"], ["ONLINE", "online"], ]1234
In line 8, we use array destructuring to get the key and the value while assigning them to a variable. We could have also done it like this but the one above is more concise:
const array = Object.entries(OnlineStatus).map(entry => { const key = entry[0]; const value = entry[1]; return { key, value } });12345678
That's basically it!
Conclusion#
You learned some basics about Enums in Typescript and learned how to get keys and values by using the Object.keys() and Object.values() methods. You also learned how to transform an enum into an array of objects.
If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on GitHub.
Resources#
Credits: Image by StockSnap from Pixabay
