TypeScript Iterators and Generators
TypeScript, being a superset of JavaScript, supports many advanced language features, including Iterators and Generators. These are powerful tools for working with sequences of data, offering a flexible and memory-efficient way to work with large or potentially infinite data streams.
Iterators in TypeScript
What is an Iterator?
An Iterator is an object that allows you to iterate (or traverse) through a collection of data, like an array or a list. In TypeScript, an iterator is any object that implements the Iterator interface.
An iterator has the following two main methods:
next(): This method returns an object with two properties:value: The current element in the collection.done: A boolean that indicates whether the iteration has been completed.
Iterators are used behind the scenes in many TypeScript and JavaScript constructs, such as for...of loops and spread operators.
Basic Iterator Example
Let’s look at an example of manually creating and using an iterator in TypeScript.
function makeIterator(array: any[]): Iterator<any> {
let index = 0;
return {
next: function () {
return index < array.length
? { value: array[index++], done: false }
: { value: undefined, done: true };
},
};
}
let iterator = makeIterator([10, 20, 30]);
console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
Explanation:
makeIteratortakes an array and returns an object with thenextmethod.- The
nextmethod returns the next element in the array until the end is reached, after which it setsdonetotrue.
Output:
{ value: 10, done: false }
{ value: 20, done: false }
{ value: 30, done: false }
{ value: undefined, done: true }
Using Iterators with for...of
The for...of loop in TypeScript automatically works with objects that have an iterator (i.e., objects implementing the Iterator interface). Here’s a simple example:
let numbers = [1, 2, 3];
for (let num of numbers) {
console.log(num);
}
Output:
1
2
3
TypeScript (and JavaScript) has built-in support for iteration over iterable objects like arrays, strings, maps, and sets.
Custom Iterators
You can also create custom iterators by defining the [Symbol.iterator] method in your objects. Here’s how you can create an object that behaves like an array with a custom iterator:
class CustomIterable {
private data: number[];
constructor(data: number[]) {
this.data = data;
}
[Symbol.iterator]() {
let index = 0;
const data = this.data;
return {
next() {
return index < data.length
? { value: data[index++], done: false }
: { value: undefined, done: true };
},
};
}
}
let iterable = new CustomIterable([100, 200, 300]);
for (let value of iterable) {
console.log(value);
}
Explanation:
- The
[Symbol.iterator]()method makes theCustomIterableclass iterable. - Inside
for...of, we can now loop over the class instances as if they were arrays.
Output:
100
200
300
Generators in TypeScript
What is a Generator?
A Generator in TypeScript is a special type of function that can be paused and resumed. Instead of returning a single value, a generator can yield multiple values over time. This makes generators extremely useful for working with large or infinite data sets because values are produced only when needed (lazily evaluated).
In TypeScript (and JavaScript), generators are defined using the function* syntax, and they return an iterator object.
Basic Generator Example
Here’s a basic generator function:
function* simpleGenerator() {
yield 1;
yield 2;
yield 3;
}
let generator = simpleGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }
Explanation:
yieldis used to return values from the generator one by one.- Each call to
generator.next()resumes the generator from where it left off.
Output:
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }
Generator with Input
You can also pass values back into a generator using the next() method:
function* generatorWithInput() {
const first = yield "First yield";
console.log(`Received: ${first}`);
const second = yield "Second yield";
console.log(`Received: ${second}`);
}
let generator = generatorWithInput();
console.log(generator.next()); // { value: "First yield", done: false }
console.log(generator.next("Input for first yield")); // { value: "Second yield", done: false }
console.log(generator.next("Input for second yield")); // { value: undefined, done: true }
Explanation:
- The value passed into
next()can be captured inside the generator and processed further.
Output:
{ value: "First yield", done: false }
Received: Input for first yield
{ value: "Second yield", done: false }
Received: Input for second yield
{ value: undefined, done: true }
Infinite Generators
Generators can also be used to create infinite sequences because they don’t produce all their values at once. Here’s an example:
function* infiniteNumbers() {
let num = 1;
while (true) {
yield num++;
}
}
let numbers = infiniteNumbers();
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
console.log(numbers.next().value); // 3
// This can go on indefinitely
Explanation:
- The generator continues yielding numbers as long as
next()is called. There’s no end to the sequence.
Output:
1
2
3
Advanced Generators
Delegating Generators (Yield*)
Generators can delegate part of their operations to another generator using the yield* expression. This is useful for modularizing complex generator operations.
function* subGenerator() {
yield "A";
yield "B";
}
function* mainGenerator() {
yield* subGenerator();
yield "C";
}
let gen = mainGenerator();
console.log(gen.next().value); // A
console.log(gen.next().value); // B
console.log(gen.next().value); // C
Explanation:
- The
yield* subGenerator()line allowsmainGenerator()to yield all values fromsubGenerator()before continuing.
Output:
A
B
C
Asynchronous Generators
TypeScript also supports asynchronous generators using async function*. These are useful when you need to yield values from asynchronous operations, such as fetching data from a remote server over time.
Example:
async function* asyncGenerator() {
for (let i = 1; i <= 3; i++) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i;
}
}
(async () => {
const gen = asyncGenerator();
for await (let value of gen) {
console.log(value); // Output: 1, 2, 3 (with a delay of 1 second between each)
}
})();
Explanation:
async function*allows yielding values from asynchronous operations.- The
for await...ofloop is used to consume values from an async generator.
Iterators vs. Generators
Differences
- Iterators are typically consumed objects that follow the
Iteratorinterface and expose anext()method to get the next value in a sequence. - Generators are functions that return an iterator and allow yielding multiple values. They can pause their execution and resume when needed.
When to Use Each
- Use Iterators when you have a collection that you want to manually iterate over.
- Use Generators when you need to control the sequence of values being produced and when you want to pause and resume function execution.
We have explored Iterators and Generators in TypeScript. Iterators provide a way to traverse through data collections, while generators offer a more flexible and lazy approach by yielding values one at a time. These tools are powerful, especially when dealing with large data sets or asynchronous operations, making them essential to mastering TypeScript's capabilities. Happy Coding!❤️