CODEWITHSUNDEEP
angulartypescript
Gherman
Gherman

Reputation: 7426

property forEach does not exist on type NodeListOf

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?

Upvotes: 62

Views: 67229

Answers (5)

M C
M C

Reputation: 256

Have you tried to cast your document.querySelectorAll('path.frame-zone'); with NodeListOf<HTMLDivElement> ?

Upvotes: -1

Buksy
Buksy

Reputation: 12228

You can cast it to let compiler know it can be iterated:

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

Upvotes: 15

tibalt
tibalt

Reputation: 16164

Just add "dom.iterable" to tsconfig.json, so that it looks somewhat like this:

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

Upvotes: 39

Derek
Derek

Reputation: 4751

You need to convert it to an array:

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

Upvotes: 120

Mars
Mars

Reputation: 159

try to cast it:

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

ah typescript maybe like this: 

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

Upvotes: -3

Related Questions