以下内容基于对TypeScript Deep Dive的学习。
目录
为什么使用TypeScript
代码风格
JavaScript
判断相等
引用
Null vs. Undefined
this
闭包(Closure)
Number类型
Truthy
现在使用未来JavaScript的功能
类
使用类
继承(Inheritance)
静态成员(Statics)
访问修饰符(Access Modifiers)
Abstract修饰符
构造方法
箭头函数/Lambda函数
可变个数参数
let
const
解构
展开运算符
for...of
Iterator
模板文字
Promise
Promise链
创建Promise
并行处理
将回调函数转换为Promise
生成器
生成器函数可用于创建惰性迭代器
外部控制执行
async await
为什么使用TypeScript
为JavaScript提供可选类型系统
类型可以提高重构时的开发速度。通过有类型，在写代码的时候可以注意到错误，立即修复错误。
默认设置下，编译时即使有类型错误也会生成JavaScript代码。
将JavaScript未来版本中计划的功能用于当前（非现代）JavaScript环境
TypeScript使旧的JavaScript（ES5之前）运行环境也能使用ES6以后版本中计划的很多功能。TypeScript团队正在积极添加功能。
隐式推断类型
var foo = 123; // 推断为number类型 foo = '456'; // 错误: 无法将'string'代入'number'
明确指定类型
var foo: number = 123; var foo: number = '123'; // 错误: 无法将'string'代入'number'
结构类型
interface Point2D { x: number; y: number; } interface Point3D { x: number; y: number; z: number; } var point2D: Point2D = { x: 0, y: 10 } var point3D: Point3D = { x: 0, y: 10, z: 20 } function iTakePoint2D(point: Point2D) { /* 其他处理 */ } iTakePoint2D(point2D); // 相同结构没问题 iTakePoint2D(point3D); // 多了属性也没问题 iTakePoint2D({ x: 0 }); // 错误：'y'不存在
使用既存JavaScript库的时候，可以使用declare声明消除编译时类型错误
$('.awesome').show(); // 错误：'$'不存在 declare var $: any; $('.awesome').show(); // 不报错了 declare var $: { (selector: string): any }; $('.awesome').show(); // 不报错了 $(123).show(); // 错误: selector必须是string类型
代码风格
变量名、函数名、类成员和方法名、接口成员名、类型成员名 都使用小驼峰命名法，比如：camelCase
类名、接口名、类型名、命名空间、枚举类型和成员名 都使用大驼峰命名法，比如：PascalCase
接口名不加'I'前缀
null vs. undefined
推荐别使用null和undefined来声明不可用
// Bad let foo = { x: 123, y: undefined }; // Good let foo: { x: number, y?: number } = { x: 123 };
通常使用undefined
// Bad return null; // Good return undefined;
如果是API或传统API的一部分，则使用null
// Bad cb(undefined) // Good cb(null)
使用truthy检查对象是null或undefined
// Bad if (error === null) // Good if (error)
使用== null / != null (不使用 === / !==)来检查null/undefined，因为同时适用于null和undefined，但不适用与其他假值(如:'',0,false)
// Bad if (error !== null) // 只排除null，不排除undefined // Good if (error != null) // 同时排除null和undefined
使用代码格式化
引号
除非需要转义，否则建议使用单引号（'）
如果不能使用双引号，请尝试使用反引号（`）
缩进使用2空格，不是TAB
语句后使用分号
声明数组使用foos: Foo[]而不使用foos: Array<Foo>
文件名使用小驼峰命名,比如：accordion.tsx、myControl.tsx、utils.ts
type vs interface
需要UNION型或交叉型时使用type
type Foo = number | { someProperty: number }
想做extend和implements的时候使用interface
interface Foo { foo: string; } interface FooBar extends Foo { bar: string; } class X implements FooBar { foo: string; bar: string; }
== or ===
这两个都对TypeScript用户来说几乎是安全的。推荐使用TypeScript代码库中使用的===
JavaScript
判断相等
JavaScript需要注意的一点是==和===的不同，==会尝试在两个变量之间进行类型强制转换。
例如在以下情况下，字符串将转换为数字。
console.log(5 == "5"); // JavaScript:true , TypeScript会报错 console.log(5 === "5"); // JavaScript:false , TypeScript会报错 console.log("" == "0"); // JavaScript:false , TypeScript:false console.log(0 == ""); // JavaScript:true , TypeScript会报错
与==和===一样，!=和!==会做同样的处理
所以，除了检查null以外，都建议使用===和!==
不能用于比较结构类型的内容
console.log({a:123} == {a:123}); // False console.log({a:123} === {a:123}); // False
可以使用deep-equal npm包进行结构类型的比较
import * as deepEqual from "deep-equal"; console.log(deepEqual({a:123},{a:123})); // True
引用
除了文字(字符串、数字、boolean等)之外，JavaScript中的任何对象（包括函数、数组、正则表达式等）都是引用。
修改会影响所有引用的值
var foo = {}; var bar = foo; // bar是同一个对象的引用 foo.baz = 123; console.log(bar.baz); // 123
等号比较也是比较的引用
var foo = {}; var bar = foo; // bar是foo的引用 var baz = {}; // baz是另一个对象 console.log(foo === bar); // true console.log(foo === baz); // false
Null vs. Undefined
JavaScript（以及扩展的TypeScript）有两种底层类型：null和undefined。它们的意思是不同的：
内容尚未初始化：undefined
内容当前不可用：null
判断
console.log(undefined == undefined); // true console.log(null == undefined); // true console.log(0 == undefined); // false console.log('' == undefined); // false console.log(false == undefined); // false
推荐使用== null / != null (不使用 === / !==)来检查null/undefined，因为同时适用于null和undefined，但不适用与其他假值(如:'',0,false)
一般情况下不需要区分是null还是undefined
全局级别变量未定义的判断
if (typeof someglobal !== 'undefined') { console.log(someglobal); }
限制显式使用undefined
{a:1,b:undefined} 应该改成 {a:1}
Node形式的回调
Node形式的回调函数里，没有发生错误的时候，err对象一般设定为null，开发者使用truthy检查
fs.readFile('someFile', 'utf8', (err,data) => { if (err) { // 错误处理 } else { // 正常处理 } });
在创建自己的API时，为了保持一致性，在这种情况下可以使用null。
出于对自己API的诚意，您应该考虑promise，在这种情况下，您实际上不需要为缺少的错误值而烦恼（您使用.then与.catch来处理它们）。
不要使用undefined表示无效值
// Bad function toInt(str:string) { return str ? parseInt(str) : undefined; } // Good function toInt(str: string): { valid: boolean, int?: number } { const int = parseInt(str); if (isNaN(int)) { return { valid: false }; } else { return { valid: true, int }; } }
JSON和序列化
JSON标准支持null的编码，不支持undefined
JSON.stringify({willStay: null, willBeGone: undefined}); // {"willStay":null}
this
函数中对this的访问取决于函数是如何调用的。这通常被称为调用上下文。
function foo() { console.log(this); } foo(); // 全局调用，日志输出为window对象 let bar = { foo } bar.foo(); // 在bar上调用，日志输出为bar对象
闭包(Closure)
JavaScript中的函数可以访问外部范围中定义的任何变量。
function outerFunction(arg) { var variableInOuterFunction = arg; function bar() { console.log(variableInOuterFunction); // 访问外部范围中定义的变量 } // 调用本地函数以证明它可以访问arg bar(); } outerFunction("hello closure"); // 日志输出:"hello closure"
即使在外部函数返回之后，内部函数也可以从外部范围访问变量。这是因为变量仍然绑定在内部函数中，而不依赖于外部函数。
function outerFunction(arg) { var variableInOuterFunction = arg; return function() { console.log(variableInOuterFunction); } } var innerFunction = outerFunction("hello closure!"); // 注意outerFunction已经返回 innerFunction(); // 日志输出:"hello closure!"
它允许轻松地组合对象，例如揭示模块模式(Revealing module pattern)：
function createCounter() { let val = 0; return { increment() { val++ }, getVal() { return val } } } let counter = createCounter(); counter.increment(); console.log(counter.getVal()); // 1 counter.increment(); console.log(counter.getVal()); // 2
Number类型
核心类型
JavaScript只有一种数字类型。它是一个双精度64位数字。
10进制数(Decimal)
如果你是精通其他语言中double/float的人，你会知道二进制浮点与十进制小数对应不正确。
console.log(.1 + .2); // 0.30000000000000004
整数(Integer)
整数值的界限是由内置的Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER决定。
console.log({max: Number.MAX_SAFE_INTEGER, min: Number.MIN_SAFE_INTEGER}); // {max: 9007199254740991, min: -9007199254740991}
在这种情况下，安全是指该值不能是舍入误差的结果。
不安全的值与这些安全值相差+1/-1，任何数量的加法/减法都将使结果舍入。
console.log(Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2); // true! console.log(Number.MIN_SAFE_INTEGER - 1 === Number.MIN_SAFE_INTEGER - 2); // true! console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991 console.log(Number.MAX_SAFE_INTEGER + 1); // 9007199254740992 - Correct console.log(Number.MAX_SAFE_INTEGER + 2); // 9007199254740992 - Rounded! console.log(Number.MAX_SAFE_INTEGER + 3); // 9007199254740994 - Rounded - correct by luck console.log(Number.MAX_SAFE_INTEGER + 4); // 9007199254740996 - Rounded!
要检查安全性，请使用ES6的Number.isSafeInteger：
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER)); // true console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1)); // false console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 10)); // false
big.js
财务计算（例如GST计算、带美分的货币、加法等）时，都要使用big.js这样的库
完美十进制数学
安全的越界整数值
npm install big.js @types/big.js import { Big } from 'big.js'; export const foo = new Big('111.11111111111111111111'); export const bar = foo.plus(new Big('0.00000000000000000001')); // 获取数字 const x: number = Number(bar.toString()); // 失去精度
NaN
如果数字计算不能用有效数字表示，JavaScript将返回一个特殊的NaN值。
console.log(Math.sqrt(-1)); // NaN
不能用等号判断NaN，需要使用Number.isNaN
// Bad console.log(NaN === NaN); // false!! // Good console.log(Number.isNaN(NaN)); // true
无穷大(Infinity)
Number可以表示的界限值为Number.MAX_VALUE和-Number.MAX_VALUE
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 console.log(-Number.MAX_VALUE); // -1.7976931348623157e+308
精度未更改的超出范围的值受这些限制。
console.log(Number.MAX_VALUE + 1 == Number.MAX_VALUE); // true! console.log(-Number.MAX_VALUE - 1 == -Number.MAX_VALUE); // true!
精度更改范围之外的值将解析为特殊值Infinity/-Infinity。
console.log(Number.MAX_VALUE + 10**1000); // Infinity console.log(-Number.MAX_VALUE - 10**1000); // -Infinity
除以0也是无穷大
console.log( 1 / 0); // Infinity console.log(-1 / 0); // -Infinity
可以手动使用这些Infinity值，也可以使用Number类的静态成员
console.log(Number.POSITIVE_INFINITY === Infinity); // true console.log(Number.NEGATIVE_INFINITY === -Infinity); // true
幸运的是，比较运算符（</>）可以起作用
console.log( Infinity > 1); // true console.log(-Infinity < -1); // true
无穷小(Infinitesimal)
Number可以表示的非0最小值为Number.MIN_VALUE
console.log(Number.MIN_VALUE); // 5e-324
小于Number.MIN_VALUE的值就直接变0了
console.log(Number.MIN_VALUE / 10); // 0
Truthy
真假判断
| 变量类型 | 判定为False的值 | 判定为True的值 |
|---|---|---|
| boolean | false | true |
| string | ''(空字符串) | 其他字符串 |
| number | 0/NaN | 其他数字 |
| null | 一直是false | |
| undefined | 一直是false | |
| 其他对象(包含{}[]) | 一直是true |
使用!!可以强制转换成boolean类型，原理是两次取非运算
let name = 'abc'; const hasName = !!name; // hasName的值为true
现在使用未来JavaScript的功能
TypeScript的主要卖点之一是，它允许您在当前的（ES3和ES5级别）JavaScript引擎（如当前的浏览器和Node.js）中使用ES6及更高版本的一系列功能。
类
使用类
类提供了一个有用的结构抽象
为开发人员提供了一种一致的方式来使用类，而不是使用每个框架（emberjs、reactjs等）来开发自己的版本。
面向对象开发人员已经了解了类。
class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } add(point: Point) { return new Point(this.x + point.x, this.y + point.y); } } var p1 = new Point(0, 10); var p2 = new Point(10, 20); var p3 = p1.add(p2); // {x:10,y:30}
继承(Inheritance)
TypeScript中的类支持使用extends关键字单一继承
父类构造函数使用super调用，父类方法使用super.方法名调用
class Point3D extends Point { z: number; constructor(x: number, y: number, z: number) { super(x, y); this.z = z; } add(point: Point3D) { var point2D = super.add(point); return new Point3D(point2D.x, point2D.y, this.z + point.z); } }
静态成员(Statics)
TypeScript类支持类的所有实例共享的static属性。放置和访问静态成员的自然位置是类本身。
class Something { static instances = 0; constructor() { Something.instances++; } } var s1 = new Something(); var s2 = new Something(); console.log(Something.instances); // 2
访问修饰符(Access Modifiers)
使用不同修饰符的属性或方法的可访问性：
| 可以访问的地方 | public | protected | private |
|---|---|---|---|
| 类(class) | yes | yes | yes |
| 子类(class children) | yes | yes | no |
| 类的实例(class instances) | yes | no | no |
未指定时默认为public
Abstract修饰符
抽象可以被认为是一个访问修饰符。我们将其单独呈现，因为与前面提到的修饰符不同，它可以在类上，也可以在类的任何成员上。
具有抽象修饰符主要意味着不能直接调用此类功能，并且必须由子类提供该功能。
抽象类不能直接实列化，抽象方法不能直接使用，必须在子类中实现后才能使用。
构造方法
构造方法不是必须的
构造方法的参数前可以加访问修饰符，对应的变量会自动在类内定义，可以在其他地方直接使用
class Foo { constructor(public x:number) { } }
可以在构造方法外进行变量初始化
class Foo { members = []; // 无构造函数直接初始化成员变量 add(x) { this.members.push(x); } }
箭头函数/Lambda函数
与函数型语言相比，JavaScript有必须频繁输入function的倾向。使用箭头函数可以简单地创建函数
var inc = (x)=>x+1;
箭头函数中的this代表周围上下文，不会因为调用者不同发生改变
function Person(age) { this.age = age; this.growOld = () => { this.age++; } } var person = new Person(1); setTimeout(person.growOld,1000); // 输出为2，如果不使用箭头函数输出为1 setTimeout(function() { console.log(person.age); },2000);
箭头函数的必要性
除了能得到简洁的语法之外，如果想让其他的东西调用函数的话，只要使用箭头函数就可以了。
var growOld = person.growOld; // Then later someone else calls it: growOld();
箭头函数可以继承
子类中使用this调用父类中的箭头函数
子类中使用this调用父类中的箭头函数 class Adder { constructor(public a: number) {} add = (b: number): number => { return this.a + b; } } class Child extends Adder { callAdd(b: number) { return this.add(b); } } // Demo to show it works const child = new Child(123); console.log(child.callAdd(123)); // 246
返回单一对象的箭头函数
var foo = () => ({ bar: 123 });
可变个数参数
参数个数不固定，剩余的参数会以数组的形式接收
function iTakeItAll(first, second, ...allOthers) { console.log(allOthers); } iTakeItAll('foo', 'bar'); // [] iTakeItAll('foo', 'bar', 'bas', 'qux'); // ['bas','qux']
let
JavaScript中的var定义的变量作用域为函数内
let定义的变量作用域为块内
var foo = 123; if (true) { var foo = 456; } console.log(foo); // 456 let foo = 123; if (true) { // 生成JS时发现重名会自动改名 let foo = 456; } console.log(foo); // 123
闭包时let使用的是变量的当时值，var使用最终值
var funcs = []; for (var i = 0; i < 3; i++) { funcs.push(function() { console.log(i); }) } for (var j = 0; j < 3; j++) { // 输出全部为3 funcs[j](); } var funcs = []; for (let i = 0; i < 3; i++) { // 这里使用的let funcs.push(function() { console.log(i); }) } for (var j = 0; j < 3; j++) { // 输出为0,1,2 funcs[j](); }
const
const是ES6/TypeScript提供的一个非常受欢迎的添加。它允许您对变量保持不变。从文档和运行时的角度来看，这都很好。
const foo = 123;
const声明常量时必须同时初始化，之后值不能改变
如果保存的是对象，对象的引用不能变，但是对象内的值可以变
const foo = { bar: 123 }; foo = { bar: 456 }; // 报错 foo.bar = 456; // 允许
const的作用域与let一致，都是块内
const foo = 123; if (true) { const foo = 456; // 允许定义块内使用的另一个foo }
解构
可以使用解构取出对象的部分属性或者数组的部分值
对象的解构
var rect = { x: 0, y: 10, width: 15, height: 20 }; var {x, y, width, height} = rect; console.log(x, y, width, height); // 0,10,15,20 rect.x = 10; ({x, y, width, height} = rect); // 使用外括号分配给现有变量 console.log(x, y, width, height); // 10,10,15,20
要将展开的变量分配给新变量名，请执行以下操作：
const obj = {"some property": "some value"}; const {"some property": someProperty} = obj; console.log(someProperty === "some value"); // true
也可以使用解构获取结构的深层数据
var foo = { bar: { bas: 123 } }; var {bar: {bas}} = foo; // 相当于: `var bas = foo.bar.bas;`
对象解构中使用Rest
可以拆出指定项目以外的其他项目作为一个单独的对象
var {w, x, ...remaining} = {w: 1, x: 2, y: 3, z: 4}; console.log(w, x, remaining); // 1, 2, {y:3,z:4}
数组的解构
var x = 1, y = 2; [x, y] = [y, x]; console.log(x, y); // 2,1
数组解构中使用Rest
可以拆出指定下标以外的其他项目作为一个单独的数组
var [x, y, ...remaining] = [1, 2, 3, 4]; console.log(x, y, remaining); // 1, 2, [3,4]
可以跳过不需要的下标
var [x, , ...remaining] = [1, 2, 3, 4]; console.log(x, remaining); // 1, [3,4]
展开运算符
把对象或数组的元素平铺展开
展开运算符是一种很好的语法，可以让JavaScript中常用的apply的this参数不必传递难以理解的null
另外，通过使用分割数组或代入其他数组的语法，可以用简单的代码对部分数组进行处理
对象的展开
展开时如果有同名，后面的值会覆盖前面的值
const point2D = {x: 1, y: 2}; const anotherPoint3D = {x: 5, z: 4, ...point2D}; console.log(anotherPoint3D); // {x: 1, y: 2, z: 4} const yetAnotherPoint3D = {...point2D, x: 5, z: 4} console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4} const foo = {a: 1, b: 2, c: 0}; const bar = {c: 1, d: 2}; const fooBar = {...foo, ...bar}; // `fooBar`: {a: 1, b: 2, c: 1, d: 2}
数组的带入
var list = [1, 2]; list = [...list, 3, 4]; console.log(list); // [1,2,3,4]
可以展开到任意位置
var list = [1, 2]; list = [0, ...list, 4]; console.log(list); // [0,1,2,4]
for...of
数组循环
var someArray = [9, 2, 5]; for (var item of someArray) { console.log(item); // 9,2,5 }
可以把字符串拆成字符
var hello = "is it me you're looking for?"; for (var char of hello) { console.log(char); // is it me you're looking for? }
限制
如果您的目标不是ES6或更高版本，则生成的代码假设对象上存在属性长度，并且可以通过数字（例如obj[2]）对对象进行索引。因此，对于这些遗留的JS引擎，它只在字符串和数组上受支持。
如果TypeScript可以看到你没有使用数组或字符串，它会给你一个明确的错误“不是数组类型或字符串类型”。
Iterator
它本身不是TypeScript或ES6的功能，而是面向对象编程语言中常见的“行为设计模式”。这通常是实现以下接口的对象：
interface Iterator<T> { next(value?: any): IteratorResult<T>; return?(value?: any): IteratorResult<T>; throw?(e?: any): IteratorResult<T>; } interface IteratorResult<T> { done: boolean; value: T; }
如果只实现Iterator接口，可以使用next方法遍历
如果只使用[Symbol.iterator]符号，可以使用for...of，但不能使用next方法遍历
如果实现TypeScript的IterableIterator接口，可以同时使用next方法和for...of
class Frame implements IterableIterator<Component> { private pointer = 0; constructor(public name: string, public components: Component[]) {} public next(): IteratorResult<Component> { if (this.pointer < this.components.length) { return { done: false, value: this.components[this.pointer++] } } else { return { done: true, value: null } } } [Symbol.iterator](): IterableIterator<Component> { return this; } }
迭代器不仅可以单纯返回元素，还可以用于递归计算，比如计算Fibonacci数列
class Fib implements IterableIterator<number> { protected fn1 = 0; protected fn2 = 1; constructor(protected maxValue?: number) {} public next(): IteratorResult<number> { var current = this.fn1; this.fn1 = this.fn2; this.fn2 = current + this.fn1; if (this.maxValue != null && current >= this.maxValue) { return { done: true, value: null } } return { done: false, value: current } } [Symbol.iterator](): IterableIterator<number> { return this; } } let fib = new Fib(); fib.next() //{ done: false, value: 0 } fib.next() //{ done: false, value: 1 } fib.next() //{ done: false, value: 1 } fib.next() //{ done: false, value: 2 } fib.next() //{ done: false, value: 3 } fib.next() //{ done: false, value: 5 } let fibMax50 = new Fib(50); console.log(Array.from(fibMax50)); // [ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ] let fibMax21 = new Fib(21); for(let num of fibMax21) { console.log(num); //Prints fibonacci sequence 0 to 21 }
模板文字
在语法上，字符串使用反引号（`）代替单引号（'）或双引号（“）。
字符串展开(String Interpolation)
${}中间可以是变量或表达式，最后生成的字符串会把实际的值进行代入
var lyrics = 'Never gonna give you up'; var html = `<div>${lyrics}</div>`; console.log(`1 and 1 make ${1 + 1}`);
多行文字
var lyrics = `Never gonna give you up Never gonna let you down`;
标记的模板
您可以在模板字符串之前放置一个函数（称为标记），这样它就有机会预处理模板字符串文字加上所有占位符表达式的值，并返回结果。
所有静态文字都作为第一个参数的数组传入。占位符表达式的所有值都作为剩余的参数传入。最常见的情况是，您只需要使用rest参数将这些参数转换为数组。
var say = "a bird in hand > two in the bush"; var html = htmlEscape `<div> I would just like to say : ${say}</div>`; // 您可以将占位符声明为任意类型的数组。TypeScript都会键入check，以确保用于调用标记的占位符与注释匹配。 // 例如，如果你希望处理字符串或数字：...placeholders:(string | number)[] function htmlEscape(literals: TemplateStringsArray, ...placeholders: string[]) { let result = ""; // 将文字与占位符交错 for (let i = 0; i < placeholders.length; i++) { result += literals[i]; result += placeholders[i] .replace(/&/g, '&') .replace(/"/g, '"') .replace(/'/g, ''') .replace(/</g, '<') .replace(/>/g, '>'); } // 追加最后的文字 result += literals[literals.length - 1]; return result; }
Promise
Promise类存在于许多时髦的JavaScript引擎中，可以轻松地polyfill。想使用Promise的理由是，对于异步/回调风格的代码，可以使用同步处理的写法处理错误。
Promise链
Promise的链条是使用Promise的最大优点。一旦取得Promise，从那个时候开始，可以使用then函数制作Promise的链。
如果您从链中的任何函数返回promise，那么只有在解析值后才会调用.then：
Promise.resolve(123) .then((res) => { console.log(res); // 123 return 456; }) .then((res) => { console.log(res); // 456 return Promise.resolve(123); // 返回resolve的Promise }) .then((res) => { console.log(res); // 123 : 使用resolve的值调用后面的.then return 123; })
可以将链前面部分的错误处理聚合为单个catch
Promise.reject(new Error('something bad happened')) .then((res) => { console.log(res); // 不会调用 return 456; }) .then((res) => { console.log(res); // 不会调用 return 123; }) .catch((err) => { console.log(err.message); // something bad happened });
catch实际上返回一个新的promise（有效地创建了一个新promise链）：
Promise.reject(new Error('something bad happened')) .then((res) => { console.log(res); // 不会调用 return 456; }) .catch((err) => { console.log(err.message); // something bad happened return 123; }) .then((res) => { console.log(res); // 123 })
在then（或catch）中抛出的任何同步错误都会导致返回的promise失败：
Promise.resolve(123) .then((res) => { throw new Error('something bad happened'); // 抛出同步错误 return 456; }) .then((res) => { console.log(res); // 不会调用 return Promise.resolve(789); }) .catch((err) => { console.log(err.message); // something bad happened })
对于给定的错误，只调用相关的（最近的尾部）catch（因为catch启动了一个新的promise链）。
Promise.resolve(123) .then((res) => { throw new Error('something bad happened'); // 抛出同步错误 return 456; }) .catch((err) => { console.log('first catch: ' + err.message); // something bad happened return 123; }) .then((res) => { console.log(res); // 123 return Promise.resolve(789); }) .catch((err) => { console.log('second catch: ' + err.message); // 不会调用 })
只有在前一个链中出现错误时才会调用catch：
Promise.resolve(123) .then((res) => { return 456; }) .catch((err) => { console.log("HERE"); // 不会调用 })
创建Promise
import fs = require('fs'); function readFileAsync(filename: string): Promise<any> { return new Promise((resolve,reject) => { fs.readFile(filename,(err,result) => { if (err) reject(err); else resolve(result); }); }); }
并行处理
Promise提供了一个静态Promise.all函数，您可以使用它来等待n个Promise完成，全部完成后才执行then。
let item1, item2; Promise.all([loadItem(1), loadItem(2)]) .then((res) => { // 响应内容为数组，与all里的Promise对应 [item1, item2] = res; console.log('done'); });
Promise提供了一个静态Promise.race函数，可以在多个Promise中的任意一个完成时就返回。
Promise.race([task1, task2]).then(function(value) { console.log(value); // "one" // 响应内容为最早完成的Promise任务的返回值 });
将回调函数转换为Promise
const delay = (ms: number) => new Promise(res => setTimeout(res, ms)); delay(1000) .then(() => { })
生成器
function *是用于创建生成器函数的语法。调用生成器函数将返回生成器对象。生成器对象遵循迭代器接口（即next、return和throw函数）。
生成器函数可用于创建惰性迭代器
function* idMaker(){ let index = 0; while(index < 3) yield index++; } let gen = idMaker(); console.log(gen.next()); // { value: 0, done: false } console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // { value: 2, done: false } console.log(gen.next()); // { done: true }
外部控制执行
本质上，函数可以暂停其执行，并将剩余函数执行的控制（命运）传递给调用方。
function* generator(){ console.log('Execution started'); yield 0; console.log('Execution resumed'); yield 1; console.log('Execution resumed'); } var iterator = generator(); console.log('Starting iteration'); // 它在生成器函数的主体之前运行 console.log(iterator.next()); // { value: 0, done: false } console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: undefined, done: true }
当为生成器对象调用next时，函数只执行一次
函数在yield语句出现时立即暂停
函数在next被调用时重新启动
yield暂停生成器函数的通信，允许将控制传递到函数外部
可以从外部向生成器函数主体发送值
从外部，可以对生成器函数主体抛出异常
function* generator() { var bar = yield 'foo'; // bar可以是any类型 console.log(bar); // bar! } const iterator = generator(); // 开始执行，直到我们获得第一个输入值 const foo = iterator.next(); console.log(foo.value); // foo // 传入'bar'再执行 const nextThing = iterator.next('bar'); function* generator() { try { yield 'foo'; } catch(err) { console.log(err.message); // bar! } } var iterator = generator(); // 开始执行，直到我们获得第一个输入值 var foo = iterator.next(); console.log(foo.value); // foo // 继续执行抛出异常 var nextThing = iterator.throw(new Error('bar'));
async await
如果Promise使用了await关键字，则暂停执行JavaScript代码。然后，仅当从该函数返回的Promise完成时，代码才重新开始执行。
如果Promise成功，await返回响应内容
如果Promise失败，抛出可以同步处理的异常
async function foo() { try { var val = await getMeAPromise(); console.log(val); } catch(err) { console.log('Error: ', err.message); } }
在异步函数的开头使用async关键字，async函数总是返回Promise
function delay(milliseconds: number, count: number): Promise<number> { return new Promise<number>(resolve => { setTimeout(() => { resolve(count); }, milliseconds); }); } async function dramaticWelcome(): Promise<void> { console.log("Hello"); for (let i = 0; i < 5; i++) { const count:number = await delay(500, i); console.log(count); } console.log("World!"); } dramaticWelcome();
