javascript - NodeListOf üzerinde neden forEach mevcut değil

Benim kodum:

    var checkboxes = this.element.querySelectorAll("input[type=checkbox]") as NodeListOf<HTMLInputElement>;
    checkboxes.forEach(ele => {
        var key = ele.name;
        if (data.hasOwnProperty(key)) {
            if (!this.isArray(data[key])) {
                var temp = data[key];
                data[key] = [temp];
            }
        } else {
            data[key] = [];
        }
    });

Ama bir hata aldım:

hata TS2339: 'forEach' özelliği 'NodeListOf' türünde mevcut değil.

interface NodeListOf<TNode extends Node> extends NodeList {
    length: number;
    item(index: number): TNode;
    [index: number]: TNode;
}

interface NodeList {
    /**
     * Returns an array of key, value pairs for every entry in the list
     */
    entries(): IterableIterator<[number, Node]>;
    /**
     * Performs the specified action for each node in an list.
     * @param callbackfn  A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the list.
     * @param thisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
     */
    forEach(callbackfn: (value: Node, index: number, listObj: NodeList) => void, thisArg?: any): void;
    /**
     * Returns an list of keys in the list
     */
    keys(): IterableIterator<number>;

    /**
     * Returns an list of values in the list
     */
    values(): IterableIterator<Node>;


    [Symbol.iterator](): IterableIterator<Node>;
}

'NodeListOf', 'NodeList'ten miras alır ve 'NodeList'in 'forEach' metodu vardır, peki neden 'forEach', 'NodeListOf'da yok?

Cevap #1

Bu türde forEach'in var olacağına dair bir garanti yok - olabilir, ama zorunlu değil (ör. PhantomJS ve IE'de), bu yüzden TypeScript varsayılan olarak buna izin vermez. Üzerinde döngü yapmak için şunu kullanabilirsiniz:

1) Array.from():

Array.from(checkboxes).forEach((el) => { /* do something */});

2) for-in:

for (let i in checkboxes) {
  if (checkboxes.hasOwnProperty(i)) {
    console.log(checkboxes[i]);
  }
}

Cevap #2

Dürüst olmak gerekirse, typescript’in nodelist.forEach hakkında şikayet etmemesi için bir NodeListOf’u bir diziye dönüştürebilirsiniz, ancak bu sadece gereksiz kod ekleyerek problemi çözmek olur. Typescript’e yerleşik nodelist.forEach sözdizimini anlamasını, tsconfig.json dosyanıza dom.iterable kütüphanesini ekleyerek söyleyebilirsiniz. İşte benim tsconfig.json dosyalarımdan bir örnek.

{
  "compilerOptions": {
  "outDir": "./public/js/",
  "noImplicitAny": true,
  "module": "es6",
  "target": "es5",
  "allowJs": true,
  "moduleResolution": "node",
  "rootDir": "src",
  "lib": [
    "es6",
    "dom",
    "dom.iterable"
  ],
  "typeRoots": [
    "node_modules/@types"
  ],
  "removeComments": false
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "public",
    "**/*.spec.ts"
  ]
}

Tüm tarayıcılar nodelist.forEach'i desteklemiyor, bu yüzden kesinlikle polyfill yapardım https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

İlgili makaleler