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

Storing Json data in a variable within Angular 2: a step-by-step guide

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

Is there a way to expand the return type of a parent class's methods using an object

Issues with Vite's global import feature not functioning properly in a production build

Only JSON objects with a boolean value of true will be returned

A secure way to perform a deep update on any type, even if it is completely different from the original

Why does React / NextJS throw a "Cannot read properties of null" error?

Can you provide details on the capabilities of Appium for webviews on Android devices?

Refreshing a page with a 404 error in Angular 2 while in production mode and without the useHash configuration

Semantic-ui-react cannot be located by Docker

Error message: The property 'data' is not recognized within this context. Additionally, the property 'datatime' does not exist on the current type

Decode Jackson - a process to extract and translate multiple base enums from

Using variables to replace 'placeholders' in Typescript with string interpolation

Managing Events in Angular 2 and Creating Custom Event Handlers

How to extract multiple literals from a string using Typescript

Navigating through JSON object using Angular 2's ngFor iterator

Sorting array of arrays in TypeScript and Node.js involves defining the arrays and then applying a sorting algorithm

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

Combining Layouts and Providers: A Guide to Using Both on a Single Page

What is the process for running a continuous stream listener in a node.js function?