写惯了JavaScript，都忘了自己写的时候要注意数据的类型规范了，这种动态类型语言确实很灵活性有目共睹，但是也会导致各种奇怪的 bug。在Vue2.X版本，引入了 Flow 做静态类型检查，但微软的TypeScript 是更好的选择，毕竟大公司出品吗，一部分一部分的总结吧

1.初识 TypeScript

TypeScript 是 JavaScript 语言的超集，为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。同时，它提供最新和不断发展的 JavaScript 特性，能让我们建立更丰富的组件。

1.1 TypeScript 的特点

TypeScript 主要有 3 大特点：

始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。

强大的工具构建大型应用程序

类型允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有 JavaScript 库的行为。

先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的 ECMAScript3（或更新版本）的JavaScript。

下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系：

TypeScript 与 JavaScript 的区别

TypeScript	JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误	作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型	弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解	可以直接在浏览器中使用
支持模块、泛型和接口	不支持模块，泛型或接口
社区的支持仍在增长，而且还不是很大	大量的社区支持以及大量文档和解决问题的支持

1.2 安装 TypeScript

命令行运行如下命令，全局安装 TypeScript：

1	npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功：

tsc -V

结果

1	Version 4.0.3

1.3 编写第一个 TypeScript 程序

在编辑器，将下面的代码输入到 greeter.ts 文件里：

function greeter (person) {
    return 'Hello, ' + person
}

let user = 'Yee'

console.log(greeter(user))

1.3.1 编译代码

我们使用了 .ts 扩展名，但是这段代码仅仅是原生JavaScript 而已。

在命令行上，运行 TypeScript 编译器：

1	tsc greeter.ts

输出结果为一个 greeter.js 文件，它包含了和输入文件中相同的 JavsScript 代码。

在命令行上，通过 Node.js 运行这段代码：

1	node greeter.js

控制台输出：

1	Hello, Yee

1.3.2 类型注解

接下来让我们看看 TypeScript 工具带来的高级功能。给 person 函数的参数添加 : string 类型注解，如下：

function greeter (person: string) {
    return 'Hello, ' + person
}

let user = 'Yee'

console.log(greeter(user))

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。在这个例子里，我们希望 greeter 函数接收一个字符串参数。然后尝试把 greeter 的调用改成传入一个数组：

function greeter (person: string) {
    return 'Hello, ' + person
}

let user = [0, 1, 2]

console.log(greeter(user))

重新编译，你会看到产生了一个错误：

1	error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

类似地，尝试删除 greeter 调用的所有参数。 TypeScript 会告诉你使用了非期望个数的参数调用了这个函数。在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误，greeter.js 文件还是被创建了。就算你的代码里有错误，你仍然可以使用 TypeScript。但在这种情况下，TypeScript 会警告你代码可能不会按预期执行。

1.3.3 接口

让我们继续扩展这个示例应用。这里我们使用接口来描述一个拥有 firstName 和 lastName 字段的对象。在 TypeScript 里，只在两个类型内部的结构兼容，那么这两个类型就是兼容的。这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以，而不必明确地使用 implements 语句。

interface Person {
    firstName: string
    lastName: string
}

function greeter (person: Person) {
    return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = {
  firstName: 'Yee',
  lastName: 'Huang'
}

console.log(greeter(user))

1.3.4 类

最后，让我们使用类来改写这个例子。 TypeScript 支持 JavaScript 的ES6新特性，比如支持基于类的面向对象编程。

让我们创建一个 Student 类，它带有一个构造函数和一些公共字段。因为类的字段包含了接口所需要的字段，所以他们能很好的兼容。

还要注意的是，我在类的声明上会注明所有的成员变量，这样比较一目了然。

class User {
    fullName: string
    firstName: string
    lastName: string

    constructor (firstName: string, lastName: string) {
        this.firstName = firstName
        this.lastName = lastName
        this.fullName = firstName + ' ' + lastName
    }
}

interface Person {
    firstName: string
    lastName: string
}

function greeter (person: Person) {
    return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = new User('Yee', 'Huang')

console.log(greeter(user))

重新运行 tsc greeter.ts，你会看到 TypeScript 里的类只是一个语法糖，本质上还是 JavaScript 函数的实现。

2.TypeScript基础类型

TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

2.1 布尔值

最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean。

1	let isDone: boolean = false

2.2 数字

和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。这些浮点数的类型是 number。除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015中引入的二进制和八进制字面量。

let decLiteral: number = 20
let hexLiteral: number = 0x14
let binaryLiteral: number = 0b10100
let octalLiteral: number = 0o24

2.3 字符串

TypeScript和 JavaScript 一样，可以使用双引号（"）或单引号（'）表示字符串。

1 2	let name: string = 'bob' name = 'smith'

你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。这种字符串是被反引号包围（ ```），并且以 ${ expr } 这种形式嵌入表达式

let name: string = `Yee`
let age: number = 37
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`

这与下面定义 sentence 的方式效果相同：

1 2	let sentence: string = 'Hello, my name is ' + name + '.\n\n' + 'I\'ll be ' + (age + 1) + ' years old next month.'

2.4 数组

TypeScript 像 JavaScript 一样可以操作数组元素。有两种方式可以定义数组。第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

1	let list: number[] = [1, 2, 3]

第二种方式是使用数组泛型，Array<元素类型>：

1	let list: Array<number> = [1, 2, 3]

2.5 元祖 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string 和 number 类型的元组。

1
2
3

let x: [string, number]
x = ['hello', 10] // OK
x = [10, 'hello'] // Error

当访问一个已知索引的元素，会得到正确的类型：

1 2	console.log(x[0].substr(1)) // OK 'ello' console.log(x[1].substr(1)) // Error, 'number' 不存在 'substr' 方法

当访问一个越界的元素，会使用联合类型替代：

1
2
3

x[3] = 'world' // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()) // OK, 'string' 和 'number' 都有 toString
x[6] = true // Error, 布尔不是(string | number)类型

2.6 枚举

enum 类型是对 JavaScript 标准数据类型的一个补充。像 C# 等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

1 2	enum Color {Red, Green, Blue} let c: Color = Color.Green

默认情况下，从 0 开始为元素编号。你也可以手动的指定成员的数值。例如，我们将上面的例子改成从 1 开始编号：

1 2	enum Color {Red = 1, Green, Blue} let c: Color = Color.Green

或者，全部都采用手动赋值：

1 2	enum Color {Red = 1, Green = 2, Blue = 4} let c: Color = Color.Green

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：

1
2
3

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]
console.log(colorName)  // 显示'Green'因为上面代码里它的值是2

2.7 any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any 类型来标记这些变量：

1
2
3

let notSure: any = 4
notSure = 'maybe a string instead'
notSure = false // 也可以是个 boolean

在对现有代码进行改写的时候，any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，any 类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：

1
2
3

let list: any[] = [1, true, 'free']

list[1] = 100

2.8 void

某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：

1
2
3

function warnUser(): void {
    console.log('This is my warning message')
}

声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：

1	let unusable: void = undefined

2.9 null 和 undefined

TypeScript 里，undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。和 void 相似，它们的本身的类型用处不是很大：

1 2	let u: undefined = undefined let n: null = null

默认情况下 null 和 undefined 是所有类型的子类型。就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

然而，当你指定了 --strictNullChecks 标记，null 和 undefined 只能赋值给 void 和它们各自，这能避免很多常见的问题。也许在某处你想传入一个 string 或 null 或 undefined，你可以使用联合类型 string | null | undefined。再次说明，稍后我们会介绍联合类型。

2.10 never

never 类型表示的是那些永不存在的值的类型。例如， never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never 类型，当它们被永不为真的类型保护所约束时。

never 类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是 never 的子类型或可以赋值给never 类型（除了 never 本身之外）。即使 any 也不可以赋值给 never。

下面是一些返回 never 类型的函数：

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message)
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed")
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
        
    }
}

2.11 object

object 表示非原始类型，也就是除 number，string，boolean，symbol，null或undefined 之外的类型。

使用 object 类型，就可以更好的表示像 Object.create 这样的 API。例如：

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

2.12 类型断言

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript 会假设程序员已经进行了必须的检查。

