property forEach does not exist on type NodeListOf

AngularTypescript

Angular Problem Overview

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?

Angular Solutions

Solution 1 - Angular

You need to convert it to an array:

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

Solution 2 - Angular

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

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

Solution 3 - Angular

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

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

Solution 4 - Angular

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');
Categories
Recommended Angular Solutions
Recommended Typescript Solutions

Previous Solution:

Apple Maps, Raster Overlays Above Labels - Failed to decode

IosIos11

Next Solution:

Java spread operator

Java

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGhermanView Question on Stackoverflow
Solution 1 - AngularDerekView Answer on Stackoverflow
Solution 2 - AngulartibaltView Answer on Stackoverflow
Solution 3 - AngularBuksyView Answer on Stackoverflow
Solution 4 - AngularMarsView Answer on Stackoverflow