如何使用打字稿通过名称将枚举作为变量引用

Question

For example I want to extract an object array from an Enum definition.

Object.keys(HelloWorldEnum).map(el => {
  return {
    label: HelloWorldEnum[el],
    value: el
  };
});


enum HelloWorldEnum {
  option1 = 'Option1',
  option2 = 'Option2',
  option3 = 'Option3'
}

Now, how I can do with a function that passing 'HelloWorld' as a variable, below is not work:

getOptions(str) {
    return Object.keys([str + 'Enum']).map(el => {
      return {
        label: [str + 'Enum'][el],
        value: el
      };
    });
  }

Even I changed to window[str + 'Enum'] , or this[str + 'Enum'] that it won't works since the Enum definition is not existing in neither window nor this namespace

Assume the above code is in any of an Angular Component

Answer 1

Typescript will ultimately transpile your enum definition to something that looks like:

var HelloWorldEnum = {};
HelloWorldEnum["option1"] = "Option1";
HelloWorldEnum["option2"] = "Option2";
HelloWorldEnum["option3"] = "Option3";

As you can see. It's just a variable name in local scope. It's not added to the global window object or any other object.

There is only one way to access a variable by it's name in javascript and it's not recommended... and that's by using eval() which is considered a dangerous api which can cause performance issues in your javascript engine just by using it.

Warnings aside. Here is how one might do what you ask.

 var HelloWorldEnum = {}; HelloWorldEnum["option1"] = "Option1"; HelloWorldEnum["option2"] = "Option2"; HelloWorldEnum["option3"] = "Option3"; function getVariableFromScope(variable) { return eval(variable); } function getOptions(name) { const _enum = getVariableFromScope(`${name}Enum`); return Object.keys(_enum).map(el => ({ label: _enum[el], value: el })); }; console.log(getOptions('HelloWorld')); 

Ultimately, I think you should explore other ways of solving the underlying issue.