Typescript: Can't iterate over DOM elements even with dom.iterable

[seivan]

I might have missed something here. Feel free to close this ticket if it's related to https://github.com/Microsoft/TypeScript/issues/4947

TypeScript Version: 2.2.1 / nightly (2.2.0-dev.201xxxxx)

Code

tsconfig.json

    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "module": "commonjs",
        "target": "es5",
        "strictNullChecks": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "lib" : ["dom","es6","dom.iterable","scripthost", "es2015.iterable", "es2015.collection"],
        "alwaysStrict": true,
        "removeComments": true,
        "emitDecoratorMetadata": false,
        "noEmitHelpers" : false,
        "importHelpers" : true,
        "allowJs": true,
        "forceConsistentCasingInFileNames": true,
        "noUnusedLocals": false

    },

const myNodeListOfBrs = document.querySelectorAll("br")
myNodeListOfBrs.forEach(element => {
  console.log(element);            
});

Expected behavior:
It should compile

Actual behavior:
It does not compile with error: property 'forEach' does not exist on type 'NodeListOf<HTMLBRElement>

[mhegazy]

PRs welcomed. You can find more information about contributing lib.d.ts fixes at https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes.

[mhegazy]

Documentation for NodeList.forEach can be found at https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

[seivan]

@mhegazy Uhm, But I am not sure if there even is a problem. From what I understand the interfaces exists but maybe you have to import them somehow. I was just trying to figure out what I'm doing wrong.

[mhegazy]

NodeList in lib.d.ts needs to have a definition for forEach. it does not today.

[mhegazy]

Fixed by https://github.com/Microsoft/TypeScript/pull/14641

[seivan]

@mhegazy Yeah I know it's been fixed and they exist, I write so in my previous comment. I am just wondering on how to use them? Since they don't actually work out of the box. What do I need to import?

[mhegazy]

c:\test>type b.ts
const myNodeListOfBrs = document.querySelectorAll("br")
myNodeListOfBrs.forEach(element => {
  console.log(element);
})
c:\test>tsc --v
Version 2.3.0-dev.20170419

c:\test>tsc --lib dom.iterable,es6 C:\test\b.ts

[seivan]

@mhegazy Thanks, I'll give it a try. It should be available on 2.2.0 as well.

[mhegazy]

that is a 2.3 change.

[jhpratt]

@mhegazy I'm running tsc 2.3.2 and it fails on the exact example given above.

[mhegazy]

make sure your --lib es6,dom,dom.iterable, or tsconfig.json has:

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

[trusktr]

If I recall correctly, not all browser put a forEach method on NodeLists.