60

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?

7
  • What lib are you using? is it es6 or are you using an older version? Sep 21, 2017 at 16:50
  • What is lib in this context? I am maintaining an old project by another team. Maybe something is misconfigured but don't know where to look.
    – Gherman
    Sep 21, 2017 at 16:55
  • in your tsconfig.json. What lib is your project using? Sep 21, 2017 at 16:56
  • It's ['dom', 'es6']
    – Gherman
    Sep 21, 2017 at 16:58
  • Okay I thought you might have had a mismatch/ been using an older version but looks like no. Sorry. Sep 21, 2017 at 16:59

5 Answers 5

116

You need to convert it to an array:

const frameZones = Array.from(document.querySelectorAll('path.frame-zone'));
frameZones.forEach((...) => {});
2
  • Correct or not, at least in actually helps. I am not sure. The question in actuality remains open. Why does PhpStorm claim it has this method?
    – Gherman
    Sep 21, 2017 at 17:05
  • 3
    Actually, with ES6 you can approach this even more easily: const frameZones = [...document.querySelectorAll('path.frame-zone')]; Cheers! Feb 9, 2020 at 8:51
39

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

{
    "compilerOptions": {
        "lib": [
            "es6",
            "dom",
            "dom.iterable"
        ],
...
4
  • 1
    I'm ok with accepting this if it solves the original issue.
    – Derek
    Nov 18, 2018 at 4:37
  • Alternatively, just do: "compilerOptions": { "target": "es2015" }
    – prideout
    Aug 24, 2019 at 23:15
  • It's important to mention that If you target es2015, your bundle may not work properly on older browsers. It may be a solution (I haven't tried) but it has consequences Feb 13, 2020 at 10:40
  • 1
    This solved it for me! Previous solutions referencing es2015 did not apply, my project is already module: es2020 and target: es2019.
    – knite
    Apr 13, 2021 at 2:15
13

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

(document.querySelectorAll('path.frame-zone') as any as Array<HTMLElement>).forEach();
1
  • if you are not using trailing ; on lines, you will need to start with one ;(document... Feb 10, 2022 at 5:02
-1

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

1
-3

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');
8
  • 1
    I tried this. It doesn't help. Lint already knows what type it is.
    – Gherman
    Sep 21, 2017 at 16:57
  • type its NodeListOf or NodeList !?
    – Mars
    Sep 21, 2017 at 17:00
  • It's NodeListOf
    – Gherman
    Sep 21, 2017 at 17:01
  • It's NodeListOf<Element>. I can cast it to NodeListOf<Node> but with no change.
    – Gherman
    Sep 21, 2017 at 17:02
  • check interface its like this ? : interface NodeListOf<TNode extends Node> extends Array<TNode> {}
    – Mars
    Sep 21, 2017 at 17:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.