遍历枚举、TypeScript 和 JQuery

Posted 2023-02-22

【中文标题】遍历枚举、TypeScript 和 JQuery

【英文标题】：Looping through an enum, TypeScript and JQuery

【发布时间】：2015-08-19 15:41:25

【问题描述】：

您好，我正在尝试使用 TypeScript 和 JQuery 开发一个直接的待办事项应用程序。我有一个列出任务类型的枚举：

export enum TaskType  FrontEnd, BackEnd, Designer ;

但是使用 jquery.each 或 for 循环遍历 emum，我得到以下结果（值然后是索引）：

        FrontEnd, BackEnd, Designer, 0, 1, 2

以下是我遍历枚举的代码：

        constructor(e?: Object)              

            var template = this.FormTemplate;

            $(e).append(template);

            var sel = template.find('select');

            /*$.each(TaskType, function (index, el) 
                sel.append("<option value='" + index + "'>" + el + "</option>");
            );*/

            for(var i=0; i < (typeof TaskType).length; i++)
                sel.append("<option value='" + TaskType[i] + "'>" + TaskType[i] + "</option>");
            

        

谁能告诉我这是为什么？

【问题讨论】：

How does one get the names of TypeScript enum entries?的可能重复

【参考方案1】：

TypeScript 枚举在编译为纯 JS 时包含符号名称和数值作为属性，这解释了为什么在尝试枚举对象的属性时会得到 FrontEnd, BackEnd, Designer, 0, 1, 2。据我所知，没有编译后的方法来仅枚举符号名称。您可以枚举所有这些并跳过任何数字。

从this article，你可以看到 TypeScript 枚举是如何编译成 JS 的。

如果你有这个 TypeScript：

//TypeScript declaration:
enum StandardEnum FirstItem, SecondItem, ThirdItem;

它编译成这个 Javscript：

//Compiled javascript:
var StandardEnum;
(function (StandardEnum) 
    StandardEnum[StandardEnum["FirstItem"] = 0] = "FirstItem";
    StandardEnum[StandardEnum["SecondItem"] = 1] = "SecondItem";
    StandardEnum[StandardEnum["ThirdItem"] = 2] = "ThirdItem";
)(StandardEnum || (StandardEnum = ));
;

本质上是这样的结果：

var StandardEnum = 
    "FirstItem": 0,
    "SecondItem": 1,
    "ThirdItem": 2,
    "0": "FirstItem",
    "1": "SecondItem",
    "2": "ThirdItem"
;

因此，除非您特别忽略数字属性，否则无法仅枚举枚举名称。

你可以这样做：

 for (var item in StandardEnum) 
     if (StandardEnum.hasOwnProperty(item) && !/^\d+$/.test(item)) 
         console.log(item);
     
 

工作演示：http://jsfiddle.net/jfriend00/65cfg88u/

---

仅供参考，如果您真正想要的是：

var StandardEnum = 
    "FirstItem": 0,
    "SecondItem": 1,
    "ThirdItem": 2
;

那么，也许你不应该使用枚举，而只使用这个标准的 JS 声明。然后，您可以使用Object.keys(StandardEnum) 获取属性。

【讨论】：

感谢您的解释，但是将其作为 key:value 对象返回是否有意义？，这是一个很大的失望，无论如何我最终使用了：if(TaskType[i] != = undefined) 在 for 循环中，因为它返回值然后是未定义的值。

@meji - 你可以返回任何你想要的东西 - 我只是向你展示了如何只识别命名的属性。仅供参考，也许你应该只定义一个带有属性的 JS 对象，而不是枚举，如果这是你想要的。

这也适用于 typescript@2 吗？

@k0pernikus - 我没有任何理由相信它在 TS2.0 中发生了变化，但在这方面没有明确检查 TS2.0 输出。

@mightyiam - 这可能适用于这种特定情况，但由于特殊情况，它可能取决于枚举值是什么。我不喜欢依赖自动类型强制，isNan() 的强制规则相当复杂 see here。