web-dev-qa-db-ja.com

列挙型、TypeScript、JQueryをループする

こんにちは、TypeScriptとJQueryを使用して簡単なtodoアプリを開発しようとしています。タスクタイプを一覧表示する列挙型があります。

export enum TaskType { FrontEnd, BackEnd, Designer };

ただし、jquery.eachまたはforループを使用してエマムをループすると、次の結果が得られます(値、次にインデックス)。

        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>");
            }

        }

誰かがこれがなぜであるか教えてもらえますか?

8
meji

プレーンJSにコンパイルされたときのTypeScript列挙型には、プロパティとして記号名と数値の両方が含まれているため、オブジェクトのプロパティを列挙しようとすると_FrontEnd, BackEnd, Designer, 0, 1, 2_が表示されます。私が知っている限りでは、シンボリック名のみを列挙するコンパイル後の方法はありません。それらすべてを列挙して、数字であるものはすべてスキップすることができます。

この記事 から、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)を使用してプロパティを取得できます。

20
jfriend00