I have some enums in my Typescript application and I use code similar to this to get the string value to display in the application:

enum Color{ RED, BLUE, GREEN};

document.write( "The string for Red is: " + Color[Color.RED] );

However, the string value is usually more along the lines of a database key or some other server related string rather than a nicely formatted string fit for display to the user. To get round this I want to load localised property files that use the string value of an enum to look up a nicely formatted string to display in the application. The file might look like this:

Color.properties:
RED=The color is red
BLUE=The color is blue
GREEN=The color is green

I am confident that I can load this file and parse the contents to populate some lookup for later display in the application but I am not sure about how to know which property file to load. For the following enums

Color
Shape
Animal

I will have the following property files:

Color.properties
Shape.properties
Animal.properties

My question is: Is there any way of getting the string "Color" from the run time javascript definition of Color? The Typescript code for Color gets transpiled into:

var Color;
(function (Color) {
    Color[Color["RED"] = 0] = "RED";
    Color[Color["BLUE"] = 1] = "BLUE";
    Color[Color["GREEN"] = 2] = "GREEN";
})(Color || (Color = {}));

I don't think that I can get the String Color out of that in any easy way. I assume that I am just going to have to use switch expression to lookup the name of the file.

I have some enums in my Typescript application and I use code similar to this to get the string value to display in the application:

enum Color{ RED, BLUE, GREEN};

document.write( "The string for Red is: " + Color[Color.RED] );

However, the string value is usually more along the lines of a database key or some other server related string rather than a nicely formatted string fit for display to the user. To get round this I want to load localised property files that use the string value of an enum to look up a nicely formatted string to display in the application. The file might look like this:

Color.properties:
RED=The color is red
BLUE=The color is blue
GREEN=The color is green

I am confident that I can load this file and parse the contents to populate some lookup for later display in the application but I am not sure about how to know which property file to load. For the following enums

Color
Shape
Animal

I will have the following property files:

Color.properties
Shape.properties
Animal.properties

My question is: Is there any way of getting the string "Color" from the run time javascript definition of Color? The Typescript code for Color gets transpiled into:

var Color;
(function (Color) {
    Color[Color["RED"] = 0] = "RED";
    Color[Color["BLUE"] = 1] = "BLUE";
    Color[Color["GREEN"] = 2] = "GREEN";
})(Color || (Color = {}));

I don't think that I can get the String Color out of that in any easy way. I assume that I am just going to have to use switch expression to lookup the name of the file.

• javascript
• typescript

2 Answers 2

Nope, there's nothing built into the language that allows you to get the name of an enum at runtime.

However, I used the following method to do it:

namespace MyEnums {

    export enum Color { RED, BLUE, GREEN };

    export enum Shape { ROUND, SQUARE };

    export function getName(enumObj: any): string {

        for (let name in MyEnums) {
            if ( MyEnums[name] === enumObj && MyEnums.hasOwnProperty(name) ) {
                return name;
            }
        }

        return undefined;
    }
}

const Color = MyEnums.Color;

var name = MyEnums.getName(Color);

Although, I ended up refactoring my code so I wouldn't need to get the names in the end.

It might be easier to make the file you store your strings in a TypeScript file and then use the actual enum—Color—to do the mapping.

With that said...

Is there any way of getting the string "Color" from the run time javascript definition of Color?

A reliable solution is to use something like ts-nameof.

Alternatively, you can use a similar trick that's outlined in this answer:

function getVariableName(variableFunction: () => any) {
    return /\s([^\s;]+);?\s*\}$/.exec(variableFunction.toString())[1];
}

var variableName = getVariableName(() => Color); // returns string "Color"

This wraps Color in a function then calls .toString() on that function. Using that string it will extract out only the name provided.

Just make sure you test to see if this works after being minified.