类型断言有两种形式。其一是“尖括号”语法：

1 2	let someValue: any = 'this is a string' let strLength: number = (<string>someValue).length

另一个为 as 语法：

1 2	let someValue: any = 'this is a string' let strLength: number = (someValue as string).length

两种形式是等价的。然而，当你在 TypeScript 里使用 JSX 时，只有 as 语法断言是被允许的。

3.接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在 TypeScript 里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

3.1 接口的定义

下面通过一个简单示例来观察接口是如何工作的：

function printLabel(labelledObj: {
    label: string
}) {
    console.log(labelledObj.label)
}

let myObj = {
    size: 10,
    label: 'Size 10 Object'
}
printLabel(myObj) // 'Size 10 Object'

类型检查器会查看 printLabel 的调用。printLabel 有一个参数，并要求这个对象参数有一个名为 label 类型为 string 的属性。需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，以及其类型是否匹配。然而，有些时候 TypeScript 却并不会这么宽松，我们下面会稍做讲解。

下面我们重写上面的例子，这次使用接口来描述：必须包含一个label 属性且类型为 string：

interface LabelledValue {
    label: string
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label)
}

let myObj = {
    size: 10,
    label: 'Size 10 Object'
}
printLabel(myObj) // 'Size 10 Object'

LabelledValue 接口就好比一个名字，用来描述上面例子里的结构。它代表了有一个 label 属性且类型为string 的对象。需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel 的对象实现了这个接口。我们只会去关注值的外形。只要传入的对象满足上面提到的必要条件，那么它就是被允许的。

还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以（就当对象理解好了）。

3.2 可选属性

接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在。例如给函数传入的参数对象中只有部分属性赋值了。

interface Square {
    color: string,
 	area: number
}

interface SquareConfig {
    color?: string
    width?: number
}

function createSquare (config: SquareConfig): Square {
    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'
})

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。比如，我们故意将 createSquare 里的 color 属性名拼错，就会得到一个错误提示：

interface Square {
    color: string,
	area: number
}

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): Square {
    let newSquare = {
        color: 'white',
        area: 100
    };
    if (config.clor) {
        // Error: 属性 'clor' 不存在于类型 'SquareConfig' 中
        newSquare.color = config.clor;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({
    color: 'black'
});

3.3 只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly 来指定只读属性:

interface Point {
    readonly x: number
    readonly y: number
}

你可以通过赋值一个对象字面量来构造一个 Point。赋值后，x 和 y 再也不能被改变了。

let p1: Point = {
    x: 10,
    y: 20
}
p1.x = 5 // error!

TypeScript 具有 ReadonlyArray<T> 类型，它与 Array<T> 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

let a: number[] = [1, 2, 3, 4]
let ro: ReadonlyArray<number> = a
ro[0] = 12 // error!
ro.push(5) // error!
ro.length = 100 // error!
a = ro // error!

上面代码的最后一行，可以看到就算把整个 ReadonlyArray 赋值到一个普通数组也是不可以的。但是你可以用类型断言重写：

1	a = ro as number[]

readonly 和 const区别

最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用 const，若做为属性则使用 readonly。

3.4 额外的属性检查

我们在第一个例子里使用了接口，TypeScript 让我们传入 { size: number; label: string; } 到仅期望得到 { label: string; } 的函数里, 并且我们已经学过了可选属性。

然而，天真地将这两者结合的话就会像在 JavaScript 里那样搬起石头砸自己的脚。比如，拿 createSquare 例子来说：

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({
    colour: 'red',
    width: 100
})
// error TS2345: Argument of type '{ colour: string; width: number; }' is not assignable to parameter of type 'SquareConfig'.
//  Object literal may only specify known properties, but 'colour' does not exist in type 'SquareConfig'. Did you mean to write 'color'?

注意传入 createSquare 的参数拼写为 colour 而不是 color。在 JavaScript 里，这会默默地失败。

你可能会争辩这个程序已经正确地类型化了，因为 width 属性是兼容的，不存在 color 属性，而且额外的 colour 属性是无意义的。

然而，TypeScript 会认为这段代码可能存在 bug。对象字面量会被特殊对待而且会经过额外属性检查，当将它们赋值给变量或作为参数传递的时候。如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

// error: 'colour' 不存在于类型 'SquareConfig' 中
let mySquare = createSquare({
    colour: 'red',
    width: 100
})

绕开这些检查非常简单。最简便的方法是使用类型断言：

1	let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig)

然而，最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。如果 SquareConfig 带有上面定义的类型的 color 和 width 属性，并且还会带有任意数量的其它属性，那么我们可以这样定义它：

interface SquareConfig {
    color?: string
    width?: number
    [propName: string]: any
}

我们稍后会讲到索引签名，但在这我们要表示的是SquareConfig 可以有任意数量的属性，并且只要它们不是 color 和 width，那么就无所谓它们的类型是什么。

还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量：因为 squareOptions 不会经过额外属性检查，所以编译器不会报错。

let squareOptions = {
    colour: 'red',
    width: 100
}
let mySquare = createSquare(squareOptions)

要留意，在像上面一样的简单代码里，你可能不应该去绕开这些检查。对于包含方法和内部状态的复杂对象字面量来讲，你可能需要使用这些技巧，但是大多数额外属性检查错误是真正的bug。也就是说你遇到了额外类型检查出的错误，你应该去审查一下你的类型声明。在这里，如果支持传入 color 或 colour 属性到 createSquare，你应该修改 SquareConfig 定义来体现出这一点。

3.5 函数类型

接口能够描述 JavaScript 中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

1
2
3

interface SearchFunc {
    (source: string, subString: string): boolean
}

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

let mySearch: SearchFunc
mySearch = function(source: string, subString: string): boolean {
    let result = source.search(subString);
    return result > -1;
}

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。比如，我们使用下面的代码重写上面的例子：

let mySearch: SearchFunc
mySearch = function(src: string, sub: string): boolean {
    let result = src.search(sub);
    return result > -1;
}

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。如果你不想指定类型，TypeScript 的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc 类型变量。函数的返回值类型是通过其返回值推断出来的（此例是 false 和 true）。如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc 接口中的定义不匹配。

let mySearch: SearchFunc
mySearch = function(src, sub) {
    let result = src.search(sub);
    return result > -1;
}

3.6 可索引的类型

与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如 a[10] 或 ageMap['daniel']。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。让我们看一个例子：

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ['Bob', 'Fred'];

let myStr: string = myArray[0]; // 'Bob'

上面例子里，我们定义了 StringArray 接口，它具有索引签名。这个索引签名表示了当用 number 去索引 StringArray 时会得到 string 类型的返回值。

TypeScript 支持两种索引签名：字符串和数字。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。这是因为当使用 number 来索引时，JavaScript 会将它转换成string 然后再去索引对象。也就是说用 100（一个 number）去索引等同于使用'100'（一个 string ）去索引，因此两者需要保持一致。

class Animal {
    name: string
}
class Dog extends Animal {
    breed: string
}

// 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
interface NotOkay {
    [x: number]: Animal
    [x: string]: Dog
}

字符串索引签名能够很好的描述 dictionary 模式，并且它们也会确保所有属性与其返回值类型相匹配。因为字符串索引声明了 obj.property 和 obj['property'] 两种形式都可以。下面的例子里， name 的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

interface NumberDictionary {
    [index: string]: number;
    length: number;    // 可以，length是number类型
    name: string       // 错误，`name`的类型与索引类型返回值的类型不匹配
}

最后，你可以将索引签名设置为只读，这样就防止了给索引赋值：

interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ['Alice', 'Bob'];
myArray[2] = 'Mallory'; // error!

3.7 类类型

3.7.1 实现接口

与 C# 或 Java 里接口的基本作用一样，TypeScript 也能够用它来明确的强制一个类去符合某种契约。

interface ClockInterface {
    currentTime: Date
}

class Clock implements ClockInterface {
    currentTime: Date
    constructor(h: number, m: number) { }
}

你也可以在接口中描述一个方法，在类里实现它，如同下面的 setTime 方法一样：

interface ClockInterface {
    currentTime: Date
    setTime(d: Date)
}

class Clock implements ClockInterface {
    currentTime: Date
    setTime(d: Date) {
        this.currentTime = d
    }
    constructor(h: number, m: number) {
    
    }
}

接口描述了类的公共部分，而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。

3.7.2 类静态部分与实例部分的区别

当你操作类和接口的时候，你要知道类是具有两个类型的：静态部分的类型和实例的类型。你会注意到，当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误：

interface ClockConstructor {
    new (hour: number, minute: number)
}

// error
class Clock implements ClockConstructor {
    currentTime: Date
    constructor(h: number, m: number) { }
}

这里因为当一个类实现了一个接口时，只对其实例部分进行类型检查。constructor 存在于类的静态部分，所以不在检查的范围内。

看下面的例子，我们定义了两个接口， ClockConstructor 为构造函数所用和 ClockInterface 为实例方法所用。为了方便我们定义一个构造函数 createClock，它用传入的类型创建实例。

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)

