zoukankan      html  css  js  c++  java
  • [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
  • 相关阅读:
    关于STM32的bxcan模块中的Error management中的TEC和REC的值
    不同MCU的大小端(endian)分类
    vmware中虚拟机的网络连接设置
    ST的STM32系列单片机
    使用diskgenius进行分区的备份和恢复
    VMware虚拟机设置中的网络适配器设置
    js图片随鼠标移动,旋转,拉伸
    JDK1.8的Lambda、Stream和日期的使用详解
    MySQL Explain详解
    为什么我使用了索引,查询还是慢?
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10296904.html
Copyright © 2011-2022 走看看