facinick

Iterate in Typescript

Terminology

Aggregate or Collection is the Class you want to iterate using for…of for…in etc.

Item is the object, many of which are is inside the Collection/Aggregate

example: A Collection is Students, where you want to iterate over every individual Item which is a Student

Iterable is a built-in interface in Typescript

You want to do something like:

1for (const student of students) {
2  console.log(student);
3}
1for (const student of students) {
2  console.log(student);
3}

Method one (Iterator and Iterable separate classes)

Item Class:

1class Item {}
1class Item {}

Collection Iterator Class:

1// This class' sole purpose is to encapsulate iteration for the Aggregate/Collection
2class CollectionIterator implements Iterator<Item> {
3  // The collection of items over which you want to iterate
4  collection: Array<Item> = [];
5
6  constructor(collection: Array<Item>) {
7    this.collection = collection;
8  }
9
10  next(value?: any): IteratorResult<Item> {
11    // Return the next value and done (is iteration completed or not)
12    return {
13      done: false,
14      value: new Item(),
15    };
16  }
17}
1// This class' sole purpose is to encapsulate iteration for the Aggregate/Collection
2class CollectionIterator implements Iterator<Item> {
3  // The collection of items over which you want to iterate
4  collection: Array<Item> = [];
5
6  constructor(collection: Array<Item>) {
7    this.collection = collection;
8  }
9
10  next(value?: any): IteratorResult<Item> {
11    // Return the next value and done (is iteration completed or not)
12    return {
13      done: false,
14      value: new Item(),
15    };
16  }
17}

Collection (or an Aggregate) Class:

1// A class that holds collection to a bunch of similar items, and other related things
2class Collection implements Iterable<Item> {
3		collection: Array<Item> = []
4
5		// Override this method to implement Iterable interface
6		// Return the AggregateIterator class object
7    [Symbol.iterator](): Iterator<Item> {
8        return new CollectionIterator(this.collection)
9    }
10}
1// A class that holds collection to a bunch of similar items, and other related things
2class Collection implements Iterable<Item> {
3		collection: Array<Item> = []
4
5		// Override this method to implement Iterable interface
6		// Return the AggregateIterator class object
7    [Symbol.iterator](): Iterator<Item> {
8        return new CollectionIterator(this.collection)
9    }
10}

Method two (All in one, al ways fun)

Item Class:

1class Item {}
1class Item {}

Collection (or an Aggregate) Class:

1class Collection { // No need to explicitly implement any build-in interface
2
3    collection: Array<Item> = []
4
5		// No need to explicitly have IterableIterator<Item> as return type
6    [Symbol.iterator]() {
7        return this;
8    }
9
10		// No need to explicitly have IteratorResult<Item> as return type
11    next() {
12        return {
13					done: false,
14					value: new Item()
15				}
16    }
17}
1class Collection { // No need to explicitly implement any build-in interface
2
3    collection: Array<Item> = []
4
5		// No need to explicitly have IterableIterator<Item> as return type
6    [Symbol.iterator]() {
7        return this;
8    }
9
10		// No need to explicitly have IteratorResult<Item> as return type
11    next() {
12        return {
13					done: false,
14					value: new Item()
15				}
16    }
17}
Published By