因为 createClock 的第一个参数是 ClockConstructor 类型，在 createClock(AnalogClock, 7, 32) 里，会检查 AnalogClock 是否符合构造函数签名。

3.8 继承接口

和类一样，接口也可以相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

interface Shape {
    color: string
}

interface Square extends Shape {
    sideLength: number
}

let square = {} as Square
square.color = 'blue'
square.sideLength = 10

一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Shape {
    color: string
}

interface PenStroke {
    penWidth: number
}

interface Square extends Shape, PenStroke {
    sideLength: number
}

let square = {} as Square
square.color = 'blue'
square.sideLength = 10
square.penWidth = 5.0

3.9 混合类型

先前我们提过，接口能够描述 JavaScript 里丰富的类型。因为 JavaScript 其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。

一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。

interface Counter {
    (start: number): string
    interval: number
    reset(): void
}

function getCounter(): Counter {
    let counter = (function (start: number) { }) as Counter
    counter.interval = 123
    counter.reset = function () { }
    return counter
}

let c = getCounter()
c(10)
c.reset()
c.interval = 5.0

在使用 JavaScript 第三方库的时候，你可能需要像上面那样去完整地定义类型。

3.10 接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。接口同样会继承到类的 private 和 protected 成员。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。

当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。这个子类除了继承至基类外与基类没有任何关系。例：

class Control {
    private state: any
}

interface SelectableControl extends Control {
    select(): void
}

class Button extends Control implements SelectableControl {
    select() { }
}

class TextBox extends Control {
    select() { }
}

// Error：“ImageC”类型缺少“state”属性。
class ImageC implements SelectableControl {
    select() { }
}

在上面的例子里，SelectableControl 包含了 Control 的所有成员，包括私有成员 state。因为 state 是私有成员，所以只能够是 Control 的子类们才能实现 SelectableControl 接口。因为只有 Control 的子类才能够拥有一个声明于Control 的私有成员 state，这对私有成员的兼容性是必需的。

在 Control 类内部，是允许通过 SelectableControl 的实例来访问私有成员 state 的。实际上，SelectableControl 接口和拥有 select 方法的 Control 类是一样的。Button和 TextBox 类是 SelectableControl 的子类（因为它们都继承自Control 并有 select 方法），但 ImageC 类并不是这样的。

4.类

对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从 ECMAScript 2015，也就是 ES6 开始， JavaScript 程序员将能够使用基于类的面向对象的方式。使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而不需要等到下个 JavaScript 版本。

4.1 类的基本示例

下面看一个使用类的例子：

class Greeter {
    greeting: string
    constructor(message: string) {
        this.greeting = message
    }
    greet() {
        return 'Hello, ' + this.greeting
    }
}

let greeter = new Greeter('world')

如果你使用过 C# 或 Java，你会对这种语法非常熟悉。我们声明一个 Greeter 类。这个类有 3 个成员：一个叫做 greeting 的属性，一个构造函数和一个 greet 方法。

你会注意到，我们在引用任何一个类成员的时候都用了 this。它表示我们访问的是类的成员。

最后一行，我们使用 new 构造了 Greeter 类的一个实例。它会调用之前定义的构造函数，创建一个 Greeter 类型的新对象，并执行构造函数初始化它。

4.2 继承

在 TypeScript 里，我们可以使用常用的面向对象模式。基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。

看下面的例子：

class Animal {
    move(distance: number = 0) {
        console.log(`Animal moved ${distance}m.`)
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!')
    }
}

const dog = new Dog()
dog.bark()
dog.move(10)

这个例子展示了最基本的继承：类从基类中继承了属性和方法。这里，Dog 是一个派生类，它派生自 Animal 基类，通过 extends 关键字。派生类通常被称作子类，基类通常被称作超类。

因为 Dog 继承了 Animal 的功能，因此我们可以创建一个 Dog 的实例，它能够 bark() 和 move()。

下面我们来看个更加复杂的例子。

class Animal {
    name: string
    constructor(name: string) { 
        this.name = name
    }
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`)
    }
}

class Snake extends Animal {
    constructor(name: string) { 
        super(name)
    }
    move(distance: number = 5) {
        console.log('Slithering...')
        super.move(distance)
    }
}

class Horse extends Animal {
    constructor(name: string) {
        super(name)
    }
    move(distance: number = 45) {
        console.log('Galloping...')
        super.move(distance)
    }
}

let sam = new Snake('Sammy')
let tom: Animal = new Horse('Tommy')

sam.move()
tom.move(34)

这个例子展示了一些上面没有提到的特性。这一次，我们使用 extends 关键字创建了 Animal的两个子类：Horse 和 Snake。

与前一个例子的不同点是，派生类包含了一个构造函数，它必须调用 super()，它会执行基类的构造函数。而且，在构造函数里访问 this 的属性之前，我们一定要调用 super()。这个是 TypeScript 强制执行的一条重要规则。

这个例子演示了如何在子类里可以重写父类的方法。Snake类和 Horse 类都创建了 move 方法，它们重写了从 Animal 继承来的 move 方法，使得 move 方法根据不同的类而具有不同的功能。注意，即使 tom 被声明为 Animal 类型，但因为它的值是 Horse，调用 tom.move(34) 时，它会调用 Horse 里重写的方法。

Slithering...
Sammy moved 5m.
Galloping...
Tommy moved 34m.

4.3 公共，私有与受保护的修饰符

4.3.1 默认public

在上面的例子里，我们可以自由的访问程序里定义的成员。如果你对其它语言中的类比较了解，就会注意到我们在之前的代码里并没有使用 public 来做修饰；例如，C# 要求必须明确地使用 public 指定成员是可见的。在 TypeScript 里，成员都默认为 public。

你也可以明确的将一个成员标记成 public。我们可以用下面的方式来重写上面的 Animal 类：

class Animal {
    public name: string
    public constructor(name: string) {
        this.name = name
    }
    public move(distance: number) {
        console.log(`${this.name} moved ${distance}m.`)
    }
}

4.3.2 理解 private

当成员被标记成 private 时，它就不能在声明它的类的外部访问。比如：

class Animal {
    private name: string
    constructor(name: string) { 
        this.name = name
    }
}

new Animal('Cat').name // 错误: 'name' 是私有的.

TypeScript 使用的是结构性类型系统。当我们比较两种不同的类型时，并不在乎它们从何处而来，如果所有成员的类型都是兼容的，我们就认为它们的类型是兼容的。

然而，当我们比较带有 private 或 protected 成员的类型的时候，情况就不同了。如果其中一个类型里包含一个 private 成员，那么只有当另外一个类型中也存在这样一个 private 成员，并且它们都是来自同一处声明时，我们才认为这两个类型是兼容的。对于 protected 成员也使用这个规则。

下面来看一个例子，更好地说明了这一点：

class Animal {
    private name: string
    constructor(name: string) { 
        this.name = name 
    }
}

class Rhino extends Animal {
    constructor() { 
        super('Rhino')
    }
}

class Employee {
    private name: string
    constructor(name: string) { 
        this.name = name
    }
}

let animal = new Animal('Goat')
let rhino = new Rhino()
let employee = new Employee('Bob')

animal = rhino
animal = employee // 错误: Animal 与 Employee 不兼容.

这个例子中有 Animal 和 Rhino 两个类， Rhino 是 Animal 类的子类。还有一个 Employee 类，其类型看上去与 Animal 是相同的。我们创建了几个这些类的实例，并相互赋值来看看会发生什么。因为 Animal 和 Rhino 共享了来自 Animal 里的私有成员定义 private name: string，因此它们是兼容的。然而 Employee 却不是这样。当把 Employee 赋值给 Animal 的时候，得到一个错误，说它们的类型不兼容。尽管 Employee 里也有一个私有成员 name，但它明显不是 Animal 里面定义的那个。

4.3.3 理解 protected

protected 修饰符与 private 修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问。例如：

class Person {
    protected name: string

    constructor(name: string) { 
        this.name = name 
    }
}

class Employee extends Person {
    private department: string

    constructor(name: string, department: string) {
        super(name)
        this.department = department
    }

    getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`
    }
}

