Typescript: ES6 iterators can't be destructured

[isiahmeadows]

TypeScript Version: Latest online playground version

Code

var [a, b, c] = {
    [Symbol.iterator]:
        () => [1, 2, 3][Symbol.iterator]()
}

Expected behavior: It to compile.

Actual behavior: The following error:

Type '{ [Symbol.iterator]: () => IterableIterator<number>; }' is not an array type.

---

A couple notes on downlevel emits:

• A correct downlevel emit for iterators could be accomplished with this helper + current array destructuring, if you'd rather keep the code concise:

function _fromN(rhs, len) {
    var ret = Array(len), iter = rhs[Symbol.iterator]();
    for (var i = 0; i < len; i++) {
        var next = iter.next();
        if (next.done) { iter.close(); for (; i < len; i++) ret[i] = void 0; break; }
        ret[i] = next.value;
    }
    return ret;
}

• A correct downlevel emit for iterators could be accomplished with this code gen, if you'd rather keep it fast (i.e. no array allocation - this is what modern engines do):

let iter = gensym(), next = gensym();
emit(`var ${iter} = (${rhs})[Symbol.iterator]()`);
emit(`var ${next} = ${iter}.next()`);
emit(`if (!${next}.done) do {`);
for (const name of bindings) {
  if (!isElision(name)) emitAssign(name, `${next}.value;`);
  emit(`if ((${next} = ${iter}.next()).done) break;`);
}
emit(`${iter}.close();`);
emit(`} while (false);`);

[aluanhaddad]

You need to specify --downlevelIteration and that is not possible in the playground. It works correctly with the flag set.

In addition be sure to set lib option as well, e.g. --lib es2015, to bring the proper types into the compilation context.

[isiahmeadows]

:-\ Could that be added, then?

Or even better, could an option to toggle the ES target be added? That would also avoid this problem.

[aluanhaddad]

I think it would be nice to have both options.

[RyanCavanaugh]

I don't want to go too crazy on the Playground options. ES Target yes, --DLI probably not.

@rbuckton would it be practical to include a mention of the flag in the error message?

[DanielRosenwasser]

@RyanCavanaugh #16022

[aluanhaddad]

@RyanCavanaugh I agree that the playground should not become overly complex. New users presented with a plethora of options will likely be put off. I think the ES target option will be really useful.

That said what about adding a mode that enables _all_ transformations that enable the use of some language feature?
--experimentalDecortators
--emitDecoratorMetadata
--downlevelIteration
--jsx react
--etc

[gcnew]

I concur with @aluanhaddad. The most commonly used options should have a UI switch. For the rest there should be a "raw" option where you pass the flags manually. In addition, the flags should be persisted somehow. Currently they are not "shared" with the URL. A light-weight solution would be to keep them as comments in the beginning of the file, much like the test suite does.

// @lib: es6
// @strict: true
// @downlevelIteration: true

for (const x of new Set([1, 2, 3])) {
    console.log(x);
}

[isiahmeadows]

I'd be okay with something like @gcnew's idea, but I feel that ES versions would be changed frequently enough that --target should probably have a UI switch in this case. (Think: async functions targeting Node vs legacy browsers.)

[RyanCavanaugh]

Flags in comments like the test suite would be fantastic. Pasting a user-provided repro into a testcase = living the dream

[kitsonk]

@RyanCavanaugh is the wrap for playground publicly available anywhere for contributions? In theory, especially dealing with a single editor and single editor model, walking the comments from the model and configuring the typescript services should be fairly straight forward.

[isiahmeadows]

@JAForbes Just pinging you so you're aware of how this ends up resolved. (You're the one to really credit for finding this.)

[RyanCavanaugh]

New playground lets you do almost everything