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

Created on 10 Apr 2015 · 42Comments · Source: microsoft/TypeScript

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.

Bug lib.d.ts help wanted

Source

Arnavion

👍11

Most helpful comment

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

saschanaz on 9 Nov 2018

🎉3 👍2

All 42 comments

@zhengbli would this be covered in your change?

mhegazy on 10 Apr 2015

(This would also require making two versions of dom.d.ts - for ES5 and ES6.)

Arnavion on 10 Apr 2015

yup. that is correct.

mhegazy on 10 Apr 2015

This should also be supported in ES3/ES5 since the emitted loop is just looping over the indexes.

djarekg on 30 Apr 2015

iterators relay on symbols and these are defined in ES6. I think what we need is to allow iterating ArrayLike in ES3/ES5 (#2862).

mhegazy on 30 Apr 2015

@djarekg That is not correct. It can also require converting NodeList to an array first (with slice) to handle the livelist getting modified during iteration. See https://github.com/Microsoft/TypeScript/issues/2696

Arnavion on 1 May 2015

Please do not forget to include in this list TouchList interface. Thanks.

NekR on 31 May 2015

@SaschaNaz has added support for:

NodeList
NodeListOf
DOMTokenList

The other interfaces do not seem to be iterable in the spec. @Arnavion any ideas?

mhegazy on 9 Jun 2015

They're not iterable<> but they _are_ ArrayClass, eg CSSRuleList. That means their prototype is supposed to be an Array instead of Object and so they have all the properties of Array including [Symbol.iterator], although no browser has actually gone _that_ far, not even Nightly.

NodeList is also supposed to be ArrayClass instead of iterable<>, but Chrome had problems with it and (temporarily?) abandoned it. FF has an open bug to convert NodeList from iterable to ArrayClass but so far nothing has happened. I don't know what browsers' plan for these "ArrayClass" interfaces - I would guess it's likely that all ArrayClass interfaces will eventually be iterable even if they aren't full-blown Arrays.

The array iterator Array.prototype[Symbol.iterator] is also usable for all DOM collections, and this is what Nightly does. For example, CSSRuleList.prototype[Symbol.iterator] === Array.prototype[Symbol.iterator] is true in Nightly. This is intentional - ArrayIterator is supposed to work with ArrayLikes. So even in browsers where DOM collection prototypes don't already have a Symbol.iterator property, assigning it with, say CSSRuleList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];, works and makes them iterable with for-of. This would be an argument for TS to allow for-of for these types. The user just needs to add a polyfill to assign the [Symbol.iterator] property on all the DOM list prototypes they're interested in iterating with for-of. But these will have to be custom polyfills - I don't know any polyfill library that adds Symbol.iterator properties to _all_ DOM collections. Babel (core-js) does it but only for NodeList.

On the other hand, Array.from() works for them since they are array-likes, and even in TS they implicitly extend ArrayLike<T> so Array.from()'s signature is not a problem. So that's an argument against allowing for-of for these types in TS.

So basically, from the user's point of view, either they use a polyfill for Array.from, and use Array.from to convert all their DOM collections before using for-of. This requires no change from TS, and such a polyfill already exists. (Then there was no point to adding [Symbol.iterator] to NodeList either, but anyway...)

Or, TS allows for-of with all DOM collections, and the user uses a polyfill that adds [Symbol.iterator] properties to all those collections. This does require change from TS, and such a polyfill doesn't already exist.

I don't have an opinion either way.

Arnavion on 9 Jun 2015

@Arnavion

Neither NodeList and DOMTokenList are supposed to be Array subclasses. They are only supposed to be iterable, as in:

JavaScript:

js NodeList.prototype[Symbol.iterator] = function* () { // ... }

Python:

py class NodeList: # ... def __iter__(self): # ...

Java:

java import java.util.*; public class NodeList implements Iterable<Node> { // ... Iterator<Node> iterator() { // ... } }

Scala:

scala import scala.collection.{Iterable, Iterator} class NodeList extends Iterable[Node] { // ... def iterator: Iterator[Node] = // ... }

isiahmeadows on 8 Jul 2015

@impinball Yes they are supposed to be, per the spec. I gave links for the other CSSOM objects in the previous post, and the link for NodeList is here where you can also see it's described as ArrayClass.

I already explained that no browser has actually implemented them as ArrayClass.

Edit: I see you're specifically talking about the whatwg's spec. Sure, that's the one browsers are more likely to implement anyway. However also note that whether they are ArrayClass or not is not relevant to this issue.

Arnavion on 8 Jul 2015

@Arnavion I see what you're talking about in the edit...This bug is actually about the following problem:

interface Foo {
  *[Symbol.iterator](): Iterator<any>;
}

declare class Bar {
  *[Symbol.iterator](): Iterator<any>;
}

declare let baz: {
  *[Symbol.iterator](): Iterator<any>;
};

declare let foo: Foo;
let bar = new Bar();

for (let _ of foo) {} // Fail?
for (let _ of bar) {} // Fail?
for (let _ of baz) {} // Fail?

Does that repro in any of the three cases? I don't have a dev version handy to test it.