let howard = new Employee('Howard', 'Sales')
console.log(howard.getElevatorPitch())
console.log(howard.name) // error

注意，我们不能在 Person 类外使用 name，但是我们仍然可以通过 Employee 类的实例方法访问，因为 Employee 是由 Person 派生而来的。

构造函数也可以被标记成 protected。这意味着这个类不能在包含它的类外被实例化，但是能被继承。比如：

class Person {
  protected name: string
  protected constructor(name: string) {
    this.name = name
  }
}

// Employee 能够继承 Person
class Employee extends Person {
  private department: string

  constructor(name: string, department: string) {
    super(name)
    this.department = department
  }

  public getElevatorPitch() {
    return `Hello, my name is ${this.name} and I work in ${this.department}.`
  }
}

let howard = new Employee('Howard', 'Sales')
let john = new Person('John') // 错误: 'Person' 的构造函数是被保护的.

4.4 readonly 修饰符

你可以使用 readonly 关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

class Person {
    readonly name: string
    constructor(name: string) {
        this.name = name
    }
}

let john = new Person('John')
john.name = 'peter'

4.4.1 参数属性

在上面的例子中，我们必须在 Person 类里定义一个只读成员 name 和一个参数为 name 的构造函数，并且立刻将 name 的值赋给 this.name，这种情况经常会遇到。参数属性可以方便地让我们在一个地方定义并初始化一个成员。下面的例子是对之前 Person 类的修改版，使用了参数属性：

1
2
3

class Person {
    constructor(readonly name: string) {}
}

注意看我们是如何舍弃参数 name，仅在构造函数里使用 readonly name: string 参数来创建和初始化 name 成员。我们把声明和赋值合并至一处。

参数属性通过给构造函数参数前面添加一个访问限定符来声明。使用 private 限定一个参数属性会声明并初始化一个私有成员；对于 public 和 protected 来说也是一样。

4.5 存取器

TypeScript 支持通过 getters/setters 来截取对对象成员的访问。它能帮助你有效的控制对对象成员的访问。

下面来看如何把一个简单的类改写成使用 get 和 set。首先，我们从一个没有使用存取器的例子开始。

class Employee {
    fullName: string
}

let employee = new Employee()
employee.fullName = 'Bob Smith'
if (employee.fullName) {
    console.log(employee.fullName)
}

我们可以设置 fullName，因为它是 public 的，有时候当我们去修改它的时候触发一些额外逻辑，存取器就派上用场了。

下面这个版本里，我们先检查用户密码是否正确，然后再允许其修改员工信息。我们把对 fullName 的直接访问改成了可以检查密码的 set 方法。我们也加了一个 get 方法，让上面的例子仍然可以工作。

let passcode = 'secret passcode'

class Employee {
    private _fullName: string

    get fullName(): string {
        return this._fullName
    }

    set fullName(newName: string) {
        if (passcode && passcode == 'secret passcode') {
            this._fullName = newName
        }
        else {
            console.log('Error: Unauthorized update of employee!')
        }
    }
}

let employee = new Employee()
employee.fullName = 'Bob Smith'
if (employee.fullName) {
    console.log(employee.fullName)
}

我们可以修改一下密码，来验证一下存取器是否是工作的。当密码不对时，会提示我们没有权限去修改员工。

对于存取器有下面几点需要注意的：

首先，存取器要求你将编译器设置为输出 ECMAScript 5 或更高。不支持降级到 ECMAScript 3。其次，只带有 get 不带有 set 的存取器自动被推断为 readonly。这在从代码生成 .d.ts 文件时是有帮助的，因为利用这个属性的用户会看到不允许够改变它的值。

4.6 静态属性

到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。在这个例子里，我们使用 static 定义 origin，因为它是所有网格都会用到的属性。每个实例想要访问这个属性的时候，都要在 origin 前面加上类名。如同在实例属性上使用 this.xxx 来访问属性一样，这里我们使用 Grid.xxx 来访问静态属性。

class Grid {
    static origin = {x: 0, y: 0}

    scale: number

    constructor (scale: number) {
        this.scale = scale
    }

    calculateDistanceFromOrigin(point: {x: number; y: number}) {
        let xDist = point.x - Grid.origin.x
        let yDist = point.y - Grid.origin.y
        return Math.sqrt(xDist * xDist + yDist * yDist) * this.scale
    }
}

let grid1 = new Grid(1.0)  // 1x scale
let grid2 = new Grid(5.0)  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 3, y: 4}))
console.log(grid2.calculateDistanceFromOrigin({x: 3, y: 4}))

4.7 抽象类

抽象类做为其它派生类的基类使用。它们一般不会直接被实例化。不同于接口，抽象类可以包含成员的实现细节。 abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。

abstract class Animal {
    abstract makeSound(): void
    move(): void {
        console.log('roaming the earth...')
	}
}

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。抽象方法的语法与接口方法相似。两者都是定义方法签名但不包含方法体。然而，抽象方法必须包含 abstract 关键字并且可以包含访问修饰符。

abstract class Department {
    name: string

    constructor(name: string) {
        this.name = name
    }

    printName(): void {
        console.log('Department name: ' + this.name)
    }

    abstract printMeeting(): void // 必须在派生类中实现
}

class AccountingDepartment extends Department {
    constructor() {
        super('Accounting and Auditing') // 在派生类的构造函数中必须调用 super()
    }

    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.')
	}

    generateReports(): void {
        console.log('Generating accounting reports...')
    }
}

let department: Department // 允许创建一个对抽象类型的引用
department = new Department() // 错误: 不能创建一个抽象类的实例
department = new AccountingDepartment() // 允许对一个抽象子类进行实例化和赋值
department.printName()
department.printMeeting()
department.generateReports() // 错误: 方法在声明的抽象类中不存在

4.8 高级技巧

4.8.1 构造函数

当你在 TypeScript 里声明了一个类的时候，实际上同时声明了很多东西。首先就是类的实例的类型。

class Greeter {
    static standardGreeting = 'Hello, there'
    greeting: string
    constructor(message: string) {
        this.greeting = message
    }
    greet() {
        return 'Hello, ' + this.greeting
    }
}

let greeter: Greeter
greeter = new Greeter('world')
console.log(greeter.greet())

这里，我们写了 let greeter: Greeter，意思是 Greeter 类的实例的类型是 Greeter。这对于用过其它面向对象语言的程序员来讲已经是老习惯了。

我们也创建了一个叫做构造函数的值。这个函数会在我们使用 new 创建类实例的时候被调用。下面我们来看看，上面的代码被编译成JavaScript后是什么样子的：

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return 'Hello, ' + this.greeting;
    };
    Greeter.standardGreeting = 'Hello, there';
    return Greeter;
}());
var greeter;
greeter = new Greeter('world');
console.log(greeter.greet());

上面的代码里，var Greeter 将被构造函数赋值。当我们调用 new 并执行了这个函数后，便会得到一个类的实例。这个构造函数也包含了类的所有静态属性。换个角度说，我们可以认为类具有实例部分与静态部分这两个部分。

让我们稍微改写一下这个例子，看看它们之间的区别：

class Greeter {
    static standardGreeting = 'Hello, there'

    greeting: string

    constructor(message?: string) {
        this.greeting = message
    }

