How to convert an enum to string or number in Typescript

Convert an Enum to String or Number in TypeScript

To convert an enum to a string or number in Typescript, you can access directly by name or get an array of values by object method and then convert it to a string. So how to do it? Let’s go into detail.

Convert an enum to string or number in TypeScript

Access through name

You can access the name directly by using dot notation and then calling that name.

Example:

enum hobbyList {
    hobby1 = "Reading",
    hobby2 = " Jewelry Making",
    hooby3 = "Woodworking",
    hooby4 = "Gardening",
    hobby5 = "Video Games",
}

const readingHobby = hobbyList.hobby1;
console.log(readingHobby);
console.log(typeof readingHobby);

Output:

[LOG]: "Reading"
[LOG]: "string"

Or you can also access values through a square bracket.

Example:

enum hobbyList {
    hobby1 = "Reading",
    hobby2 = " Jewelry Making",
    hooby3 = "Woodworking",
    hooby4 = "Gardening",
    hobby5 = "Video Games",
}

const readingHobby = hobbyList.hobby1;
console.log(readingHobby);
console.log(typeof readingHobby);

Output:

[LOG]: "Reading"
[LOG]: "string" 

Using Object method

Because behind the scene, an enum is an object, I can also use an Object method like values to get an array of values in enum.

Example:

enum hobbyList {
    hobby1 = "Reading",
    hobby2 = " Jewelry Making",
    hooby3 = "Woodworking",
    hooby4 = "Gardening",
    hobby5 = "Video Games",
}

// Get values array
const valuesArr = Object.values(hobbyList);
console.log(valuesArr);

// Working with values array
for (let hobby of valuesArr) {
    console.log(hobby);
}

// Type of element in values array
console.log(typeof valuesArr[0]);

Output:

[LOG]: ["Reading", " Jewelry Making", "Woodworking", "Gardening", "Video Games"] 
[LOG]: "Reading" 
[LOG]: " Jewelry Making" 
[LOG]: "Woodworking" 
[LOG]: "Gardening" 
[LOG]: "Video Games" 
[LOG]: "string" 

Or you can use the Object.keys method if you want to get an array of keys in your Enum.

Example:

enum hobbyList {
    hobby1 = "Reading",
    hobby2 = " Jewelry Making",
    hooby3 = "Woodworking",
    hooby4 = "Gardening",
    hobby5 = "Video Games",
}
// Get keys array
const keysArr = Object.keys(hobbyList);
console.log(keysArr);

// Working with keys array
for (let element of keysArr) {
  	console.log(element);
}

// Type of element in keys array
console.log(typeof keysArr[0]);

Output:

[LOG]: ["hobby1", "hobby2", "hooby3", "hooby4", "hobby5"] 
[LOG]: "hobby1" 
[LOG]: "hobby2" 
[LOG]: "hooby3" 
[LOG]: "hooby4" 
[LOG]: "hobby5" 
[LOG]: "string"

If you want to get number array which stands for the index in the Enum you will need to make your Enum become numeric Enum by not pass in values.

Example:

enum hobbyList {
    Reading,
    JewelryMaking,
    Woodworking,
    Gardening,
    VideoGames,
}

// Get values array
const valuesArr = Object.values(hobbyList);
console.log(valuesArr);

// Working with values array
for (let element of valuesArr) {
  	console.log(element);
}

// Type of element in values array
console.log(typeof valuesArr[0]);

Output:

[LOG]: ["Reading", "JewelryMaking", "Woodworking", "Gardening", "VideoGames", 0, 1, 2, 3, 4] 
[LOG]: "Reading" 
[LOG]: "JewelryMaking" 
[LOG]: "Woodworking" 
[LOG]: "Gardening" 
[LOG]: "VideoGames" 
[LOG]: 0 
[LOG]: 1 
[LOG]: 2 
[LOG]: 3 
[LOG]: 4 
[LOG]: "string" 

Here you will get an array that also contains index and values array.

If you want to get only index values, you will need to make some methods to check the condition.

Example:

enum hobbyList {
    Reading,
    JewelryMaking,
    Woodworking,
    Gardening,
    VideoGames,
}

// Get values array
const valuesArr = Object.values(hobbyList);

// Working with values array
for (let element of valuesArr) {
    // Check the condition
    if (typeof element == "number") {
        console.log(element);
    }
}

Output:

[LOG]: 0
[LOG]: 1
[LOG]: 2
[LOG]: 3
[LOG]: 4

There are many Object methods that you can use. You can read more about it here.

Summary

In this article, I showed you how to convert an enum to string or number in Typescript. You should use Object.values method to get a values array. It will make working with values in Enum easier.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *