How to rewrite the simple iterable class from JavaScript to TypeScript?

Question

I wrote the simple iterable class on JavaScript ES6:

// JavaScript ES6
class FooIterable {
	
	constructor(items){
		this.data = items; 
	}
	
	*[Symbol.iterator](){
		for(let n of this.data){
			yield n;
		}
	}
}

const foo = new FooIterable(['Bob','John','Mark']);

for(let n of foo) console.log(n);

Now I want to write the same on TypeScript 2.6. This is my attempt:

class FooIterable {

    data: string[];

    constructor(items : string[]){
        this.data = items; 
    }

    *[Symbol.iterator](){
        for(let n of this.data){
            yield n;
        }
    }
}
const foo = new FooIterable(['Bob', 'John', 'Mark']);
for(let n of foo) console.log(n);

But I see such error in the online editor:

How can I do what I need?

Answer 1

Using iterators requires the downlevelIteration compiler option. I don't see where this option is exposed in the playground, unfortunately.

As an alternative, you could use Array.from since that will convert it to an array type that can be used, and .from will use the iterator internally as well.

for (let n of Array.from(foo))

NOTE: for an target that supports this iteration natively (such as es6) you don't need the downlevelIteration option.