    greet() {
        if (this.greeting) {
            return 'Hello, ' + this.greeting
        } else {
            return Greeter.standardGreeting
        }
    }
}

let greeter: Greeter
greeter = new Greeter()
console.log(greeter.greet())

let greeterMaker: typeof Greeter = Greeter
greeterMaker.standardGreeting = 'Hey there'

let greeter2: Greeter = new greeterMaker()
console.log(greeter2.greet())

这个例子里， greeter1 与之前看到的一样。我们实例化 Greeter类，并使用这个对象。与我们之前看到的一样。

再之后，我们直接使用类。我们创建了一个叫做 greeterMaker 的变量。这个变量保存了这个类或者说保存了类构造函数。然后我们使用 typeof Greeter，意思是取 Greeter 类的类型，而不是实例的类型。或者更确切的说，”告诉我 Greeter 标识符的类型”，也就是构造函数的类型。这个类型包含了类的所有静态成员和构造函数。之后，就和前面一样，我们在 greeterMaker 上使用 new，创建 Greeter 的实例。

4.8.2 把类当做接口使用

如上一节里所讲的，类定义会创建两个东西：类的实例类型和一个构造函数。因为类可以创建出类型，所以你能够在允许使用接口的地方使用类。

class Point {
    x: number
    y: number
}

interface Point3d extends Point {
    z: number
}

let point3d: Point3d = {x: 1, y: 2, z: 3}

5.函数

函数是 JavaScript 应用程序的基础，它帮助你实现抽象层，模拟类，信息隐藏和模块。在 TypeScript 里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript 为 JavaScript 函数添加了额外的功能，让我们可以更容易地使用。

5.1 基本示例

和 JavaScript 一样，TypeScript 函数可以创建有名字的函数和匿名函数。你可以随意选择适合应用程序的方式，不论是定义一系列 API 函数还是只使用一次的函数。

通过下面的例子可以迅速回想起这两种 JavaScript 中的函数：

// 命名函数
function add(x, y) {
    return x + y
}

// 匿名函数
let myAdd = function(x, y) { 
    return x + y;
}

在 JavaScript 里，函数可以使用函数体外部的变量。当函数这么做时，我们说它‘捕获’了这些变量。至于为什么可以这样做以及其中的利弊超出了本文的范围，但是深刻理解这个机制对学习 JavaScript 和 TypeScript 会很有帮助。

let z = 100

function addToZ(x, y) {
    return x + y + z;
}

5.2 函数类型

5.2.1 为函数定义类型

让我们为上面那个函数添加类型：

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { 
    return x + y;
}

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript 能够根据返回语句自动推断出返回值类型。

5.2.2 书写完整函数类型

现在我们已经为函数指定了类型，下面让我们写出函数的完整类型。

let myAdd: (x: number, y: number) => number = 
    function(x: number, y: number): number {
        return x + y;
    }

函数类型包含两部分：参数类型和返回值类型。当写出完整函数类型的时候，这两部分都是需要的。我们以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。这个名字只是为了增加可读性。我们也可以这么写：

let myAdd: (baseValue: number, increment: number) => number = 
    function(x: number, y: number): number {
        return x + y;
    }

只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。

第二部分是返回值类型。对于返回值，我们在函数和返回值类型之前使用(=>)符号，使之清晰明了。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void 而不能留空。

函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上，这些变量是函数的隐藏状态并不是组成 API 的一部分。

5.2.3 推断类型

尝试这个例子的时候，你会发现如果你在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript 编译器会自动识别出类型：

let myAdd = function(x: number, y: number): number { 
    return x + y;
}

let myAdd: (baseValue: number, increment: number) => number = 
    function(x, y) {
        return x + y;
    }

这叫做“按上下文归类”，是类型推论的一种。它帮助我们更好地为程序指定类型。

5.3 可选参数和默认参数

TypeScript 里的每个函数参数都是必须的。这不是指不能传递 null 或 undefined 作为参数，而是说编译器检查用户是否为每个参数都传入了值。编译器还会假设只有这些参数会被传递进函数。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName: string, lastName: string) {
    return firstName + ' ' + lastName;
}

let result1 = buildName('Bob');                  // Error, 参数过少
let result2 = buildName('Bob', 'Adams', 'Sr.');  // Error, 参数过多
let result3 = buildName('Bob', 'Adams');         // OK

JavaScript 里，每个参数都是可选的，可传可不传。没传参的时候，它的值就是 undefined。在TypeScript 里我们可以在参数名旁使用 ? 实现可选参数的功能。比如，我们想让 lastName 是可选的：

function buildName(firstName: string, lastName?: string): string {
    if (lastName)
        return firstName + ' ' + lastName;
    else
        return firstName;
}

let result1 = buildName('Bob');  // 现在正常了
let result2 = buildName('Bob', 'Adams', 'Sr.');  // Error, 参数过多
let result3 = buildName('Bob', 'Adams');  // OK

可选参数必须跟在必须参数后面。如果上例我们想让 firstName 是可选的，那么就必须调整它们的位置，把 firstName 放在后面。

在 TypeScript 里，我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是 undefined 时。它们叫做有默认初始化值的参数。让我们修改上例，把lastName 的默认值设置为 "Smith"。

function buildName(firstName: string, lastName = 'Smith'): string {
    return firstName + ' ' + lastName;
}

let result1 = buildName('Bob')                  // 返回 "Bob Smith"
let result2 = buildName('Bob', undefined)     // 正常, 同样 "Bob Smith"
let result3 = buildName('Bob', 'Adams', 'Sr.')  // 错误, 参数过多
let result4 = buildName('Bob', 'Adams')        // OK

与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined 值来获得默认值。例如，我们重写最后一个例子，让 firstName 是带默认值的参数：

function buildName(firstName = 'Will', lastName: string): string {
  return firstName + ' ' + lastName
}

let result1 = buildName('Bob')                  // Error, 参数过少
let result2 = buildName('Bob', 'Adams', "Sr.")  // Error, 参数过多
let result3 = buildName('Bob', 'Adams')         // OK， 返回 "Bob Adams"
let result4 = buildName(undefined, 'Adams')     // OK，  返回 "Will Adams"

5.3.1 剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。在 JavaScript 里，你可以使用 arguments 来访问所有传入的参数。

在 TypeScript 里，你可以把所有参数收集到一个变量里：

function buildName(firstName: string, ...restOfName: string[]): string {
    return firstName + ' ' + restOfName.join(' ');
}

let employeeName = buildName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

剩余参数会被当做个数不限的可选参数。可以一个都没有，同样也可以有任意个。编译器创建参数数组，名字是你在省略号（ ...）后面给定的名字，你可以在函数体内使用这个数组。

这个省略号也会在带有剩余参数的函数类型定义上使用到：

function buildName(firstName: string, ...restOfName: string[]): string {
    return firstName + ' ' + restOfName.join(' ')
}

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName

5.4 this

学习如何在 JavaScript 里正确使用 this 就好比一场成年礼。由于 TypeScript 是 JavaScript 的超集，TypeScript 程序员也需要弄清 this 工作机制并且当有 bug 的时候能够找出错误所在。幸运的是，TypeScript 能通知你错误地使用了 this 的地方。如果你想了解 JavaScript 里的 this是如何工作的，那么首先阅读 Yehuda Katz 写的 Understanding JavaScript Function Invocation and “this” (opens new window)。 Yehuda 的文章详细的阐述了 this 的内部工作原理，因此我们这里只做简单介绍。

5.4.1 this 和箭头函数

JavaScript里，this 的值在函数被调用的时候才会指定。这是个既强大又灵活的特点，但是你需要花点时间弄清楚函数调用的上下文是什么。但众所周知，这不是一件很简单的事，尤其是在返回一个函数或将函数当做参数传递的时候。

下面看一个例子：

