property forEach does not exist on type NodeListOf

Question

Angular 2.4.4, TypeScript 2.1.5, PhpStorm 2017.2.1 I write 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 "property forEach does not exist on type NodeListOf" But when I ctrl+click the forEach it gets me to lib.es6.d.ts where forEach is declared for interface NodeListOf<TNode extends Node>

Why it won't let me use it? What is 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" to tsconfig.json, so that it looks somewhat like this:

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