TypeScript 2.8.3 Type must have a Symbol.iterator method that returns an iterator

this has helped me. in tsconfig, add this :

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

This is required for tsconfig to know which interfaces to import while transpiling your code.

dom.iterable includes all the interfaces mentioned here : https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.iterable.d.ts

Also thanks to @domlas for mentioning this. I already upvoted his comment so that it is treated as default reason.

As I commented above, the spread operator is unfortunately currently unsupported for asynchronous iterators. The relevant issue in GitHub is tc39/proposal-async-iteration#103.

Recap from that issue (minus extraneous stuff such as "you could do it this way, oops no you can't, never mind"):

@jedwards1211 said:

Will array spread operator support ever be part of this proposal?

@domenic ansered:

Not part of this proposal... Another proposal could certainly contemplate something new here.

And I don't see a proposal elsewhere (want to start one?). In any case, since it isn't part of even JavaScript ESNext, it most likely won't get added to TypeScript.

The most viable alternative is the for await syntax detailed in @estus's answer. Sorry I couldn't be more helpful. Good luck!

Despite what the syntax may suggest, async generator function isn't async function that returns a generator.

As the proposal states,

Async generator functions are similar to generator functions, with the following differences:

When called, async generator functions return an object, an async generator whose methods (next, throw, and return) return promises for { value, done }, instead of directly returning { value, done }. This automatically makes the returned async generator objects async iterators.

It returns asynchronous generator, not a promise, so awaiting it doesn't make any good.

Since asynchronous generator has Symbol.asyncIterator instead of Symbol.iterator, it's non-iterable iterator, i.e. it cannot be iterated with regular ES6 methods (Array.from, for..of, spread syntax, etc). This is the reason why for await..of was introduced.

The code above should be:

const values = [];

for await (const value of this.test()) {
  values.push(v);
}

The iteration over asynchronous iterator can be desugared similarly to regular iterators, the difference is that next() returns a promise of next value, not a value itself:

const iterator = this.test();
let next;
       
while ((next = await iterator.next()).done === false) {
  values.push(next.value);
}

Since asynchronous generator spec is a proposal, the support for async iterators in ES6 iteration methods may be subject to change.