let deck = {
    suits: ['hearts', 'spades', 'clubs', 'diamonds'],
    cards: Array(52),
    createCardPicker: function() {
        return function() {
            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();

console.log('card: ' + pickedCard.card + ' of ' + pickedCard.suit);

可以看到 createCardPicker 是个函数，并且它又返回了一个函数。如果我们尝试运行这个程序，会发现它并没有输出而是报错了。因为 createCardPicker 返回的函数里的 this 被设置成了 global 而不是 deck 对象。因为我们只是独立的调用了 cardPicker()。顶级的非方法式调用会将 this 视为 global。

为了解决这个问题，我们可以在函数被返回时就绑好正确的this。这样的话，无论之后怎么使用它，都会引用绑定的deck 对象。我们需要改变函数表达式来使用 ECMAScript 6 箭头语法。箭头函数能保存函数创建时的 this 值，而不是调用时的值：

let deck = {
    suits: ['hearts', 'spades', 'clubs', 'diamonds'],
    cards: Array(52),
    createCardPicker: function() {
        // 注意：这里使用箭头函数
        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();

console.log('card: ' + pickedCard.card + ' of ' + pickedCard.suit); // card: 2 of hearts

5.4.2 this 参数

在上述的例子中 this.suits[pickedSuit] 的类型为 any，这是因为 this 来自对象字面量里的函数表达式。修改的方法是，提供一个显式的 this 参数。 this 参数是个假的参数，它出现在参数列表的最前面：

1
2
3

function f(this: void) {
    // 确保“this”在此独立函数中不可用
}

让我们往例子里添加一些接口，Card 和 Deck，让类型重用能够变得清晰简单些：

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),
    // NOTE: 函数现在显式指定其被调用方必须是 deck 类型
    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();

console.log('card: ' + pickedCard.card + ' of ' + pickedCard.suit); // card: 1 of diamonds

现在 TypeScrip t知道 createCardPicker 期望在某个 Deck 对象上调用。也就是说 this 是 Deck 类型的，而非 any。

5.4.3 this 参数在回调函数里

你可以也看到过在回调函数里的 this 报错，当你将一个函数传递到某个库函数里稍后会被调用时。因为当回调被调用的时候，它们会被当成一个普通函数调用，this 将为 undefined。稍做改动，你就可以通过 this 参数来避免错误。首先，库函数的作者要指定 this 的类型：

interface UIElement {
    addClickListener(onclick: (this: void, e: Event) => void): void
}
this: void` 意味着 `addClickListener` 期望传入的 `onclick` 方法不需要 `this
interface UIElement {
    addClickListener (onclick: (this: void, e: Event) => void): void
}

class Handler {
    type: string

    onClickBad (this: Handler, e: Event) {
        this.type = e.type
    }
}

let h = new Handler()

let uiElement: UIElement = {
    addClickListener () {
    }
}

uiElement.addClickListener(h.onClickBad) // error!

指定了 this 类型后，你显式声明 onClickBad 必须在 Handler 的实例上调用。然后 TypeScript 会检测到 addClickListener 要求函数带有 this: void。改变 this 类型来修复这个错误：

class Handler {
    type: string;

    onClickBad (this: void, e: Event) {
        console.log('clicked!')
    }
}

let h = new Handler()

let uiElement: UIElement = {
    addClickListener () {
        
    }
}

uiElement.addClickListener(h.onClickBad)

因为 onClickGood 指定了 this 类型为 void，因此传递 addClickListener 是合法的。当然了，这也意味着不能使用 this.info。如果你两者都想要，你不得不使用箭头函数了：

class Handler {
    type: string
    onClickGood = (e: Event) => {
        this.type = e.type;
    }
}

这是可行的因为箭头函数不会捕获 this，所以你总是可以把它们传给期望 this: void 的函数。

5.5 重载

JavaScript 本身是个动态语言。JavaScript 里函数根据传入不同的参数而返回不同类型的数据的场景是很常见的。

let suits = ['hearts', 'spades', 'clubs', 'diamonds']

function pickCard(x): any {
    if (Array.isArray(x)) {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    } 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)];
console.log('card: ' + pickedCard1.card + ' of ' + pickedCard1.suit) // card: 10 of spades

let pickedCard2 = pickCard(15)
console.log('card: ' + pickedCard2.card + ' of ' + pickedCard2.suit) // card: 2 of spades

pickCard 方法根据传入参数的不同会返回两种不同的类型。如果传入的是代表纸牌的对象数组，函数作用是从中抓一张牌。如果用户想抓牌，我们告诉他抓到了什么牌。但是这怎么在类型系统里表示呢。

方法是为同一个函数提供多个函数类型定义来进行函数重载。编译器会根据这个列表去处理函数的调用。下面我们来重载 pickCard 函数。

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 (Array.isArray(x)) {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    } 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)];
console.log('card: ' + pickedCard1.card + ' of ' + pickedCard1.suit); // card: 4 of hearts


let pickedCard2 = pickCard(15)
console.log('card: ' + pickedCard2.card + ' of ' + pickedCard2.suit); // card: 2 of spades

这样改变后，重载的 pickCard 函数在调用的时候会进行正确的类型检查。

为了让编译器能够选择正确的检查类型，它与 JavaScript 里的处理流程相似。它查找重载列表，尝试使用第一个重载定义。如果匹配的话就使用这个。因此，在定义重载的时候，一定要把最精确的定义放在最前面。

注意，function pickCard(x): any 并不是重载列表的一部分，因此这里只有两个重载：一个是接收对象数组，另一个接收数字。以其它参数调用 pickCard 会产生错误。

6.泛型

软件工程中，我们不仅要创建定义良好且一致的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

6.1 泛型基础示例

下面来创建第一个使用泛型的例子：identity 函数。这个函数会返回任何传入它的值。你可以把这个函数当成是 echo 命令。

不用泛型的话，这个函数可能是下面这样：

1
2
3

function identity(arg: number): number {
    return arg;
}

或者，我们使用 any 类型来定义函数：

1
2
3

function identity(arg: any): any {
    return arg;
}

使用 any 类型会导致这个函数可以接收任何类型的 arg 参数，但是这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。

因此，我们需要一种方法使返回值的类型与传入参数的类型是相同的。这里，我们使用了类型变量，它是一种特殊的变量，只用于表示类型而不是值。

1
2
3

function identity<T>(arg: T): T {
    return arg;
}

我们给 identity 添加了类型变量 T。 T 帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。之后我们再次使用了 T 当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。这允许我们跟踪函数里使用的类型的信息。

我们把这个版本的 identity 函数叫做泛型，因为它可以适用于多个类型。不同于使用 any，它不会丢失信息，像第一个例子那像保持准确性，传入数值类型并返回数值类型。

我们定义了泛型函数后，可以用两种方法使用。第一种是，传入所有的参数，包含类型参数：

1	let output = identity<string>('myString');

这里我们明确的指定了 T 是 string 类型，并做为一个参数传给函数，使用了 <> 括起来而不是 ()。

第二种方法更普遍。利用了类型推论 – 即编译器会根据传入的参数自动地帮助我们确定 T 的类型：

1	let output = identity('myString');

注意我们没必要使用尖括号（<>）来明确地传入类型；编译器可以查看 myString 的值，然后把 T 设置为它的类型。类型推论帮助我们保持代码精简和高可读性。如果编译器不能够自动地推断出类型的话，只能像上面那样明确的传入 T 的类型，在一些复杂的情况下，这是可能出现的。

6.2 使用泛型变量

使用泛型创建像 identity 这样的泛型函数时，编译器要求你在函数体必须正确的使用这个通用的类型。换句话说，你必须把这些参数当做是任意或所有类型。

看下之前 identity 例子：

1
2
3

function identity<T>(arg: T): T {
    return arg;
}

如果我们想打印出 arg 的长度。我们很可能会这样做：

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);
    return arg;
}

如果这么做，编译器会报错说我们使用了 arg 的 .length 属性，但是没有地方指明 arg 具有这个属性。记住，这些类型变量代表的是任意类型，所以使用这个函数的人可能传入的是个数字，而数字是没有 .length 属性的。

现在假设我们想操作 T 类型的数组而不直接是 T。由于我们操作的是数组，所以 .length 属性是应该存在的。我们可以像创建其它数组一样创建这个数组：

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

