Use AsyncIterator in Typescript – required options

Question

Consider this basic AsyncIterator Example from MDN:

var asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false });
        }

        return Promise.resolve({ done: true });
      }
    };
  }
};

(async function() {
   for await (let num of asyncIterable) {
     console.log(num);
   }
})();

Running this on node 10.16.0 works fine. However, I cannot seem to make it run via Typescript. Using this tsconfig:

{
  "compilerOptions": {
    "lib": ["es2016", "esnext.asynciterable"],
    "target": "es2016"
  }
}

results in error The type returned by the 'next()' method of an async iterator must be a promise for a type with a 'value' property. Same error for target esnext.

If I remove the target option entirely, I get a Type '{ [Symbol.asyncIterator](): { i: number; next(): Promise<{ done: boolean; }>; }; }' is not an array type or a string type.

The TS manual mentions several caveats, none of which could solve my problem. Oddly enough, iterating async generators works fine.

Which tsconfig options are required to make this example compile?

Answer 1

After digging a little further into the problem, it appears it is due to multiple issues here.

The async iterator can't rely on its context (e.g. this.i) to access properties that are not part of the AsyncIterator interface. Doing so will not compile in the current version of TypeScript 3.6 (even if it works fine in JavaScript), so to work around that we are left with:

var asyncIterable = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      next() {
        if (i < 3) {
          return Promise.resolve({ value: i++, done: false });
        }

        return Promise.resolve({ done: true });
      }
    };
  }
};

Now the problem appears to be related to value missing in the second return statement. Because the IteratorResult interface is defined like this:

interface IteratorResult<T> {
  done: boolean;
  value: T;
}

the next() method must always return an object with value: number (again, even if it works fine in JavaScript), so finally we have:

var asyncIterable = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      next() {
        if (i < 3) {
          return Promise.resolve({ value: i++, done: false });
        }

        return Promise.resolve({ value: i, done: true });
      }
    };
  }
};