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?

@Bergi right but it shouldn't have to, at least it isn't required by the ECMAScript specification... I wish that object had been defined with `type IteratorResult = { value: T; done: boolean; } | { value?: undefined; done: true; }` — Patrick Roberts, Jul 16 '19 at 19:23
@PatrickRoberts I think it's a good practice to always return objects of the same shape nonetheless. — Bergi, Jul 16 '19 at 19:32
@Bergi would you count `{ value: undefined, done: true }` the same shape as `{ value: i++, done: false }`? — Patrick Roberts, Jul 16 '19 at 19:50
@PatrickRoberts Yes, the properties are the same, even if unfortunately the types are not. — Bergi, Jul 16 '19 at 20:02
I don't see how that's unfortunate... for loops don't even iterate the result with `done: true` so it shouldn't matter. — Patrick Roberts, Jul 16 '19 at 20:05

score 9 · Accepted Answer · answered Jul 16 '19 at 19:10

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 });
      }
    };
  }
};

Use AsyncIterator in Typescript – required options

1 Answers1