Obtain the Enum's Name in TypeScript as a String

Question

Obtain the Enum's Name in TypeScript as a String

I am currently looking for a solution to transform the name of an enum into a string format. Suppose I have the following Response enum, how can I obtain or convert 'Response' into a string? One of my functions accepts any enum as input and requires the name, rather than the type of enum, in order to execute further code.

enum Response 
{
    No = 0,
    Yes = 1
}

typescript enums

Answer 1

Answer №1

Unfortunately, it is not possible to convert an enum name to a string directly because the type information is only stored during compilation. To work around this limitation, you need to pass additional parameters that specify which enum you are using.

However, you can use square brackets to convert numeric enum values to strings and vice versa:

Check out this Fiddle for more

enum YesNo {
    No = 0,
    Yes = 1, 
}

console.log(YesNo[YesNo.Yes]);
console.log(YesNo[YesNo.No]);
console.log(YesNo["Yes"]);
console.log(YesNo["No"]);
console.log(YesNo[1]);
console.log(YesNo[0]);

The resulting code after compilation looks like this:

var YesNo;
(function (YesNo) {
YesNo[YesNo["No"] = 0] = "No";
YesNo[YesNo["Yes"]
})(YesNo || (YesNo = {}));
console.log(YesNo[YesNo.Yes]);
console.log(YesNo[YesNo.No]);
console.log(YesNo["Yes"]);
console.log(YesNo["No"]);
console.log(YesNo[1]);
console.log(YesNo[0]);

Answer 2

Unfortunately, it is not possible to convert an enum name to a string directly because the type information is only stored during compilation. To work around this limitation, you need to pass additional parameters that specify which enum you are using.

However, you can use square brackets to convert numeric enum values to strings and vice versa:

Check out this Fiddle for more

enum YesNo {
    No = 0,
    Yes = 1, 
}

console.log(YesNo[YesNo.Yes]);
console.log(YesNo[YesNo.No]);
console.log(YesNo["Yes"]);
console.log(YesNo["No"]);
console.log(YesNo[1]);
console.log(YesNo[0]);

The resulting code after compilation looks like this:

var YesNo;
(function (YesNo) {
YesNo[YesNo["No"] = 0] = "No";
YesNo[YesNo["Yes"]
})(YesNo || (YesNo = {}));
console.log(YesNo[YesNo.Yes]);
console.log(YesNo[YesNo.No]);
console.log(YesNo["Yes"]);
console.log(YesNo["No"]);
console.log(YesNo[1]);
console.log(YesNo[0]);

Answer 3

Answer №2

Get the first key of an object named Response: Object.keys({ Response })[0]; // 'Response'

Answer 4

Get the first key of an object named Response: Object.keys({ Response })[0]; // 'Response'

Answer 5

Answer №3

Maybe we could try this:

EnumType[EnumValue.option1]

Answer 6

Maybe we could try this:

EnumType[EnumValue.option1]

Answer 7

Answer №4

The answer given by @Tukkan was correct, but it lacked the specificity needed. Below is a functional code snippet that directly addresses the original poster's question.

enum Options {
    yes,
    no
}
type EnumType = Record<string, any>
function showEnumName(theEnum: EnumType) {
    const enumName = Object.keys(theEnum)[0] ?? ''
    console.log(enumName)
}
showEnumName({ Options })

Playground Link

Some Important Notes:

The function receives the enum object as a parameter and extracts its name. This contrasts with Tukkan's approach which requires direct access to the literal enum object - something not always feasible for users like the OP.
~~The indexing [0] may be omitted.~~ Correction: This behavior depends on the tsconfig setting. I adapted it here to avoid compile-time warnings, though this might not be universally recommended.
Properly typing the object passed to the function is crucial to prevent compile-time errors. Using 'any' may introduce vulnerabilities, so ensure the object strictly adheres to enum structure.
If you alter the function to align with Tukkan’s method, the outcome differs as demonstrated here:

function showEnumName(theEnum) {
    const enumName = Object.keys({ theEnum })
    console.log(enumName)
}
showEnumName({ Options })

In this scenario, instead of "Options", the output reads "theEnum". As pointed out by Tukkan, this reveals the variable name holding the data rather than the desired enum name.

If you find this response helpful, kindly upvote @Tukkan's answer as well to credit his contribution. This solution was built upon his insights, and recognition should be shared.

Answer 8

The answer given by @Tukkan was correct, but it lacked the specificity needed. Below is a functional code snippet that directly addresses the original poster's question.

enum Options {
    yes,
    no
}
type EnumType = Record<string, any>
function showEnumName(theEnum: EnumType) {
    const enumName = Object.keys(theEnum)[0] ?? ''
    console.log(enumName)
}
showEnumName({ Options })

Playground Link

Some Important Notes:

The function receives the enum object as a parameter and extracts its name. This contrasts with Tukkan's approach which requires direct access to the literal enum object - something not always feasible for users like the OP.
~~The indexing [0] may be omitted.~~ Correction: This behavior depends on the tsconfig setting. I adapted it here to avoid compile-time warnings, though this might not be universally recommended.
Properly typing the object passed to the function is crucial to prevent compile-time errors. Using 'any' may introduce vulnerabilities, so ensure the object strictly adheres to enum structure.
If you alter the function to align with Tukkan’s method, the outcome differs as demonstrated here:

function showEnumName(theEnum) {
    const enumName = Object.keys({ theEnum })
    console.log(enumName)
}
showEnumName({ Options })

In this scenario, instead of "Options", the output reads "theEnum". As pointed out by Tukkan, this reveals the variable name holding the data rather than the desired enum name.

If you find this response helpful, kindly upvote @Tukkan's answer as well to credit his contribution. This solution was built upon his insights, and recognition should be shared.

Obtain the Enum's Name in TypeScript as a String

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Sorting through a JavaScript array

Sending the id from a component to a service in Angular

Handling Click and Mouse Events with React [react-sortable-hoc, material-ui, react-virtualized]

Having trouble with the removeEventListener OnDestroy not functioning properly in Angular 6 using Javascript?

Exploring ways to interact with an API using arrays through interfaces in Angular CLI

Utilizing HTML and Ionic 3.x: Implementing a for loop within the HTML file by utilizing "in" instead of "of"

Challenges encountered when using promises for handling mysql query results

Can a mapped union type be created in TypeScript?

How can we define a function using a generic type in this scenario using Typescript?

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

Getting the item that was clicked on a Chart in a PrimeNG chart within an Angular application can be achieved by following these

having difficulty interpreting the information from angular's httpclient json request

Exploring the capabilities of SWR for updating data in Next JS

Transform the property of type any/unknown into a specific generic type T within the map

Array of options with specified data types in Props interface

Unable to access specific data from the JSON string retrieved from the backend, as it is returning a value of undefined

best typescript configuration for node 8 suggested

Retrieve the array from the response instead of the object

Customizing MUI Themes with TypeScript: How do I inform TypeScript that the theme is provided by the provider?

Creating an interface for writing types in Firebase functions/storage/database