你可以这样理解 loggingIdentity 的类型：泛型函数 loggingIdentity，接收类型参数 T 和参数 arg，它是个元素类型是 T 的数组，并返回元素类型是T 的数组。如果我们传入数字数组，将返回一个数字数组，因为此时 T 的的类型为 number。这可以让我们把泛型变量 T 当做类型的一部分使用，而不是整个类型，增加了灵活性。

6.3 泛型类型

上一节，创建的 identity 通用函数，可以适用于不同的类型。在这节种研究一下函数本身的类型，以及如何创建泛型接口。

泛型函数的类型与非泛型函数的类型没什么不同，只是有一个类型参数在最前面，像函数声明一样：

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以。

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <U>(arg: U) => U = identity;

我们还可以使用带有调用签名的对象字面量来定义泛型函数：

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: {
    <T>(arg: T): T
} = identity;

这引导我们去写第一个泛型接口了。我们把上面例子里的对象字面量拿出来做为一个接口：

interface GenericIdentityFn {
    <T>(arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn = identity;

我们甚至可以把泛型参数当作整个接口的一个参数。这样我们就能清楚的知道使用的具体是哪个泛型类型（比如： Dictionary<string> 而不只是Dictionary）。这样接口里的其它成员也能知道这个参数的类型了。

interface GenericIdentityFn<T> {
    (arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

注意，我们的示例做了少许改动。不再描述泛型函数，而是把非泛型函数签名作为泛型类型一部分。当我们使用 GenericIdentityFn 的时候，还得传入一个类型参数来指定泛型类型（这里是：number），锁定了之后代码里使用的类型。对于描述哪部分类型属于泛型部分来说，理解何时把参数放在调用签名里和何时放在接口上是很有帮助的。

除了泛型接口，我们还可以创建泛型类。注意，无法创建泛型枚举和泛型命名空间。

6.4 泛型类

泛型类看上去与泛型接口差不多。泛型类使用（ <>）括起泛型类型，跟在类名后面。

class GenericNumber<T> {
    zeroValue: T
    add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) {
    return x + y;
}

GenericNumber 类的使用是十分直观的，并且你可能已经注意到了，没有什么去限制它只能使用 number 类型。也可以使用字符串或其它更复杂的类型。

let stringNumeric = new GenericNumber<string>()
stringNumeric.zeroValue = ''
stringNumeric.add = function(x, y) { 
    return x + y;
}

console.log(stringNumeric.add(stringNumeric.zeroValue, 'test')); // script.ts(1,25): error TS2304: Cannot find name 'GenericNumber'.

与接口一样，直接把泛型类型放在类后面，可以帮助我们确认类的所有属性都在使用相同的类型。

我们在类那节说过，类有两部分：静态部分和实例部分。泛型类指的是实例部分的类型，所以类的静态属性不能使用这个泛型类型。

6.5 泛型约束

我们有时候想操作某类型的一组值，并且我们知道这组值具有什么样的属性。在 loggingIdentity 例子中，我们想访问 arg 的 length 属性，但是编译器并不能证明每种类型都有 length 属性，所以就报错了。

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);
    return arg;
}

相比于操作 any 所有类型，我们想要限制函数去处理任意带有 .length 属性的所有类型。只要传入的类型有这个属性，我们就允许，就是说至少包含这一属性。为此，我们需要列出对于 T 的约束要求。

我们定义一个接口来描述约束条件，创建一个包含 .length 属性的接口，使用这个接口和 extends 关键字来实现约束：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length) // OK
    return arg;
}

现在这个泛型函数被定义了约束，因此它不再是适用于任意类型：

1	loggingIdentity(3); // Error

我们需要传入符合约束类型的值，必须包含必须的属性：

loggingIdentity({
    length: 10,
    value: 3
}); // OK

6.5.1 在泛型约束中使用类型参数

你可以声明一个类型参数，且它被另一个类型参数所约束。比如，现在我们想要用属性名从对象里获取这个属性。并且我们想要确保这个属性存在于对象 obj 上，因此我们需要在这两个类型之间使用约束。

