TypeScript: for-of does not work with some DOM collections when target is ES6

Update: This issue is now only for the following collections:

MediaList
StyleSheetList
CSSRuleList

Originally it was about NodeList as well, but that was fixed (along with DOMTokenList) in #3393

Original:

var paragraphs = document.querySelectorAll("p");
for (let p of paragraphs) {
    console.log(p);
}

foo.ts(2,15): error TS2488: The right-hand side of a 'for...of' statement must have a '[Symbol.iterator]()' method that returns an iterator.

Seems it just needs an update to lib.es6.d.ts to add the [Symbol.iterator()] to all the collections that have an indexer and length property. ~~The ones I found that have it in Nightly are below. The rest were either IE-only or didn’t exist.~~ Removed my list since it seems FF has more than the specs allow. See https://github.com/zloirock/core-js/issues/137#issuecomment-159531781 for a more accurate list.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 13
Comments: 42 (22 by maintainers)

Most upvoted comments

This can be closed now as lib.dom.iterable.d.ts have iterators for MediaList, StyleSheetList, CSSRuleList, and many more.

saschanaz on Nov 9, 2018

This problem still exists for me when trying to iterate over NodeListOf<Element>. A NodeList is always iterable. Period.

Some code:

const triggers = element.querySelectorAll('.trigger');
for (const trigger of triggers) {
    console.log(trigger);
}

The error is on triggers in VS Code, using typescript 3.2.2.

The error:

[ts] Type 'NodeListOf<Element>' is not an array type or a string type. [2495]

Technically correct. A NodeList is indeed neither an array nor a string. But for..of works on a great many more kinds of objects, including NodeList.

The above code compiles and works fine. So why complain about something that plainly isn’t the case?

thany on Feb 5, 2019