--- theme: smartblue --- > 基于之前[【TypeScript历险记】](https://juejin.cn/post/6854573204862992392)文章，结合 [TypeScript](https://www.tslang.cn/docs/home.html) 官网开发手册指南，重新简要概括在学习过程中的**重点难点**。 > > 致力于以下几点： > > 1. 一文扫清 TypeScript 官网开发手册指南。 > 2. 内容简洁、重点。 > 3. 排版清晰、一目了然。 > 4. 重构语句、语句使之顺畅。 **因字数限制，分为上下两篇。** （结尾附跳转） # 介绍 typeScript 是 javaScript 的超集：TypeScript = JavaScript + type + (some other stuff) 其他特性 [typescript中文文档](https://www.tslang.cn/docs/home.html?_blank) ## 特性 - 面向对象（prototype、Function、Object） - Class interface - 类型检查（静态类型、强类型） - typeScript 编译成 javaScript时便检查（提前避免bug） - 参数自带文档内容 - IDE或者是编译工具的良好支持（自动完成提示） ## 环境 - 创建typeScript-demo文件 -> index.ts文件 - 全局安装typeScript >npm install typescript -g - 编译typeScript代码文件 >tsc index.ts -> 产生编译后的index.js文件 - tsc -w index.ts -> 会自动编译代码 --- # 基础类型 - boolean：true/false ```js let isDone: boolean = false; ``` - number：TS 里所有数字都是浮点数，支持二进制、八进制、十进制、十六进制字面量 ```js let decLiteral: number = 6; let hexLiteral: number = 0xf00d; let binaryLiteral: number = 0b1010; let octalLiteral: number = 0o744; ``` - string：文本数据类型，包括模版字符串格式`${}`。 ```js let name: string = "bob"; ``` - array：有两种方式定义数组元素。 ```js // 第一种：直接在元素类型后面接上`[]`。 let list: number[] = [1, 2, 3]; // 第二种：数组泛型 let list: Array = [1, 2, 3]; let list: number[] = [1, 2, 3]; ``` - tuple：元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 ```js let x: [string, number]; // 有严格顺序要求 x = ['hello', 10]; // OK x = [10, 'hello']; // Error ``` > 当访问一个越界的元素时，会使用**联合类型**替代，联合类型是高级主题，会在以后的章节里进行学习。 ```js // 该例子中联合类型为 (string | number) 类型 x[3] = 'world'; // 正确 console.log(x[5].toString()); // 正确 x[6] = true; // 错误，联合类型无 boolean ``` - enum：枚举类型对 JavaScript 标准数据类型的一个补充，可以为一组数值赋予友好的名字。 > 利用友好有且意义可读性的字符串更方便操作处理数据。 ```js enum Color {Red, Green, Blue} let c: Color = Color.Green; ``` > 可对枚举进行元素编号，默认从 0 开始，也可以手动指定成员编号。 ```js enum Color {Red = 1, Green, Blue} let colorName: string = Color[2]; // 显示'Green'，因为给 Red 手动编号为 1. ``` - any：任意类型，比如来自用户输入或第三方代码库的动态数据内容，只知道部分数据的类型，或对数据类型并未知的情况，而不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 ```js let notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // 三种基础类型都通过 // 数组内元素均为any let list: any[] = [1, true, "free"];; ``` > 可以利用 typeof 来判断数据类型来处理操作 - void：表示没有任何类型。通过用于一个函数没有返回值的情况。 ```js function warnUser(): void { console.log("This is my warning message"); } ``` > 如果直接声明一个`void`类型的变量没有什么用，只能赋予它`null`和`undefined`。 - null 和 undefined：两者各自有自己的类型分别叫做`undefined`和`null`。 ```js let u: undefined = undefined; let n: null = null; ``` > 当指定了`--strictNullChecks`标记（默认关闭），`null`和`undefined`只能赋值给`void`和它们各自，这能避免很多常见的问题。 - never：表示永不存在的值的类型。例如抛出异常情况、根本不会有返回值的函数、执行无终点或变量被永不为真的类型保护所约束时 ```js // 返回never的函数必须存在无法达到的终点 function error(message: string): never { throw new Error(message); } // 推断的返回值类型为never function fail() { return error("Something failed"); } // 返回never的函数必须存在无法达到的终点 function infiniteLoop(): never { while (true) { } } ``` > `never`类型是任何类型的子类型，可以赋值给任何类型； > > 没有类型是`never`的子类型或可以赋值给`never`类型（除了`never`本身之外）。即使 `any`也不可以赋值给`never`。 - object：表示非原始类型，也就是基础类型之外的复杂类型。 ```js // 声明函数类型为对象和null，无返回值。 declare function create(o: object | null): void; create({ prop: 0 }); // OK create(null); // OK create(42); // Error create("string"); // Error create(false); // Error create(undefined); // Error ``` - 类型断言：清楚地知道一个实体具有比它现有类型更确切的类型，不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。类型断言有两种形式： ```js // “尖括号”语法 let someValue: any = "this is a string"; let strLength: number = (someValue).length; // 确定 someValue 一定为 string // as 语法 let someValue: any = "this is a string"; let strLength: number = (someValue as string).length; ``` > 两种形式是等价的。但在TypeScript里使用JSX时，只能用 `as`语法断言。 - let：TypeScript 实现 javaScript 该新特性，因为很多历史原因等，尽可能地使用 `let`。 # 变量声明简单 let 和 var，let 和 const 的特性与区别，不是重点。 ## 解构 ### 数组 - 数组变量基础解构 ```js let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 console.log(second); // outputs 2 ``` - 函数参数 ```js function f([first, second]: [number, number]) { console.log(first); console.log(second); } f(input); ``` ### 对象 - 对象变量基础解构 ```js let o = { a: "foo", b: 12, c: "bar" }; let { a, b } = o; ``` - 属性重命名 ```js let { a: newName1, b: newName2 } = o; // 等同如下 let newName1 = o.a; let newName2 = o.b; ``` > 这里的冒号*不是*指示类型的。如果你想指定它的类型，仍然需要在其后写上完整的模式。 ```js let {a, b}: {a: string, b: number} = o; ``` ### 函数 - 函数声明 ```js // 声明类型 C type C = { a: string, b?: number } function f({ a, b }: C): void { // ... } ``` 通常使用指定默认值，同样也需要做声明类型 ```js // 表示 a，b 可选，且有默认值 function f({ a="", b=0 } = {}): void { // ... } f(); // 表示 a，b 可选，且都有默认值，但不可传入无 a 的对象。 function f1({ a, b = 0 } = { a: "" }): void { // ... } f1({ a: "yes" }); // ok, default b = 0 f1(); // ok, default to {a: ""}, which then defaults b = 0 f1({}); // error, 'a' is required if you supply an argument ``` ## 展开 ### 数组 - 数组变量基础展开 ```js let first = [1, 2]; let second = [3, 4]; let bothPlus = [0, ...first, ...second, 5]; ``` ### 对象 - 对象变量基础展开 ```js let defaults = { food: "spicy", price: "$$", ambiance: "noisy" }; let search = { ...defaults, food: "rich" }; ``` > 注意对象展开回属性覆盖，search 覆盖 defaults。 - 仅可展开对象自身的可枚举属性 ```js class C { p = 12; m() { } } let c = new C(); let clone = { ...c }; clone.p; // 12 clone.m(); // error! ``` ### 函数 TypeScript 编译器**不允许展开泛型函数上的类型参数**，这个特性会在 TypeScript 的未来版本中考虑实现。 # 接口在TypeScript里，接口的作用是为了“鸭子类型”、“结构性子类型化”、你的代码或第三方代码定义契约。 ## 基础接口 ```ts interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); ``` > 类型检查器不会去检查属性的顺序，即便传入参数与接口声明顺序不一致也无关紧要。 ## 可选属性 - 可选属性的接口在定义后加一个 `?` 符号即可。 ```ts interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): {color: string; area: number} { let newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare; } let mySquare = createSquare({color: "black"}); ``` ## 只读属性属性只能可读而不允许修改 ```ts interface Point { readonly x: number; readonly y: number; } let p1: Point = { x: 10, y: 20 }; p1.x = 5; // error! ``` > `readonly` 与`const`，做为变量使用的话用 `const`，若做为属性则使用`readonly`。 ## 额外的属性检查 - 但传入参数并未在接口声明中出现，则会额外检查出错误。 ```ts interface SquareConfig { color?: string; width?: number; } function createSquare(config: SquareConfig): { color: string; area: number } { } // SquareConfig 接口并未声明 colour 属性，报错 error: 'colour' not expected in type 'SquareConfig' let mySquare = createSquare({ colour: "red", width: 100 }); ``` - 若你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。我们可以添加一个字符串索引签名： ```ts interface SquareConfig { color?: string; width?: number; [propName: string]: any; } ``` - 可以使用**类型断言**，绕开检查。 ```ts let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig); // 自定义代码类型，无需检查。 ``` - 将这个对象赋值给一个另一个变量，而不是传入。因为接口只定义了 `createSquare` 函数， `squareOptions`不会经过额外属性检查，所以编译器不会报错。 ```ts let squareOptions = { colour: "red", width: 100 }; let mySquare = createSquare(squareOptions); ``` ## 函数类型 - 除了描述带有属性的普通对象外，接口也可以描述函数类型。 ```ts // 为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 interface SearchFunc { (source: string, subString: string): boolean; } ``` - 对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。但函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。 ```ts let mySearch: SearchFunc; mySearch = function(src: string, sub: string): boolean { let result = src.search(sub); return result > -1; } ``` ## 可索引类型 - 可索引类型具有一个**索引签名**，它描述了对象索引的类型，还有相应的索引返回值类型。 ```ts interface StringArray { [index: number]: string; } let myArray: StringArray; myArray = ["Bob", "Fred"]; let myStr: string = myArray[0]; ``` > 这个索引签名表示了当用 `number`去索引`StringArray`时会得到`string`类型的返回值。 - 字符串索引签名能够很好的描述`dictionary`模式，确保所有属性与其返回值类型相匹配。 ```ts interface NumberDictionary { [index: string]: number; length: number; // 可以，length是number类型 name: string // 错误，属性类型必须与索引类型返回值匹配 } ``` > 因为字符串索引声明了 `obj.property`和`obj["property"]`两种形式都可以。 - 将索引签名设置为只读，防止了给索引赋值。 ```ts interface ReadonlyStringArray { readonly [index: number]: string; } let myArray: ReadonlyStringArray = ["Alice", "Bob"]; myArray[2] = "Mallory"; // error! ``` ## 类类型 - 明确的强制一个类去符合某种契约。 ```ts interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } } ``` > 接口不会帮你检查类是否具有某些私有成员，因此只描述了类的公共部分，而不是公共和私有两部分。 - 类的静态部分与实例部分的区别在于，一个类实现了一个接口时，只对其实例部分进行类型检查，类静态部分不在检查的范围内，如 `constructor`。 ```ts interface ClockConstructor { new (hour: number, minute: number); } class Clock implements ClockConstructor { currentTime: Date; constructor(h: number, m: number) { } } ``` > 我们应该直接操作类的静态部分。 ```ts // 构造函数接口，需要 hour 与 minute。 interface ClockConstructor { new (hour: number, minute: number): ClockInterface; } // 实例方法接口 interface ClockInterface { tick(); } // 构造函数，用传入类创建实例 function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface { return new ctor(hour, minute); } // 只对实例部分进行类型检查 class DigitalClock implements ClockInterface { constructor(h: number, m: number) { } tick() { console.log("beep beep"); } } class AnalogClock implements ClockInterface { constructor(h: number, m: number) { } tick() { console.log("tick tock"); } } // 这样就会检查传入对象是否符合类的构造函数签名 let digital = createClock(DigitalClock, 12, 17); let analog = createClock(AnalogClock, 7, 32); ``` ## 继承接口 - 和类一样，接口也可以相互继承，可以更灵活地将接口分割到可重用的模块里。也可以一个接口可以继承多个接口，创建出多个接口的合成接口。 ```ts interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; } let square = {}; square.color = "blue"; square.sideLength = 10; square.penWidth = 5.0; ``` ## 混合类型 - 接口之所以能够描述 JavaScript 里丰富的类型，是因为 JavaScript 其动态灵活的特点。而有时你会希望一个对象可以同时具有上面提到的多种类型。 ```ts // 一个对象可同时作为函数和对象使用，并待用额外属性（start）。 interface Counter { (start: number): string; interval: number; reset(): void; } function getCounter(): Counter { let counter = function (start: number) { }; counter.interval = 123; counter.reset = function () { }; return counter; } let c = getCounter(); c(10); c.reset(); c.interval = 5.0; ``` ## 接口继承类 - 当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 - 接口同样会继承到类的private和protected成员。 > 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。 ```ts class Control { private state: any; } // 接口继承类，包含 Control 所有成员。 interface SelectableControl extends Control { select(): void; } // 因为 state 私有属性，只有 Control 的子类才能声明 state。因此只有 Control 的子类才能示爱谢娜 SelectableControl 接口。 class Button extends Control implements SelectableControl { select() { } } class TextBox extends Control { select() { } } // 非 Control 子类，缺少定义 state 属性，因此不能实现接口。 class Image implements SelectableControl { select() { } } ``` > 实际上， `SelectableControl`接口和拥有`select`方法的`Control`类是一样的。 # 函数函数是 JavaScript 应用程序的基础，用于实现抽象层，模拟类，信息隐藏和模块。在 TypeScript 里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义**行为**的地方，因此 TypeScript 为 JavaScript 函数添加了额外的功能，让我们可以更容易地使用。 ## 函数类型 - 函数声明一般有两种方式 ```ts // 命名函数 function add(x, y) { return x + y; } // 匿名函数 let myAdd = function(x, y) { return x + y; }; ``` - 函数定义类型：参数类型和返回值类型。 ```ts function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; }; ``` > 书写完整函数类型 ```ts let myAdd: (baseValue: number, increment: number) => number = function(x: number, y: number): number { return x + y; }; ``` > 函数的返回值类型使用( `=>`)符号分割，如果函数没有返回任何值，你也必须指定返回值类型为 `void`而不能留空。 > > 函数的类型只是由参数类型和返回值组成的，函数中使用的捕获变量不会体现在类型里。这些变量实际上是函数的隐藏状态并不是组成API的一部分。 - 推断类型：在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript 编译器会自动识别出类型 ```ts let myAdd = function(x: number, y: number): number { return x + y; }; let myAdd: (baseValue: number, increment: number) => number = function(x, y) { return x + y; }; // 通过推断类型进行完整函数书写 let myAdd: (baseValue: number, increment: number) => number = function(x: number, y: number): number { return x + y; }; ``` ## 可选参数和默认参数 - TypeScript 中传递给一个函数的参数个数必须与函数期望的参数个数一致，而JavaScript里，每个参数都是可选的。因此 TypeScript 可在参数名使用 `?`实现可选参数的功能。 ```ts function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } let result1 = buildName("Bob"); // 正确 let result2 = buildName("Bob", "Adams", "Sr."); // 报错，仅接收两个参数 let result3 = buildName("Bob", "Adams"); // 正确 ``` > 请注意：**可选参数必须跟在必须参数后面。** - 当用户没有传递这个参数或传递的值是`undefined`时，TypeScript 也可以为参数提供一个默认值。 ```ts // 给 lastName 提供一个默认值为 Smith function buildName(firstName: string, lastName = "Smith") { return firstName + " " + lastName; } ``` > 在所有必须参数后面的带默认初始化的参数都是可选的，并且可选参数与末尾的默认参数共享参数类型，默认参数也无需跟在必须参数后面 ## 剩余参数 - 在函数中，想同时操作多个参数，或并不知道会有多少参数传递进来。在 TS 中，你可以把所有参数收集到一个变量里。 > 在JavaScript里，你可以使用 `arguments`来访问所有传入的参数。 ```ts // 剩余参数会被当做个数不限的可选参数。 function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie"); ``` - 略号也会在带有剩余参数的函数类型定义上使用到 ```ts function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let buildNameFun: (fname: string, ...rest: string[]) => string = buildName; ``` ## this - `this`的值在函数被调用的时候才会指定函数上下文中的内容。 - 箭头函数可保存函数创建时的 `this` 值，而不是调用时的值： ```ts let deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { // 箭头函数保留 this 值，可找到 suits 变量 return () => { let pickedCard = Math.floor(Math.random() * 52); let pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } } } let cardPicker = deck.createCardPicker(); let pickedCard = cardPicker(); alert("card: " + pickedCard.card + " of " + pickedCard.suit); ``` - 当设置了`--noImplicitThis`标记。它会指出 `this.suits[pickedSuit]`里的`this`的类型为`any` 的错误。因为 `this`来自对象字面量里的函数表达式，默认为 `any` 修改的方法是，提供一个显式的 `this`参数。 ```ts interface Card { suit: string; card: number; } interface Deck { suits: string[]; cards: number[]; createCardPicker(this: Deck): () => Card; } let deck: Deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), // 显示 this 参数让 TypeScript 识别该函数的 this 是 Deck 类型，而非 any，这样就不会报错。 createCardPicker: function(this: Deck) { return () => { let pickedCard = Math.floor(Math.random() * 52); let pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } } } let cardPicker = deck.createCardPicker(); let pickedCard = cardPicker(); alert("card: " + pickedCard.card + " of " + pickedCard.suit); ``` - `this` 参数在回调函数中，将被当成普通函数调用为 undefined，我们可以通过 `this` 参数来避免错误。 ```ts // 首先指定该回调 this 类型 interface UIElement { addClickListener(onclick: (this: void, e: Event) => void): void; } class Handler { info: string; // addClickListener 要求回调函数带有 this: void onClickGood(this: void, e: Event) { console.log('clicked!'); } } let h = new Handler(); uiElement.addClickListener(h.onClickGood); // 如果希望在回调函数中使用 this，使用箭头函数。 class Handler { info: string; onClickGood = (e: Event) => { this.info = e.message } } ``` > 箭头函数不会捕获 `this`，但缺点是每个 `Handler` 对象都会创建一个箭头函数，不能像方法添加到 Handler 的原型链上进行共享。 ## 重载 - JavaScript 是个动态语言，函数会根据传入不同的参数而返回不同类型的数据。 ```ts let suits = ["hearts", "spades", "clubs", "diamonds"]; // 接收对象参数 function pickCard(x: {suit: string; card: number; }[]): number; // 重载进行接收数字参数 function pickCard(x: number): {suit: string; card: number; }; // 不是重载列表的一部分！！是具体实现 function pickCard(x): any { if (typeof x == "object") { let pickedCard = Math.floor(Math.random() * x.length); return pickedCard; } // Otherwise just let them pick the card else if (typeof x == "number") { let pickedSuit = Math.floor(x / 13); return { suit: suits[pickedSuit], card: x % 13 }; } } let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }]; let pickedCard1 = myDeck[pickCard(myDeck)]; alert("card: " + pickedCard1.card + " of " + pickedCard1.suit); let pickedCard2 = pickCard(15); alert("card: " + pickedCard2.card + " of " + pickedCard2.suit); ``` > 为同一个函数提供多个函数类型定义来进行函数重载。编译器会根据这个列表去处理函数的调用。 > > 而为了让编译器能够选择正确的检查类型，它与 JavaScript 里的处理流程相似。查找重载列表时，会尝试使用第一个顺序重载定义因此，在定义重载的时候，一定要把最精确的定义放在最前面。 # 泛型当考虑 API 良好的可重用性时，可以使用`泛型`来创建可重用的组件，一个组件可以支持多种类型的数据。躺用户可以以自己的数据类型来使用组件。 ## 基础 - 定义一个函数，会返回任何传入它的值。 > 添加了类型变量 T。 T 帮助我们捕获用户传入的类型，之后我们就可以使用这个类型。如使用了 T 当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了，这允许我们跟踪函数里使用的类型的信息。 ```ts // 使用了类型变量，它是一种特殊的变量，只用于表示类型而不是值，可以适用于多个类型。 function identity(arg: T): T { return arg; } ``` > 使用`any`类型会导致函数可以接收任何类型参数，这样便无法约束函数的输入与输出。如我们传入一个数字，我们只知道任何类型的值都有可能被返回。 - 定义泛型后有两种使用方法 ```ts // 传入类型参数 let output = identity("myString"); // 类型推论：编译器会根据传入的参数自动地帮助我们确定 T 的类型，保持代码精简和高可读性。 let output = identity("myString"); ``` ## 使用泛型变量 - 使用泛型时，编译器要求你在函数体必须正确的使用这个通用的类型。 ```ts function identity(arg: T): T { return arg; } // 编译器识别不到有地方指明 `arg` 具有 `length` 属性。 function loggingIdentity(arg: T): T { console.log(arg.length); // Error: T doesn't have .length return arg; } // 指明我们操作 T 类型的数组 function loggingIdentity(arg: Array): Array { console.log(arg.length); // Array has a .length, so no more error return arg; } ``` ## 泛型类型 - 泛型函数的类型与非泛型函数的类型没什么不同，也可以使用不同的泛型参数名，只要能一一对应上就可以。 ```ts function identity(arg: T): T { return arg; } let myIdentity: (arg: U) => U = identity; ``` - 使用带有调用签名的对象字面量来定义泛型函数 ```ts function identity(arg: T): T { return arg; } let myIdentity: {(arg: T): T} = identity; ``` - 泛型接口，如上边对象字面量为例。 ```ts // 可以把泛型参数当作整个接口的一个参数，就能清楚的知道是哪个泛型类型 interface GenericIdentityFn { (arg: T): T; } function identity(arg: T): T { return arg; } let myIdentity: GenericIdentityFn = identity; ``` ## 泛型类 - 泛型类看上去与泛型接口差不多，使用（ `<>`）括起泛型类型，跟在类名后面。 ```ts class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; } // 使用 number let myGenericNumber = new GenericNumber(); myGenericNumber.zeroValue = 0; myGenericNumber.add = function(x, y) { return x + y; }; // 使用 string let stringNumeric = new GenericNumber(); stringNumeric.zeroValue = ""; stringNumeric.add = function(x, y) { return x + y; }; console.log(stringNumeric.add(stringNumeric.zeroValue, "test")); ``` > 类有两部分：静态部分和实例部分。泛型类指的是实例部分的类型，所以类的静态属性不能使用这个泛型类型。 ## 泛型约束 - 因为使用泛型时，编译器需要你在函数体中必须正确的使用这个通用的类型。相比于操作 any 所有类型，我们想要限制函数去处理带有某个属性的的所有类型，也就是对泛型的约束要求。 ```ts interface Lengthwise { length: number; } function loggingIdentity(arg: T): T { console.log(arg.length); return arg; } loggingIdentity(3); // 错误，要有 length 属性 loggingIdentity({length: 10, value: 3}); ``` - 当我们在泛型约束中使用类型参数时。 > 比如，现在我们想要用属性名从对象里获取这个属性。并且我们想要确保这个属性存在于对象 `obj`上。 ```ts function getProperty(obj: T, key: K) { return obj[key]; } let x = { a: 1, b: 2, c: 3, d: 4 }; getProperty(x, "a"); // okay getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'. ``` - 在TypeScript使用泛型创建工厂函数时，需要引用构造函数的类类型。 ```ts function create(c: {new(): T; }): T { return new c(); } ``` > 使用原型属性推断并约束构造函数与类实例的关系。 ```ts class ZooKeeper { nametag: string; } class Animal { numLegs: number; } class Lion extends Animal { keeper: ZooKeeper; } // 泛型 A 为继承 Animal 的类类型，并传入一个构造函数（该构造函数返回泛型A），createInstance 返回泛型 A。 function createInstance(c: new () => A): A { return new c(); } createInstance(Lion).keeper.nametag; // typechecks! ``` - **泛型无法创建泛型枚举和泛型命名空间。** # 类型推论 ## 基础 - TypeScript 推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时。 ```ts let x1 = 3; let x2 = '3'; let x3 = true; let x4 = []; let x5 = {}; ``` - 当需要从几个表达式中推断类型时候，会使用这些表达式的类型来推断出一个最合适的通用类型。 ```ts // 将会推断 `number` 和 `null` 的联合类型 let x = [0, 1, null]; ``` - 当候选类型并无我们想定义的类型时，我们可明确指出类型。 ```ts // 推断为 Animal[] 类型 let zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()]; ``` > 若无明确类型，类型推断结果为联合组类型 —— (Rhino | Elephant | Snake)[] ## 上下文类型 - 上下文归类会发生在表达式的类型与所处的位置相关时。 ```ts window.onmousedown = function(mouseEvent) { console.log(mouseEvent.button); //<- Error }; ``` > 右边函数表达式未明确指出 `mouseEvent` 参数类型，TypeScript 类型检查器根据上下文使用`Window.onmousedown`函数的类型来进行推断，故导致错误。 > > 可以指明 `mouseEvent` 拥有该 `button` 属性。 - 如果上下文类型表达式包含了明确的类型信息，上下文的类型被忽略。 ```ts window.onmousedown = function(mouseEvent: any) { console.log(mouseEvent.button); // 此时 any 不会报错 }; ``` - 上下文归类会在很多情况下使用到，包含函数的参数，赋值表达式的右边，类型断言，对象成员和数组字面量和返回值语句。 - 上下文类型也会做为最佳通用类型的候选类型。 ```ts function createZoo(): Animal[] { return [new Rhino(), new Elephant(), new Snake()]; } ``` > 最佳通用类型有4个候选者：`Animal`，`Rhino`，`Elephant`和`Snake`。 `Animal`会被做为最佳通用类型。 # 类型兼容性 TypeScript里的类型兼容性是基于结构子类型的，而结构类型是一种只使用其成员来描述类型的方式。 > 因为JavaScript里广泛地使用匿名对象，例如函数表达式和对象字面量，所以使用结构类型系统来描述这些类型比使用名义类型系统更好。 ## 基础 - TypeScript结构化类型系统的基本规则是，如果`x`要兼容`y`，那么`y`至少具有与`x`相同的属性。 ```ts interface Named { name: string; } let x: Named; // y 的类型根据推断为 { name: string; location: string; } let y = { name: 'Alice', location: 'Seattle' }; x = y; // 函数参数类型兼容 function greet(n: Named) { console.log('Hello, ' + n.name); } greet(y); // OK ``` > 这个比较过程是递归进行的，检查每个成员及子成员。当检查到目标类型的成员时，则类型兼容。 ## 函数函数类型兼容性比较原始类型和对象类型相对难理解一些。 - 函数能否类型兼容需要注意两个地方，一个是参数列表，另一个是返回值类型。 ```ts // 参数列表中形参名字无所谓，只看类型 let x = (a: number) => 0; let y = (b: number, s: string) => 0; // y 兼容 x，x 不兼容 y y = x; // OK x = y; // Error // 返回类型也一样 let x = () => ({name: 'Alice'}); let y = () => ({name: 'Alice', location: 'Seattle'}); x = y; // OK y = x; // Error, because x() lacks a location property ``` - 比较函数兼容性的时候，可选参数与必须参数是可互换的。 ```ts function invokeLater(args: any[], callback: (...args: any[]) => void) { /* ... Invoke callback with 'args' ... */ } // 传入必须参数可兼容 invokeLater([1, 2], (x, y) => console.log(x + ', ' + y)); // 传入可选参数也可兼容 invokeLater([1, 2], (x?, y?) => console.log(x + ', ' + y)); ``` > 当一个函数有剩余参数时，它被当做无限个可选参数。 - 重载函数，源函数的每个重载都要在目标函数上找到对应的函数签名，进行确保目标函数可以在所有源函数可调用的地方调用。 ## 枚举 - 枚举类型与数字类型兼容，并且数字类型与枚举类型兼容。 - 不同枚举类型之间是不兼容的。 ```ts enum Status { Ready, Waiting }; enum Color { Red, Blue, Green }; let status = Status.Ready; status = Color.Green; // 不兼容 ``` ## 类 - 类有静态部分和实例部分的类型，比较两个类类型的对象时，只有实例的成员会被比较，静态成员和构造函数不在比较的范围内。 ```ts class Animal { feet: number; constructor(name: string, numFeet: number) { } } class Size { feet: number; constructor(numFeet: number) { } } let a: Animal; let s: Size; a = s; // OK s = a; // OK ``` - 当检查类实例的兼容时，如果目标类型包含一个私有/保护成员，那么源类型必须包含来自同一个类的这个私有/报错成员。这允许子类赋值给父类，但是不能赋值给其它有同样类型的类。 ## 泛型 - TypeScript是结构性的类型系统，类型参数只影响使用其做为类型一部分的结果类型。 ```ts interface Empty { } let x: Empty; let y: Empty; x = y; // x和y是兼容的，因为它们的结构使用类型参数时并没有什么不同。 ``` - 函数泛型类型的泛型参数也一样，没指定时当作 `any` 进行比较 ```ts let identity = function(x: T): T { // ... } let reverse = function(y: U): U { // ... } identity = reverse; // OK, because (x: any) => any matches (y: any) => any ``` ## 其他 - 在TypeScript里，有两种兼容性：子类型和赋值。它们的不同点在于，赋值扩展了子类型兼容性，增加了一些规则，允许和`any`来回赋值，以及`enum`和对应数字值之间的来回赋值。 - 语言里的不同地方分别使用了它们之中的机制。实际上，类型兼容性是由赋值兼容性来控制的，即使在`implements`和`extends`语句也不例外。 # 高级类型 ## 交叉类型 - 交叉类型是将多个类型合并为一个类型，包含了所需的所有类型的特性。 ```ts // 交叉泛型 T 和 U function extend(first: T, second: U): T & U { let result = {}; for (let id in first) { (result)[id] = (first)[id]; } for (let id in second) { if (!result.hasOwnProperty(id)) { (result)[id] = (second)[id]; } } return result; } class Person { constructor(public name: string) { } } interface Loggable { log(): void; } class ConsoleLogger implements Loggable { log() { // ... } } // 包含两个类型特征 var jim = extend(new Person("Jim"), new ConsoleLogger()); var n = jim.name; jim.log(); ``` > 大多是在混入（mixins）或其它不适合典型面向对象模型的地方看到交叉类型的使用。 ## 联合类型 - 可以使用联合类型来指定多种基础类型。 ```ts // padding 为 string 和 number 的联合类型 function padLeft(value: string, padding: string | number) { // ... } let indentedString = padLeft("Hello world", true); // 报错，因为不在联合类型中 ``` > 联合类型表示一个值可以是几种类型之一。用竖线（ `|`）分隔每个类型， `number | string | boolean`表示一个值可以是 `number`， `string`，或 `boolean`。 - 如果一个值是联合类型，只能访问此联合类型的所有类型里共有的成员。 ```ts interface Bird { fly(); layEggs(); } interface Fish { swim(); layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正确, 因为 layEggs 是共有成员 pet.swim(); // errors ``` > 如果一个值的类型是 `A | B`，我们能够 *确定*的是它包含了 `A` *和* `B`中共有的成员。 ## 类型保护与区别类型 - 联合类型适合于那些值可以为不同类型的情况，当我们需要确切了解是否为某个类型时，可以使用类型断言来指定类型。 ```ts let pet = getSmallPet(); // 指定 Fish 类型中有 swim if ((pet).swim) { (pet).swim(); } else { // 指定 Bird 类型中有 fly (pet).fly(); } ``` - 为了判断具体类型，需要重复使用类型断言，假若一旦检查过类型，就能在之后的每个分支里指定类型，也就是类型保护，它们会在运行时检查以确保在某个作用域里的类型。 ```ts // 类型保护的返回值是一个类型谓词 function isFish(pet: Fish | Bird): pet is Fish { return (pet).swim !== undefined; } // 调用 isFish 时，TypeScript 会将变量缩减为那个具体的类型 if (isFish(pet)) { pet.swim(); } else { // else 分支中此时一定是 Bird 类型 pet.fly(); } ``` > `pet is Fish`就是类型谓词。谓词为 `parameterName is Type`这种形式， `parameterName`必须是来自于当前函数签名里的一个参数名（Fish 或 Bird）。 - `typeof` 类型保护，可以直接在代码里检查原始类型，不用一直进行类型谓词。 ```ts function isNumber(x: any): x is number { return typeof x === "number"; } function isString(x: any): x is string { return typeof x === "string"; } // typeof 类型保护等同上述类型谓词 function padLeft(value: string, padding: string | number) { if (typeof padding === "number") { return Array(padding + 1).join(" ") + value; } if (typeof padding === "string") { return padding + value; } throw new Error(`Expected string or number, got '${padding}'.`); } ``` > `typeof`类型保护只有两种形式能被识别： > > - `typeof v === "typename"` > - `typeof v !== "typename"`` > > ``"typename"`必须是 `"number"`， `"string"`， `"boolean"`或 `"symbol"`。 > > 但是TypeScript并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。 - `instanceof` 类型保护，通过构造函数来细化类型的一种方式。 ```ts interface Padder { getPaddingString(): string } class SpaceRepeatingPadder implements Padder { constructor(private numSpaces: number) { } getPaddingString() { return Array(this.numSpaces + 1).join(" "); } } class StringPadder implements Padder { constructor(private value: string) { } getPaddingString() { return this.value; } } function getRandomPadder() { return Math.random() < 0.5 ? new SpaceRepeatingPadder(4) : new StringPadder(" "); } // 返回类型可能为 SpaceRepeatingPadder | StringPadder let padder: Padder = getRandomPadder(); if (padder instanceof SpaceRepeatingPadder) { padder; // 类型细化为'SpaceRepeatingPadder' } if (padder instanceof StringPadder) { padder; // 类型细化为'StringPadder' } ``` > `instanceof`的右侧要求是一个构造函数，TypeScript将细化为： > > 1. 如果它的类型不为 `any`的话，就为此构造函数的 `prototype`属性的类型 > 2. 构造签名所返回的类型的联合 ## NULL 类型 - TypeScript具有两种特殊的类型，`null`和 `undefined`，它们分别具有值null和undefined，默认情况下，类型检查器认为 `null`与 `undefined`可以赋值给任何类型。 > 按照JavaScript的语义，`null`和 `undefined`是不同的类型。 - 当使用了`--strictNullChecks`标记配置可避免上述问题，不会自动地包含 `null`或 `undefined`，并可以使用联合类型明确的包含它们。 ```ts let s = "foo"; s = null; // 错误, 'null'不能赋值给'string' let sn: string | null = "bar"; sn = null; // 可以 sn = undefined; // error, 'undefined'不能赋值给'string | null' // 可选参数自动加上（| undefined） function f(x: number, y?: number) { return x + (y || 0); } f(1, undefined); f(1, null); // error, 'null' is not assignable to 'number | undefined' // 可选属性自动加上（| undefined） class C { a: number; b?: number; } let c = new C(); c.a = undefined; // error, 'undefined' is not assignable to 'number' c.b = undefined; // ok c.b = null; // error, 'null' is not assignable to 'number | undefined' ``` - 由于 null 类型可以通过联合类型实现，可以使用类型保护去除 null。 ```ts function f(sn: string | null): string { if (sn == null) { // return 去除 return "default"; } else { return sn; } } // 使用短路运算符 function f(sn: string | null): string { return sn || "default"; } ``` - 如果编译器不能够去除 `null`或 `undefined`，你可以使用类型断言手动去除。（语法是给变量添加 `!`后缀） ```ts function broken(name: string | null): string { function postfix(epithet: string) { return name.charAt(0) + '. the ' + epithet; // error, name 可能为 null 类型，语法错误。 } name = name || "Bob"; return postfix("great"); } function fixed(name: string | null): string { function postfix(epithet: string) { return name!.charAt(0) + '. the ' + epithet; // 类型断言，去除 null 和 undefined 值。 } name = name || "Bob"; return postfix("great"); } ``` > 因为编译器无法跟踪所有对嵌套函数的调用，尤其是你将内层函数做为外层函数的返回值时。（除非是立即调用的函数表达式）因此，无法知道函数在哪里被调用，就无法知道调用时变量的类型。 ## 类型别名 - 类型别名会给一个类型起个新名字（跟接口有些相似），可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。 ```ts type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else { return n(); } } ``` > 起别名不会新建一个类型 - 它创建了一个新名字来引用那个类型。 - 类型别名可以是泛型，可以添加类型参数并且在别名声明的右侧传入。 ```ts type Container = { value: T }; // 可以使用类型别名来在属性里引用自己 type Tree = { value: T; left: Tree; right: Tree; } // 交叉类型 + 引用自己 type LinkedList = T & { next: LinkedList }; interface Person { name: string; } var people: LinkedList; var s = people.name; var s = people.next.name; var s = people.next.next.name; var s = people.next.next.next.name; ``` - 类型别名不能出现在声明右侧的任何地方。 ```ts type Yikes = Array; // error ``` - 接口与类型别名 - 接口创建了一个新的名字，可以在其它任何地方使用。类型别名并不创建新名字。 ```ts type Alias = { num: number } interface Interface { num: number; } declare function aliased(arg: Alias): Alias; // 对象字面量类型 declare function interfaced(arg: Interface): Interface; // Inerface 类型 ``` - 类型别名不能被 `extends`和 `implements`（自己也不能 `extends`和 `implements`其它类型）。 > 因为 [软件中的对象应该对于扩展是开放的，但是对于修改是封闭的](https://en.wikipedia.org/wiki/Open/closed_principle)，尽量去使用接口代替类型别名。 - 无法通过接口来描述一个类型并且需要使用联合类型或元组类型，这时通常会使用类型别名。 ## 字符串字面量类型 - 允许你指定字符串必须的固定值，可以与联合类型，类型保护和类型别名很好的配合，实现类似枚举类型的字符串。 ```ts type Easing = "ease-in" | "ease-out"; class UIElement { animate(dx: number, dy: number, easing: Easing) { if (easing === "ease-in") { // ... } else if (easing === "ease-out") { } else { // error! should not pass null or undefined. } } } let button = new UIElement(); button.animate(0, 0, "ease-in"); button.animate(0, 0, "uneasy"); // error: "uneasy" is not allowed here ``` - 字符串字面量类型用于区分函数重载。 ```ts function createElement(tagName: "img"): HTMLImageElement; function createElement(tagName: "input"): HTMLInputElement; // ... more overloads ... function createElement(tagName: string): Element { // ... code goes here ... } ``` ## 数字字面量类型 - TypeScript 还具有数字字面量类型，可以用在缩小范围调试 bug 的时候。 ```ts function foo(x: number) { if (x !== 1 || x !== 2) { // ~~~~~~~ } } ``` > 经检查，当 `x`与 `2`进行比较的时候，它的值必须为 `1`，所以出 bug 了。 ## 枚举成员类型每个枚举成员都是用字面量初始化的时候枚举成员是具有类型的，当谈及“单例类型”的时候，多数是指枚举成员类型和数字/字符串字面量类型，而大多数用户会互换使用“单例类型”和“字面量类型”。 ## 可辨识联合 - 可辨识联合是一种高级模式，合并单例类型，联合类型，类型保护和类型别名等，在函数式编程很有用处，自动地为你辨识联合。它具有3个要素： 1. 具有普通的单例类型属性 —— 可辨识的特征。 2. 一个类型别名包含了那些类型的联合 —— 联合。 3. 此属性上的类型保护。 > 可辨识联合也被称为`标签联合`或`代数数据类型` ````ts // 每个接口都有不同字符串字面量类型的 kind 属性，其他属性则特定于各个接口。 interface Square { kind: "square"; size: number; } interface Rectangle { kind: "rectangle"; width: number; height: number; } interface Circle { kind: "circle"; radius: number; } // 使用可辨识联合 type Shape = Square | Rectangle | Circle; function area(s: Shape) { switch (s.kind) { case "square": return s.size * s.size; case "rectangle": return s.height * s.width; case "circle": return Math.PI * s.radius ** 2; } } ```` > 有点像枚举（key） - 当没有涵盖所有可辨识联合的变化时，我们想让编译器可以通知我们，可以利用 never 类型。 ```ts // 添加了 Triangle 到 Shape 可辨识类型 type Shape = Square | Rectangle | Circle | Triangle; // 利用 never 类型，为除去多有可能情况下剩下的类型，主动抛出错误。 function assertNever(x: never): never { throw new Error("Unexpected object: " + x); } function area(s: Shape) { switch (s.kind) { case "square": return s.size * s.size; case "rectangle": return s.height * s.width; case "circle": return Math.PI * s.radius ** 2; default: return assertNever(s); // error here if there are missing cases } } ``` ## 多态的 this 类型 - 多态的`this`类型表示的是某个包含类或接口的**子类型**。这被称做 **F-bounded多态性**，能很容易地表现连贯接口间的继承。 ```ts // 操作后均返回 this 类型 class BasicCalculator { public constructor(protected value: number = 0) { } public currentValue(): number { return this.value; } public add(operand: number): this { this.value += operand; return this; } public multiply(operand: number): this { this.value *= operand; return this; } // ... other operations go here ... } let v = new BasicCalculator(2) .multiply(5) .add(1) .currentValue(); // 我们可以直接继承该类，并无需重新声明，可直接使用之前的方法。 class ScientificCalculator extends BasicCalculator { public constructor(value = 0) { super(value); // 构造里继承 } public sin() { this.value = Math.sin(this.value); return this; } // ... other operations go here ... } let v = new ScientificCalculator(2) .multiply(5) .sin() .add(1) .currentValue(); ``` ## 索引类型 - 使用索引类型，编译器就能够检查使用**动态属性名**的代码。如从对象中选取属性的子集。 ```ts // 通过索引类型查询和索引访问操作符 function pluck(o: T, names: K[]): T[K][] { return names.map(n => o[n]); } interface Person { name: string; age: number; } let person: Person = { name: 'Jarid', age: 35 }; // 该用例中，编译器会检查 name 是否真的是 Person 的一个属性。 let strings: string[] = pluck(person, ['name']); // ok, string[] ``` > 本例还引入了几个新的类型操作符。 > > - `keyof T`， **索引类型查询操作符**。但我们不清楚可能出现的属性名时，编译器会检查清楚是否传入了正确的属性名 > > 对于任何类型 `T`， `keyof T`的结果为 `T`上已知的公共属性名的联合（keyof Person = 'name' | 'age'）也就是联合类型。 > > - `T[K]`， **索引访问操作符**。你可以在普通的上下文里使用 `T[K]`，只要确保类型变量 `K extends keyof T`就可以了。 > > 意味着 `person['name']`具有类型 `Person['name']`（也就是 string 类型） > > ```ts > let name: string = getProperty(person, 'name'); > let age: number = getProperty(person, 'age'); > let unknown = getProperty(person, 'unknown'); // error, 'unknown' is not in 'name' | 'age' > ``` - 索引类型和字符串索引签名，也就是`keyof`和 `T[K]`与字符串索引签名进行交互。 ```ts interface Map { [key: string]: T; } let keys: keyof Map; // string let value: Map['foo']; // number ``` > 如果你有一个带有字符串索引签名的类型（key: string），那么 `keyof T`会是 `string`，并且 `T[string]`为索引签名的类型（返回的是 T，当然是 T）。 ## 映射类型 - 在映射类型里，新类型以相同的形式去转换旧类型里每个属性，避免了重复的类型赋予。 ```ts // 可以令每个属性称为 readonly 类型 type Readonly = { readonly [P in keyof T]: T[P]; } // 可选 type Partial = { [P in keyof T]?: T[P]; } // 将 Person 类型均映射为 readonly 类型和可选。 type PersonPartial = Partial; type ReadonlyPerson = Readonly; ``` - 在实践中，会基于一些已存在的类型，且按照一定的方式转换字段。 > 它的语法与索引签名的语法类型，内部使用了 `for .. in`。具有三个部分： > > 1. 类型变量 `K`(P)，它会依次绑定到每个属性。 > 2. 字符串字面量联合的 `Keys`(keyof T)，它包含了要迭代的属性名的集合。 > 3. 属性的结果类型。 ```ts type Nullable = { [P in keyof T]: T[P] | null } type Partial = { [P in keyof T]?: T[P] } ``` - 编译器知道在添加任何新属性之前可以拷贝所有存在的属性修饰符，`keyof T ` 结果类型 `T[P]` 通常是映射类型的的模版，但这类转换时**同态**的，需要注意同态的区别，映射只作用于 `T` 的属性而没有其它的。 ```ts // 同态 type Pick = { [P in K]: T[P]; } // 非同态，并不需要输入类型来拷贝属性 type Record = { [P in K]: T; } // 非同态类型会创建新的属性。 type ThreeStringProps = Record<'prop1' | 'prop2' | 'prop3', string> ``` - 由映射类型进行推断拆包。 ```ts function unproxify(t: Proxify): T { let result = {} as T; // 断言为该对象属性 for (const k in t) { result[k] = t[k].get(); } return result; } let originalProps = unproxify(proxyProps); ``` > 这个拆包推断只适用于同态的映射类型，如果映射类型不是同态的，那么需要给拆包函数一个明确的类型参数。 - TypeScript 2.8在`lib.d.ts`里增加了一些预定义的有条件类型。 > - `Exclude` -- 从`T`中剔除可以赋值给`U`的类型。 > - `Extract` -- 提取`T`中可以赋值给`U`的类型。 > - `NonNullable` -- 从`T`中剔除`null`和`undefined`。 > - `ReturnType` -- 获取函数返回值类型。 > - `InstanceType` -- 获取构造函数类型的实例类型。 > > `Exclude`类型是`Diff`类型的一种实现，其一为了避免破坏已经定义了`Diff`的代码，其二这个名字能更好地表达类型的语义。 > > 没有增加`Omit`类型，因为可以很容易的用`Pick>`来表示。 ```ts // 示例使用 type T00 = Exclude<"a" | "b" | "c" | "d", "a" | "c" | "f">; // "b" | "d" type T01 = Extract<"a" | "b" | "c" | "d", "a" | "c" | "f">; // "a" | "c" type T02 = Exclude void), Function>; // string | number type T03 = Extract void), Function>; // () => void type T04 = NonNullable; // string | number type T05 = NonNullable<(() => string) | string[] | null | undefined>; // (() => string) | string[] function f1(s: string) { return { a: 1, b: s }; } class C { x = 0; y = 0; } type T10 = ReturnType<() => string>; // string type T11 = ReturnType<(s: string) => void>; // void type T12 = ReturnType<(() => T)>; // {} type T13 = ReturnType<(() => T)>; // number[] type T14 = ReturnType; // { a: number, b: string } type T15 = ReturnType; // any type T16 = ReturnType; // any type T17 = ReturnType; // Error type T18 = ReturnType; // Error type T20 = InstanceType; // C type T21 = InstanceType; // any type T22 = InstanceType; // any type T23 = InstanceType; // Error type T24 = InstanceType; // Error ``` # Symbols - 自ECMAScript 2015起，`symbol`成为了一种新的原生类型，其值是通过`Symbol`构造函数创建的，具有以下几个特点。 ```ts // Symbols是不可改变且唯一的。 let sym2 = Symbol("key"); let sym3 = Symbol("key"); sym2 === sym3; // false, symbols是唯一的 // symbols也可以被用做对象属性的键。 let sym = Symbol(); let obj = { [sym]: "value" }; console.log(obj[sym]); // "value" // 可以与计算出的属性名声明相结合来声明对象的属性和类成员。 const getClassNameSymbol = Symbol(); class C { [getClassNameSymbol](){ return "C"; } } let c = new C(); let className = c[getClassNameSymbol](); // "C" ``` - 一些已经众所周知的内置 symbols，用来表示语言内部的行为。 > - `Symbol.hasInstance`方法，会被`instanceof`运算符调用。构造器对象用来识别一个对象是否是其实例。 > > - `Symbol.isConcatSpreadable`布尔值，表示当在一个对象上调用`Array.prototype.concat`时，这个对象的数组元素是否可展开。 > > - `Symbol.iterator`方法，被`for-of`语句调用。返回对象的默认迭代器。 > > - `Symbol.match`方法，被`String.prototype.match`调用。正则表达式用来匹配字符串。 > > - `Symbol.replace`方法，被`String.prototype.replace`调用。正则表达式用来替换字符串中匹配的子串。 > > - `Symbol.search`方法，被`String.prototype.search`调用。正则表达式返回被匹配部分在字符串中的索引。 > > - `Symbol.species`函数值，为一个构造函数。用来创建派生对象。 > > - `Symbol.split`方法，被`String.prototype.split`调用。正则表达式来用分割字符串。 > > - `Symbol.toPrimitive`方法，被`ToPrimitive`抽象操作调用。把对象转换为相应的原始值。 > > - `Symbol.toStringTag`方法，被内置方法`Object.prototype.toString`调用。返回创建对象时默认的字符串描述。 > > - `Symbol.unscopables`对象，它自己拥有的属性会被`with`作用域排除在外。 # 迭代器和生成器 ## 可迭代性 - 当一个对象实现了[`Symbol.iterator`](https://www.tslang.cn/docs/handbook/symbols.html#symboliterator)属性时，我们认为它是可迭代的，对象上的 `Symbol.iterator`函数负责返回供迭代的值。 > 一些内置的类型如 `Array`，`Map`，`Set`，`String`，`Int32Array`，`Uint32Array`等都已经实现了各自的`Symbol.iterator`。 ## for...of vs for..in - `for..of`会遍历可迭代的对象，调用对象上的`Symbol.iterator`方法。 ```ts let someArray = [1, "string", false]; for (let entry of someArray) { console.log(entry); // 1, "string", false } ``` - `for..of`和`for..in`均可迭代一个列表，但用于迭代的值却不同。 - `for..in`迭代的是对象的键的列表。 - `for..of`则迭代对象的键对应的值。 ```ts let list = [4, 5, 6]; for (let i in list) { console.log(i); // "0", "1", "2", } for (let i of list) { console.log(i); // "4", "5", "6" } ``` - `for..in`可以操作任何对象，提供了查看对象属性的一种方法， `for..of`关注于迭代对象的值。 ```ts let pets = new Set(["Cat", "Dog", "Hamster"]); pets["species"] = "mammals"; for (let pet in pets) { console.log(pet); // "species" } for (let pet of pets) { console.log(pet); // "Cat", "Dog", "Hamster" } ``` > 内置对象`Map`(字典)和`Set`(集合)已经实现了`Symbol.iterator`方法，让我们可以访问它们保存的值。 ## for...of 代码生成 - 生成目标为**ES5或ES3**，迭代器只允许在`Array`类型上使用，在非数组值上使用 `for..of`语句会得到一个错误。 > 就算这些非数组值已经实现了`Symbol.iterator`属性。 ```ts let numbers = [1, 2, 3]; for (let num of numbers) { console.log(num); } // 编译器会生成一个简单的 for 循环作为 for...of 循环的代码生成。 var numbers = [1, 2, 3]; for (var _i = 0; _i < numbers.length; _i++) { var num = numbers[_i]; console.log(num); } ``` - 目标为兼容ECMAScipt 2015的引擎时（ES6+），编译器会生成相应引擎的`for..of`内置迭代器实现方式。 # 模块 > TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”，“外部模块”现在则简称为“模块”(也就是说 `module X {}` 相当于现在推荐的写法 `namespace X {}`)。 - 模块在其自身的作用域里执行，而不是在全局作用域里。因此，定义在一个模块里的变量，函数，类等等在模块外部是不可见的。 > 除非明确地使用[`export`形式](https://www.tslang.cn/docs/handbook/modules.html#export)导出它们。如果想使用其它模块导出的变量，函数，类，接口等，可以使用 [`import`形式](https://www.tslang.cn/docs/handbook/modules.html#import)进行导入。 - 模块是自声明的，两个模块之间的关系是通过在文件级别上使用imports和exports建立的。 - 模块使用模块加载器去导入其它的模块。 > 在运行时，模块加载器的作用是在执行此模块代码前，去查找并执行这个模块的所有依赖。最熟知的 JavaScript 模块加载器是服务于 Node.js 的 [CommonJS](https://en.wikipedia.org/wiki/CommonJS)和服务于 Web 应用的 [Require.js](http://requirejs.org/)。 - TypeScript与ECMAScript 2015一样，任何包含顶级`import`或者`export`的文件都被当成一个模块。 > 如果一个文件不带有顶级的`import`或者`export`声明，那么它的内容被视为全局可见的（因此对模块也是可见的）。 ## 导出 - 任何导出声明（比如变量，函数，类，类型别名或接口）都能够通过添加`export`关键字来导出。 ```ts export interface StringValidator { isAcceptable(s: string): boolean; } export const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } ``` - 导出语句只需对导出的部分重命名。 ```ts class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator }; export { ZipCodeValidator as mainValidator }; ``` - 重新导出功能并不会在当前模块导入那个模块或定义一个新的局部变量。 - 一个模块可以包裹多个模块，并把将导出的内容联合在一起通过语法：`export * from "module"`。 ```ts export * from "./ZipCodeValidator"; // exports class ZipCodeValidator ``` - 默认导出使用 `default` 关键字标记，并且一个模块只能够有一个默认导出。 ```ts // JQuery.d.ts declare let $: JQuery; export default $; // 使用 import $ from "JQuery"; $("button.continue").html( "Next Step..." ); // OneTwoThree.ts 变量默认导出 export default "123"; // 使用 import num from "./OneTwoThree"; console.log(num); // "123" ``` - 类和函数声明可以直接被标记为默认导出，其默认导出的类和函数的名字是可以省略的。 ```ts // ZipCodeValidator.ts 类默认导出 export default class ZipCodeValidator { static numberRegexp = /^[0-9]+$/; isAcceptable(s: string) { return s.length === 5 && ZipCodeValidator.numberRegexp.test(s); } } // StaticZipCodeValidator.ts 函数默认导出 const numberRegexp = /^[0-9]+$/; export default function (s: string) { return s.length === 5 && numberRegexp.test(s); } // 类使用 import validator from "./ZipCodeValidator"; let myValidator = new validator(); // 函数使用 import validate from "./StaticZipCodeValidator"; let strings = ["Hello", "98052", "101"]; strings.forEach(s => { console.log(`"${s}" ${validate(s) ? " matches" : " does not match"}`); }); ``` ## 导入 - 导入一个模块中的某个导出内容 ```ts import { ZipCodeValidator } from "./ZipCodeValidator"; let myValidator = new ZipCodeValidator(); ``` - 导入重命名 ```ts import { ZipCodeValidator as ZCV } from "./ZipCodeValidator"; let myValidator = new ZCV(); ``` - 将整个模块导入到一个变量，进行访问全部模块导出部分。 ```ts import * as validator from "./ZipCodeValidator"; let myValidator = new validator.ZipCodeValidator(); ``` - 具有副作用的导入模块，一些模块会设置一些全局状态供其它模块使用，可能没有任何的导出或用户根本就不关注它的导出，因此不推荐这么做。 ```ts import "./my-module.js"; ``` ## export = 和 import = require() - 为了支持CommonJS和AMD的`exports`, TypeScript提供了`export =`语法，且必须特定语法`import module = require("module")`来导入此模块。 > CommonJS和AMD的环境里都有一个`exports`变量，这个变量一般被赋值为一个对象，其包含了一个模块的所有导出内容。这种情况下其作用就类似于 es6 语法里的默认导出。虽然作用相似，但 `export default` 语法并不能兼容CommonJS 和 AMD 的`exports`语法。 ```ts let numberRegexp = /^[0-9]+$/; class ZipCodeValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } // export =语法定义一个模块的导出对象（类，接口，命名空间，函数或枚举）。 export = ZipCodeValidator; //导入 import zip = require("./ZipCodeValidator"); let strings = ["Hello", "98052", "101"]; // Validators to use let validator = new zip(); strings.forEach(s => { console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`); }); ``` ## 生成模块代码 - 根据编译时指定的模块目标参数，编译器会生成相应的供Node.js ([CommonJS](http://wiki.commonjs.org/wiki/CommonJS))，Require.js ([AMD](https://github.com/amdjs/amdjs-api/wiki/AMD))，[UMD](https://github.com/umdjs/umd)，[SystemJS](https://github.com/systemjs/systemjs)或[ECMAScript 2015 native modules](http://www.ecma-international.org/ecma-262/6.0/#sec-modules) (ES6)模块加载系统使用的代码。 > 下面的例子说明了导入导出语句里使用的名字是怎么转换为相应的模块加载器代码的。 - SimpleModule.ts ```ts import m = require("mod"); export let t = m.something + 1; ``` - AMD / RequireJS SimpleModule.js ```js define(["require", "exports", "./mod"], function (require, exports, mod_1) { exports.t = mod_1.something + 1; }); ``` - CommonJS / Node SimpleModule.js ```js let mod_1 = require("./mod"); exports.t = mod_1.something + 1; ``` - UMD SimpleModule.js ```js (function (factory) { if (typeof module === "object" && typeof module.exports === "object") { let v = factory(require, exports); if (v !== undefined) module.exports = v; } else if (typeof define === "function" && define.amd) { define(["require", "exports", "./mod"], factory); } })(function (require, exports) { let mod_1 = require("./mod"); exports.t = mod_1.something + 1; }); ``` - System SimpleModule.js ```js System.register(["./mod"], function(exports_1) { let mod_1; let t; return { setters:[ function (mod_1_1) { mod_1 = mod_1_1; }], execute: function() { exports_1("t", t = mod_1.something + 1); } } }); ``` - Native ECMAScript 2015 modules SimpleModule.js ```js import { something } from "./mod"; export let t = something + 1; ``` ## 可选的模块加载和其他高级加载场景 - 在TypeScript里，使用下面的方式来实现它和其它的高级加载场景，我们可以直接调用模块加载器并且可以保证类型完全，达到如只想在某种条件下才加载某个模块的场景。 - 编译器会检测是否每个模块都会在生成的JavaScript中用到，若无则不会生成 `require`这个模块的代码。这种模式的核心是`import id = require("...")`语句，可以让我们访问模块导出的类型。 > 省略掉没有用到的引用将提升性能，并同时提供了选择性加载模块的能力。 > > 模块加载器会被动态调用（通过 `require`），它利用了省略引用的优化，让模块只在被需要时加载。为了让这个模块工作，一定要注意 `import`定义的标识符只能在表示类型处使用（不能在会转换成JavaScript的地方）。 > > // typeof关键字，当在表示类型的地方使用时，会得出一个类型值，这里就表示模块的类型，确保类型安全性。 ```ts // Node.js 里的动态模块加载 declare function require(moduleName: string): any; import { ZipCodeValidator as Zip } from "./ZipCodeValidator"; if (needZipValidation) { let ZipCodeValidator: typeof Zip = require("./ZipCodeValidator"); let validator = new ZipCodeValidator(); if (validator.isAcceptable("...")) { /* ... */ } } // require.js 里的动态模块加载 declare function require(moduleNames: string[], onLoad: (...args: any[]) => void): void; import * as Zip from "./ZipCodeValidator"; if (needZipValidation) { require(["./ZipCodeValidator"], (ZipCodeValidator: typeof Zip) => { let validator = new ZipCodeValidator.ZipCodeValidator(); if (validator.isAcceptable("...")) { /* ... */ } }); } // System.js 里的动态模块加载 declare const System: any; import { ZipCodeValidator as Zip } from "./ZipCodeValidator"; if (needZipValidation) { System.import("./ZipCodeValidator").then((ZipCodeValidator: typeof Zip) => { var x = new ZipCodeValidator(); if (x.isAcceptable("...")) { /* ... */ } }); } ``` ## 使用其他的 JavaScript 库 - 要想描述非TypeScript编写的类库的类型，我们需要声明类库所暴露出的API。 > 声明因为它不是“外部程序”的具体实现，通常在 `.d.ts`文件里定义的。 - 在 Node.js 里可以使用顶级的 `export`声明来为每个模块都定义一个`.d.ts`文件，但最好还是写在一个大的`.d.ts`文件里。 > node.d.ts，对模块进行导出声明 ```ts declare module "url" { export interface Url { protocol?: string; hostname?: string; pathname?: string; } export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url; } declare module "path" { export function normalize(p: string): string; export function join(...paths: any[]): string; export let sep: string; } ``` > 可以`/// ` `node.d.ts`并且使用`import url = require("url");`或`import * as URL from "url"`加载模块。 ```ts /// import url = require("url"); // 或 import * as URL from "url"; let myUrl = URL.parse("http://www.typescriptlang.org"); ``` - 外部模块简写。为了避免用一个新模块之前花时间去编写声明，可以使用声明的简写形式以便能够快速使用。 ```ts // declarations.d.ts declare module "hot-new-module"; ``` > 导入模块 ```ts // xx.ts import x, {y} from "hot-new-module"; x(y); ``` > 简写模块里所有导出的类型将是`any`。 - 模块声明通配符。些模块加载器如[SystemJS](https://github.com/systemjs/systemjs/blob/master/docs/overview.md#plugin-syntax) 和 [AMD](https://github.com/amdjs/amdjs-api/blob/master/LoaderPlugins.md)支持导入非JavaScript内容。 > 通常会使用一个前缀或后缀来表示特殊的加载语法。 ```ts declare module "*!text" { const content: string; export default content; } // Some do it the other way around. declare module "json!*" { const value: any; export default value; } ``` > 导入匹配`"*!text"`或`"json!*"`的内容 ```ts import fileContent from "./xyz.txt!text"; import data from "json!http://example.com/data.json"; console.log(data, fileContent); ``` - 有些模块被设计成兼容多个模块加载器，或者不使用模块加载器（采用全局变量）。 > 以 [UMD](https://github.com/umdjs/umd)模块为代表。这些库可以通过导入的形式或全局变量的形式访问。 ```ts // math-lib.d.ts export function isPrime(x: number): boolean; export as namespace mathLib; ``` > 导入该库使用模块 ```ts import { isPrime } from "math-lib"; isPrime(2); // 正确 mathLib.isPrime(2); // 错误: 不能在模块内使用全局定义。 ``` > 通过全局变量的形式使用，但只能在不带有模块导入或导出的脚本文件里。 ```ts mathLib.isPrime(2); ``` ## 创建模块结构 - 尽可能地在顶层导出，用户更容易地使用你模块导出的内容。 - 避免嵌套层次过多，变得难以处理。 - 如模块中导出一个命名空间就是一个增加嵌套。 - 导出类的静态方法也会增加嵌套（类本身就增加了一层嵌套）除非它能方便表述或便于清晰使用，否则应直接导出一个辅助方法。 - 如果仅导出单个类或方法，应采用默认导出。来减少用户使用难度，可随意命名导入模块的类型，来找到相关对象。 ```ts // 默认导出类 export default class SomeType { constructor() { ... } } // 默认导出方法 export default function getThing() { return 'thing'; } ``` > 使用默认导出 ```ts import t from "./MyClass"; import f from "./MyFunc"; let x = new t(); console.log(f()); ``` - 需要导出大量内容时，可使用命名空间导入模式。 ```ts export class Dog { ... } export class Cat { ... } export class Tree { ... } export class Flower { ... } ``` > 使用命名空间导入模式 ```ts import * as myLargeModule from "./MyLargeModule.ts"; let x = new myLargeModule.Dog(); ``` - 使用重新导出进行扩展一个模块功能。 > 如 JS 常见扩展原对象模式，因模块不会像全局命名空间对象那样去**合并**。推荐的方案是不要去改变原来的对象，而是导出一个新的实体来提供新的功能。 ```ts // Calculator.ts export class Calculator { //... } export function test(c: Calculator, input: string) { //... } ``` > 使用原计算机类功能 ```ts import { Calculator, test } from "./Calculator"; let c = new Calculator(); test(c, "1+2*33/11="); ``` > 扩展该计算机模块功能 ```ts // ProgrammerCalculator.ts import { Calculator } from "./Calculator"; // 继承扩展 class ProgrammerCalculator extends Calculator { } // 重新导出新的实体 ProgrammerCalculator 且重命名 export { ProgrammerCalculator as Calculator }; // 同时导出原先的 test 方法 export { test } from "./Calculator"; ``` > 使用重新导出扩展功能 ```ts import { Calculator, test } from "./ProgrammerCalculator"; let c = new Calculator(2); test(c, "001+010="); ``` - 模块里不要使用命名空间，模块具有其自己的作用域，并且只有导出的声明才会在模块外部可见。因此，命名空间在使用模块时几乎没什么价值。 - 在组织方面，命名空间对于在全局作用域内对逻辑上相关的对象和类型进行分组是很便利的。然而，模块本身已经存在于文件系统，我们必须通过路径和文件名找到它们，这已经提供了一种逻辑上的组织形式。因此在组织方面，我们可以采用文件系统组织的优势进行分组。 - 命名空间常用于解决全局作用域里命名冲突，而对于模块中来说，在一个模块里从设计角度出发没有理由发生重名的异常情况。 > [命名空间和模块](https://www.tslang.cn/docs/handbook/namespaces-and-modules.html) - 检查以下结构要点，确保没有在模块中使用命令空间。 - 文件的顶层声明是`export namespace Foo { ... }` （删除`Foo`并把所有内容向上层移动一层） - 文件只有一个`export class`或`export function` （考虑使用`export default`） - 多个文件的顶层具有同样的`export namespace Foo {` （错误，这并不会合并分组。） # 命名空间 > TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块” ## 基础 - 任何使用 `module`关键字来声明一个内部模块的地方都应该使用`namespace`关键字来替换，避免让新的使用者被相似的名称所迷惑。 - 随着更多验证器的加入，组织代码便于在记录它们类型的同时避免产生命名冲突。因此把验证器包裹到一个命名空间内，而不是全局命名空间下。 ```ts // 与之相关类型放在 Validation 的命名空间中 namespace Validation { // export 确保这些接口和类在命名空间之外也可访问 export interface StringValidator { isAcceptable(s: string): boolean; } // 变量内部实现细节无需导出 const lettersRegexp = /^[A-Za-z]+$/; const numberRegexp = /^[0-9]+$/; export class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } } // 示例 let strings = ["Hello", "98052", "101"]; // 使用命名空间 let validators: { [s: string]: Validation.StringValidator; } = {}; validators["ZIP code"] = new Validation.ZipCodeValidator(); validators["Letters only"] = new Validation.LettersOnlyValidator(); for (let s of strings) { for (let name in validators) { console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`); } } ``` ## 分离到多文件 - 当应用变得越来越大时，需要将代码分离到不同的文件中以便于维护，采用多文件的命名空间。 > 尽管是不同的文件，它们仍是同一个命名空间，如同它们在一个文件中定义的一样。因为不同文件之间存在依赖关系，加入了引用标签来告诉编译器文件之间的关联。 > Validation.ts ```ts namespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } } ``` > LettersOnlyValidator.ts ```ts /// namespace Validation { const lettersRegexp = /^[A-Za-z]+$/; export class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } } ``` > Test.ts ```ts /// /// // Some samples to try let strings = ["Hello", "98052", "101"]; // Validators to use let validators: { [s: string]: Validation.StringValidator; } = {}; validators["Letters only"] = new Validation.LettersOnlyValidator(); // Show whether each string passed each validator for (let s of strings) { for (let name in validators) { console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`); } } ``` - 涉及到多文件时，我们必须确保所有编译后的代码都被加载。 - 第一种，把所有的输入文件编译为一个输出文件，需要使用`--outFile`标记 ``` tsc --outFile sample.js Test.ts ``` - 第二种，可以编译每一个文件（默认方式），每个源文件都会对应生成一个JavaScript文件。然后，在页面上通过 `