function getProperty<T, K extends keyof T> (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

7.类型推断

7.1 类型推断基础

TypeScript 里，在有些没有明确指出类型的地方，类型推断会帮助提供类型。如下面的例子：

1	let x = 3;

变量 x 的类型被推断为数字。这种推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时。

大多数情况下，类型推断是直截了当地。后面的小节，我们会浏览类型推断时的细微差别。

7.2 最佳通用类型

有些时候我们需要从几个表达式中推断类型，会使用这些表达式的类型来推断出一个最合适的通用类型。例如，

1	let x = [0, 1, null];

为了推断 x 的类型，我们必须考虑所有元素的类型。这里有两种选择：number 和 null。计算通用类型算法会考虑所有的候选类型，并给出一个兼容所有候选类型的类型。

由于最终的通用类型取自候选类型，有些时候候选类型共享一个公共结构，但是却没有一个类型能做为所有候选类型的超级类型。例如：

class Animal {
    numLegs: number
}

class Bee extends Animal {
    
}

class Lion extends Animal {
    
}

let zoo = [
    new Bee(),
    new Lion()
];

这里，我们想让 zoo 被推断为 Animal[] 类型，但是这个数组里没有对象是 Animal 类型的，因此不能推断出这个结果。为了更正，我们可以明确的声明我们期望的类型：

let zoo: Animal[] = [
    new Bee(),
    new Lion()
];

如果没有找到最佳通用类型的话，类型推断的结果为联合数组类型，(Bee | Lion)[]

7.3 上下文类型

有些时候，TypeScript 类型推断会按另外一种方式，我们称作“上下文类型”；上下文类型的出现和表达式的类型以及所处的位置相关。比如：

1
2
3

window.onmousedown = function(mouseEvent) {
    console.log(mouseEvent.clickTime);  // Error
}

这个例子会得到一个类型错误，TypeScript 类型检查器使用 window.onmousedown 函数的类型来推断右边函数表达式的类型。因此，就能推断出 mouseEvent 参数的类型了，所以 mouseEvent 访问了一个不存在的属性，就报错了。

如果上下文类型表达式包含了明确的类型信息，上下文的类型被忽略。重写上面的例子：

1
2
3

window.onmousedown = function(mouseEvent:any) {
    console.log(mouseEvent.clickTime)  // OK
}

这个函数表达式有明确的参数类型注解，上下文类型被忽略。这样的话就不报错了，因为这里不会使用到上下文类型。

上下文类型会在很多情况下使用到。通常包含函数的参数，赋值表达式的右边，类型断言，对象成员，数组字面量和返回值语句。上下文类型也会做为最佳通用类型的候选类型。比如：

function createZoo(): Animal[] {
    return [new Bee(), new Lion()];
}

let zoo = createZoo();

这个例子里，最佳通用类型有 3 个候选者：Animal，Bee 和 Lion。其中，Animal 会被做为最佳通用类型。

8.高级类型

8.1 交叉类型

交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。例如，Person & Loggable 同时是 Person 和 Loggable。就是说这个类型的对象同时拥有了这两种类型的成员。

我们大多是在混入（mixins）或其它不适合典型面向对象模型的地方看到交叉类型的使用。（在 JavaScript 里发生这种情况的场合很多！）下面是如何创建混入的一个简单例子：

function extend<T, U> (first: T, second: U): T & U {
    let result = {} as T & U;
    for (let id in first) {
        result[id] = first[id] as any;
    }
    for (let id in second) {
        if (!result.hasOwnProperty(id)) {
            result[id] = second[id] as any;
        }
    }
    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()

8.2 联合类型

联合类型与交叉类型很有关联，但是使用上却完全不同。偶尔你会遇到这种情况，一个代码库希望传入 number 或 string 类型的参数。例如下面的函数：

function padLeft(value: string, padding: any) {
    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}'.`);
}

padLeft('Hello world', 4) // returns "    Hello world"

padLeft 存在一个问题，padding 参数的类型指定成了 any。这就是说我们可以传入一个既不是 number 也不是 string 类型的参数，但是 TypeScript 却不报错。

1	let indentedString = padLeft('Hello world', true); // 编译阶段通过，运行时报错

为了解决这个问题，我们可以使用联合类型做为 padding 的参数：

function padLeft(value: string, padding: string | number) {
    // ...
}

let indentedString = padLeft('Hello world', true); // 编译阶段报错

联合类型表示一个值可以是几种类型之一。我们用竖线（|）分隔每个类型，所以 number | string 表示一个值可以是 number 或 string。

如果一个值是联合类型，我们只能访问此联合类型的所有类型里共有的成员。

interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function getSmallPet(): Fish | Bird {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim(); // error

这里的联合类型可能有点复杂：如果一个值的类型是 A | B，我们能够确定的是它包含了 A 和 B 中共有的成员。这个例子里，Fish 具有一个 swim 方法，我们不能确定一个 Bird | Fish 类型的变量是否有 swim方法。如果变量在运行时是 Bird 类型，那么调用 pet.swim() 就出错了。

8.3 类型保护

联合类型适合于那些值可以为不同类型的情况。但当我们想确切地了解是否为 Fish 或者是 Bird 时怎么办？ JavaScript 里常用来区分这 2 个可能值的方法是检查成员是否存在。如之前提及的，我们只能访问联合类型中共同拥有的成员。

let pet = getSmallPet();

// 每一个成员访问都会报错
if (pet.swim) {
    pet.swim();
} else if (pet.fly) {
    pet.fly();
}

为了让这段代码工作，我们要使用类型断言：

let pet = getSmallPet();

if ((pet as Fish).swim) {
    (pet as Fish).swim();
} else {
    (pet as Bird).fly();
}

8.3.1 用户自定义的类型保护

这里可以注意到我们不得不多次使用类型断言。如果我们一旦检查过类型，就能在之后的每个分支里清楚地知道 pet 的类型的话就好了。

TypeScript 里的类型保护机制让它成为了现实。类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。定义一个类型保护，我们只要简单地定义一个函数，它的返回值是一个类型谓词：

1
2
3

function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

在这个例子里，pet is Fish 就是类型谓词。谓词为 parameterName is Type 这种形式， parameterName 必须是来自于当前函数签名里的一个参数名。

每当使用一些变量调用 isFish 时，TypeScript 会将变量缩减为那个具体的类型。

if (isFish(pet)) {
    pet.swim();
}
else {
    pet.fly();
}

注意 TypeScript 不仅知道在 if 分支里 pet 是 Fish 类型；它还清楚在 else 分支里，一定不是 Fish类型而是 Bird 类型。

8.3.2 typeof 类型保护

现在我们回过头来看看怎么使用联合类型书写 padLeft 代码。我们可以像下面这样利用类型断言来写：

function isNumber (x: any):x is string {
    return typeof x === 'number';
}

function isString (x: any): x is string {
    return typeof x === 'string';
}

function padLeft (value: string, padding: string | number) {
    if (isNumber(padding)) {
        return Array(padding + 1).join(' ') + value;
    }
    if (isString(padding)) {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}

然而，你必须要定义一个函数来判断类型是否是原始类型，但这并不必要。其实我们不必将 typeof x === 'number'抽象成一个函数，因为 TypeScript 可以将它识别为一个类型保护。也就是说我们可以直接在代码里检查类型了。

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 并不会阻止你与其它字符串比较，只是 TypeScript 不会把那些表达式识别为类型保护。

8.3.3 instanceof 类型保护

如果你已经阅读了 typeof 类型保护并且对 JavaScript 里的 instanceof 操作符熟悉的话，你可能已经猜到了这节要讲的内容。

instanceof 类型保护是通过构造函数来细化类型的一种方式。我们把之前的例子做一个小小的改造：

class Bird {
    fly () {
        console.log('bird fly');
    }

    layEggs () {
        console.log('bird lay eggs');
    }
}

class Fish {
    swim () {
        console.log('fish swim');
    }

    layEggs () {
        console.log('fish lay eggs');
    }
}

function getRandomPet () {
    return Math.random() > 0.5 ? new Bird() : new Fish();
}

let pet = getRandomPet();

if (pet instanceof Bird) {
    pet.fly();
}
if (pet instanceof Fish) {
    pet.swim();
}

8.4 可以为 null 的类型

TypeScript 具有两种特殊的类型，null 和 undefined，它们分别具有值 null 和 undefined。我们在基础类型一节里已经做过简要说明。默认情况下，类型检查器认为 null 与 undefined 可以赋值给任何类型。 null 与 undefined 是所有其它类型的一个有效值。这也意味着，你阻止不了将它们赋值给其它类型，就算是你想要阻止这种情况也不行。null的发明者，Tony Hoare，称它为价值亿万美金的错误 (opens new window)。

--strictNullChecks 标记可以解决此错误：当你声明一个变量时，它不会自动地包含 null 或 undefined。你可以使用联合类型明确的包含它们：

let s = 'foo';
s = null; // 错误, 'null'不能赋值给'string'
let sn: string | null = 'bar';
sn = null; // 可以

sn = undefined; // error, 'undefined'不能赋值给'string | null'

注意，按照 JavaScript 的语义，TypeScript 会把 null 和 undefined 区别对待。string | null，string | undefined 和 string | undefined | null 是不同的类型。

8.4.1 可选参数和可选属性

使用了 --strictNullChecks，可选参数会被自动地加上 | undefined:

function f(x: number, y?: number) {
    return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' 不能赋值给 'number | undefined'

可选属性也会有同样的处理：

class C {
    a: number,
    b?: number
}
let c = new C();
c.a = 12;
c.a = undefined; // error, 'undefined' 不能赋值给 'number'
c.b = 13;
c.b = undefined; // ok
c.b = null; // error, 'null' 不能赋值给 'number | undefined'

8.4.2 类型保护和类型断言

由于可以为 null 的类型能和其它类型定义为联合类型，那么你需要使用类型保护来去除 null。幸运地是这与在 JavaScript 里写的代码一致：

function f(sn: string | null): string {
    if (sn === null) {
        return 'default';
    } else {
        return sn;
    }
}

这里很明显地去除了 null，你也可以使用短路运算符：

1
2
3

function f(sn: string | null): string {
    return sn || 'default';
}

如果编译器不能够去除 null 或 undefined，你可以使用类型断言手动去除。语法是添加 ! 后缀： identifier! 从 identifier 的类型里去除了 null 和 undefined：

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; // ok
    }
    name = name || 'Bob';
    return postfix('great');
}

broken(null);

本例使用了嵌套函数，因为编译器无法去除嵌套函数的 null（除非是立即调用的函数表达式）。因为它无法跟踪所有对嵌套函数的调用，尤其是你将内层函数做为外层函数的返回值。如果无法知道函数在哪里被调用，就无法知道调用时 name 的类型。

8.5 字符串字面量类型

字符串字面量类型允许你指定字符串必须具有的确切值。在实际应用中，字符串字面量类型可以与联合类型，类型保护很好的配合。通过结合使用这些特性，你可以实现类似枚举类型的字符串。

type Easing = 'ease-in' | 'ease-out' | 'ease-in-out';

class UIElement {
    animate (dx: number, dy: number, easing: Easing) {
        if (easing === 'ease-in') {
            // ...
        } else if (easing === 'ease-out') {
        } else if (easing === 'ease-in-out') {
        } else {
            // error! 不能传入 null 或者 undefined.
        }
    }
}

let button = new UIElement();
button.animate(0, 0, 'ease-in');
button.animate(0, 0, 'uneasy'); // error

你只能从三种允许的字符中选择其一来做为参数传递，传入其它值则会产生错误。

1	Argument of type '"uneasy"' is not assignable to parameter of type '"ease-in" \| "ease-out" \| "ease-in-out"'

8.6 总结

那么到这里，我们的 TypeScript 常用语法学习就告一段落了，当然 TypeScript 还有其他的语法我们并没有讲，我们只是讲了 TypeScript 的一些常用语法，你们把这些知识学会已经足以开发一般的应用了。如果你在使用 TypeScript 开发项目中遇到了其他的 TypeScript 语法知识，你可以通过 TypeScript 的官网文档 (opens new window)学习。因为学基础最好的方法还是去阅读它的官网文档，敲上面的小例子。其实我们课程的基础知识结构也是大部分参考了官网文档，要记住学习一门技术的基础官网文档永远是最好的第一手资料。