The forEach property does not exist for type NodeListOf

Question

Angular 2.4.4, TypeScript 2.1.5, PhpStorm 2017.2.1 I am writing this code:

const list = document.querySelectorAll('path.frame-zone');
list.forEach(() => {

But the second line is underlined with a red line, and TsLint reports that "the forEach property does not exist in the NodeListOf type" But when I press Ctrl + click forEach, it returns me to lib.es6.d.tswhere it is forEachdeclared forinterface NodeListOf<TNode extends Node>

Why won't it let me use it? What's wrong?

Answer 1

You need to convert it to an array:

const frameZones = Array.from(document.querySelectorAll('path.frame-zone'));
frameZones.forEach((...) => {});

Answer 2

Just add "dom.iterable"in tsconfig.jsonto make it look something like this:

{
    "compilerOptions": {
        "lib": [
            "es6",
            "dom",
            "dom.iterable"
        ],
...

Answer 3

:

const list = (NodeListOf) document.querySelectorAll('path.frame-zone');

ah typescript :

const list = <NodeListOf> document.querySelectorAll('path.frame-zone');

Answer 4

You can bring it up so that the compiler knows that it can be repeated:

(document.querySelectorAll('path.frame-zone') as any as Array<HTMLElement>).forEach();