[TypeScript] Custom data structures in TypeScript with iterators

We usually think of types as something that can define a single layer of an object: with an interface we normally specify a list of a few properties and their respective types. If any one of those properties is another object we must refer again to its type. This is a finite process, as eventually we will get to a flat object, that doesn’t reference any other objects. Trees and Linked Lists are dynamic data structures, that can have infinitely many levels of depth. A type alias in TypeScript can use generics and refer to itself - this can be used to create these potentially infinitely long data structures. We will also explore using Linked Lists for building a Redux time travelling debugger.

 

For example:

interface TreeNode<T> {
  value: T;
  left: TreeNode<T>;
  right: TreeNode<T>;
}

interface LinkedListNode<T> {
  value: T;
  next: LinkedListNode<T>;
}

While most types have a finite structure, these types can potentially grow infinitely.

let node: LinkedListNode<string>;
node.next.next.next.next.next.next.next.next.value;

 

Traversing items of custom data structures, like trees or linked lists, require knowledge of how that data structure is built. That can lead to problems, as faulty iteration strategies might not visit all the items, or they might not know when they've finished visiting all of them. In this lesson, we're going to look at how TypeScript supports us in building custom ES6 iterators that can be then used by a simple "for..of" loop to ensure we provide an easy to use and reliable API for other developers to traverse our data structures.

class BackwardsActionIterator implements IterableIterator<Action> {
  constructor(private_currentActionNode: ListNode<Action>){

  }
  [Symbol.iterator](): IterableIterator<Action> {
    return this;
  }

  next(): IteratorResult<Action> {
        const curr = this._currentActionNode;
        if(!curr || !curr.value) {
            return {value: null, done: true};
        }
        //1. move through each item in the list 
        this._currentActionNode = curr.prev;
        //2. return each item
        return {value: curr.value, done: false};
    }
}

 

Now we can add some Actions:

let action1 = { type: "LOGIN" };
let action2 = { type: "LOAD_POSTS" };
let action3 = { type: "DISPLAY_POSTS" };
let action4 = { type: "LOGOUT" };

let actionNode1: ListNode<Action> = {
    prev: null,
    next: null,
    value: action1
};

let actionNode2: ListNode<Action> = {
    prev: null,
    next: null,
    value: action2
};

actionNode1.next = actionNode2;

let actionNode4: ListNode<Action> = {
  prev: actionNode3,
  next: null,
  value: action4
};
actionNode3.next = actionNode4;

 

Now all we need to do is just create the for of loop. I'm going to take each action one by one and I'm going to go for my backwardsActionsList. On each iteration I just want to print out the type of the action.

const backwardsActionsList = new BackwardsActionIterator(
  actionNode4
);

for(let action of backwardsActionsList) {
  console.log(action.type);
}

 

 

RUN:

tsc iterator.ts --target es6