Sponsored

How to Transform Enum Values and Keys into Array Typescript

Jasser Mark Arioste

Jasser Mark Arioste

How to Transform Enum Values and Keys into Array Typescript

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.

Sponsored

Tutorial Objectives#

  1. Learn what are enums
  2. How to define enums
  3. Get all values of enums as an array using the Object.values() method.
  4. Get all keys of enums as an array using the Object.keys() method.
  5. Transform an enum into an array of objects
Sponsored

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.

Sponsored

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) // 1

12345678

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) // 1001
12345678

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) // online
12345678

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.

Sponsored

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
Sponsored

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
Sponsored

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!

Sponsored

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.

Sponsored

Resources#

Credits: Image by StockSnap from Pixabay

Share this post!

Related Posts

Sponsored

Subscribe to our newsletter

Get up-to-date on latest articles on react.js, node.js, graphql, full-stack web development. No Spam. Helpful articles to improve your skills. Sent directly to your inbox.