[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
[TypeScript] Custom data structures in TypeScript with iterators的更多相关文章
- A library of generic data structures
A library of generic data structures including a list, array, hashtable, deque etc.. https://github. ...
- The Swiss Army Knife of Data Structures … in C#
"I worked up a full implementation as well but I decided that it was too complicated to post in ...
- 剪短的python数据结构和算法的书《Data Structures and Algorithms Using Python》
按书上练习完,就可以知道日常的用处啦 #!/usr/bin/env python # -*- coding: utf-8 -*- # learn <<Problem Solving wit ...
- Persistent Data Structures
原文链接:http://www.codeproject.com/Articles/9680/Persistent-Data-Structures Introduction When you hear ...
- Go Data Structures: Interfaces
refer:http://research.swtch.com/interfaces Go Data Structures: Interfaces Posted on Tuesday, Decembe ...
- Choose Concurrency-Friendly Data Structures
What is a high-performance data structure? To answer that question, we're used to applying normal co ...
- 无锁数据结构(Lock-Free Data Structures)
一个星期前,我写了关于SQL Server里闩锁(Latches)和自旋锁(Spinlocks)的文章.2个同步原语(synchronization primitives)是用来保护SQL Serve ...
- [CareerCup] 10.2 Data Structures for Large Social Network 大型社交网站的数据结构
10.2 How would you design the data structures for a very large social network like Facebook or Linke ...
- Manipulating Data Structures
Computer Science An Overview _J. Glenn Brookshear _11th Edition We have seen that the way data struc ...
随机推荐
- HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能(二)
上一篇博客只画出了,一个坦克,并让其可以上下左右移动,这篇博客将画出敌人的坦克,并让自己的坦克可以发子弹,但是还不是尽善尽美,还有一些问题,将会在下篇博客说明: html代码: <!DOCTYP ...
- 《JavaScript模式》精要
P25. 如何避免eval()定义全局变量? 如: var jsstring = "var un = 1;"; eval(jsstring); console.log(typeof ...
- 《Java并发编程实战》学习笔记
第2章 线程安全性 正确性: 某个类的行为与其规范完全一致. 2.1线程安全: 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些线程将如何交替执行,并且在主调代码中不需要任何额外的同步或 ...
- Asp.net中web.config配置文件详解
Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中 ...
- Macaca 自动化录制工具uirecorder使用入门
Q&A PC端执行用例前,一定要运行selenium-standalone start,否则会出现这个问题:https://github.com/alibaba/uirecorder/issu ...
- [jquery] ajax parsererror
http://stackoverflow.com/questions/5061310/jquery-returning-parsererror-for-ajax-request 方法一: 直接去掉 d ...
- 识别浏览器的JavaScript引擎的方法
答案来自StackOverflow,打开这个网页http://jsbin.com/opuvas即可,这个网页也是答题者自己写的. 二维码是这个网址.网页内有统计访问量,作者想知道对多少人有用,建议尊重 ...
- 34、Django实战第34天:退出登录
编辑users.view.spy ... from django.contrib.auth import authenticate, login, logout from django.http im ...
- 【树形DP】Codeforces Round #395 (Div. 2) C. Timofey and a tree
标题写的树形DP是瞎扯的. 先把1看作根. 预处理出f[i]表示以i为根的子树是什么颜色,如果是杂色的话,就是0. 然后从根节点开始转移,转移到某个子节点时,如果其子节点都是纯色,并且它上面的那一坨结 ...
- 爬取维基百科人物介绍,并使用pymysql存储到数据库
代码如下: from urllib.request import urlopen from bs4 import BeautifulSoup import re import datetime imp ...