遍历枚举，TypeScript和JQuery [英] Looping through an enum, TypeScript and JQuery

问题描述

你好，我试图用一个简单的前进的应用程序使用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 +对于（var i = 0; i<（typeof TaskType）.length; i ++）{
 
 
 
 $ sel.append（< option value ='+ TaskType [i] +'>+ TaskType [i] +< / option>）; 
} 
 
} 
  
有人可以告诉我为什么这是？
解决方案
当编译成plain JS时，TypeScript枚举包含符号名称和数值作为属性，并解释为什么你得到当您尝试枚举对象的属性时， FrontEnd，BackEnd，Designer，0，1，2 最好我知道，没有后编译的方式来枚举只有符号的名字。您可以枚举所有这些，并跳过任何数字。
 
 
 
从本文，您可以看到一个TypeScript枚举如何编译成JS。
 
 
 
如果你有这个TypeScript：
  // TypeScript声明：
枚举StandardEnum {FirstItem，SecondItem，ThirdItem}; 
  
它编译到这个Javscript：
  //编译的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）获取属性。
 
Hello im trying t develop a straight forward todo app using TypeScript and JQuery. I have an enum that lists task types: 
export enum TaskType { FrontEnd, BackEnd, Designer };
However looping through the emum using jquery.each or for loop, i get the following result, (values then indexes):
        FrontEnd, BackEnd, Designer, 0, 1, 2
The following is the code i loop through the enum:
        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>");
            }

        }
Can someone tell me why this is?
解决方案
TypeScript enums when compiled into plain JS contain both the symbolic name AND the numeric values as properties and that explains why you get FrontEnd, BackEnd, Designer, 0, 1, 2 when you try to enumerate the properties of the object.  As best I know, there is no post-compile way to enumerate only the symbolic names.  You could enumerate all of them and skip anything that is a number.

From this article, you can see exactly how a TypeScript enum compiles into JS.

If you have this TypeScript:
//TypeScript declaration:
enum StandardEnum {FirstItem, SecondItem, ThirdItem};
It compiles to this Javscript:
//Compiled javascript:
var StandardEnum;
(function (StandardEnum) {
    StandardEnum[StandardEnum["FirstItem"] = 0] = "FirstItem";
    StandardEnum[StandardEnum["SecondItem"] = 1] = "SecondItem";
    StandardEnum[StandardEnum["ThirdItem"] = 2] = "ThirdItem";
})(StandardEnum || (StandardEnum = {}));
;
Which is essentially this result:
var StandardEnum = {
    "FirstItem": 0,
    "SecondItem": 1,
    "ThirdItem": 2,
    "0": "FirstItem",
    "1": "SecondItem",
    "2": "ThirdItem"
};
So, unless you specifically ignore the numeric properties, there is no way to enumerate just the enum names.

You could do that like this:
 for (var item in StandardEnum) {
     if (StandardEnum.hasOwnProperty(item) && !/^\d+$/.test(item)) {
         console.log(item);
     }
 }
Working demo: http://jsfiddle.net/jfriend00/65cfg88u/



FYI, if what you really want is:
var StandardEnum = {
    "FirstItem": 0,
    "SecondItem": 1,
    "ThirdItem": 2
};
Then, maybe you should not use the enum and just use this standard JS declaration.  Then, you could get the properties with Object.keys(StandardEnum).

                        
这篇关于遍历枚举，TypeScript和JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！