TypeScript入门与实战

Web 2.0时代的到来以及智能移动设备的普及改变了人们使用互联网的方式，Web开发也逐渐成为热门的开发领域。对JavaScript程序员来说，这既是机遇也是挑战。

机遇在于它创造了大量的就业机会以及不错的职业发展前景。HTML 5技术的发展赋予了Web应用更强大的能力以及更多的可能性；Node.js让JavaScript程序的运行脱离了浏览器环境，可以在服务器端运行；Electron解决方案的出现大大简化了跨平台桌面应用程序的开发工作；TensorFlow.js平台将JavaScript语言与机器学习联系在了一起。

那么，挑战又有哪些呢？首先，业务场景变多了，业务逻辑也变复杂了，JavaScript工程的规模在以肉眼可见的速度膨胀。其次，JavaScript这门语言是一门弱类型的动态脚本语言，设计初衷并非用于大规模网页应用程序的开发。当我们以现在的眼光来看待这门语言时，会发现它自身有很多不足之处。在JavaScript程序开发过程中，开发者稍不留神就可能引入难以察觉的缺陷。虽然JavaScript（ECMAScript）语言标准制定组织（TC39）一直在不断地完善这门语言，但这并不意味着开发者能够很快地在日常开发中应用这些新特性，因为需要运行时环境的支持。这也是困扰Web开发者已久的难题之一，即浏览器兼容性问题。*后，我们再看看生产力的问题。现如今许多项目都在使用敏捷开发方法来应对变化并频繁地交付。在使用JavaScript语言进行开发的过程中，像“跳转到定义”和“重命名标识符”等常用的操作都没有很好的工具支持，这也给开发与维护大型JavaScript程序增添了一些困难。

针对这些问题已经有不少解决方案，但在众多的解决方案中，TypeScript语言脱颖而出。TypeScript语言以平滑的方式为JavaScript语言添加了强类型并提供了强大的开发者工具。TypeScript语言是JavaScript语言的超集，沿用了JavaScript语言的语法和语义，极大地降低了学习成本以及程序迁移的成本。

本书将系统地介绍TypeScript编程语言的基础知识。在TypeScript语言的知识结构中至少包含了以下两大部分：

JavaScript语言编程。

TypeScript新增的语言特性以及核心的类型系统。

原则上，若想全面地了解TypeScript语言，就需要掌握JavaScript语言的所有知识，因为TypeScript语言包含了JavaScript语言的全部知识。本书会对JavaScript语言的基础知识进行概括的介绍，目的是让缺少JavaScript语言开发经验的读者也能够理解TypeScript语言。目前已经有很多讲解JavaScript语言的经典书籍，如《JavaScript权威指南（原书第6版）》和《深入理解ES6》等。

TypeScript新增的语言特性以及核心的类型系统是本书的重点，我们将使用大部分篇幅来介绍这部分知识。本书是基于TypeScript 3.8版本编写的。

本书适合正在考虑使用或已经开始使用TypeScript的读者阅读，也适用于所有有兴趣了解TypeScript这门语言的读者。在阅读本书之前，读者*好至少了解一门编程语言，也可先去学习一下JavaScript语言基础。

【本书主要内容如下】：

*篇“初识TypeScript”包括第1～2章，介绍TypeScript诞生的背景及其特点，搭建了TypeScript语言的开发环境并完成了*个TypeScript程序。

第二篇“TypeScript语言概览”包括第3～4章，介绍JavaScript语言的基础知识，以及JavaScript语言中一些较新的特性。

第三篇“TypeScript类型系统”包括第5～7章，详细讲解TypeScript的核心类型系统。

第四篇“TypeScript应用”包括第8～9章，介绍TypeScript工程配置的管理以及与开发工具的集成。

在阅读本书时，如果读者已经掌握了JavaScript语言的知识，那么可以跳过“TypeScript语言概览”部分，从“TypeScript类型系统”部分开始阅读。否则，建议读者按顺序阅读，同时还可以

配合使用其他资料来深入了解JavaScript语言。

本书中的所有代码均使用等宽字体表示并且带有行号，所有示例代码均可在GitHub网站上找到，微信关注“华章计算机”，回复“66972”获取下载地址。

本书系统化介绍TypeScript程序设计,包括四大部分。

第①篇“初识TypeScript”介绍TypeScript与JavaScript的关系以及快速开始编写*个TypeScript程序。

第②篇“ TypeScript语言概览”介绍TypeScript语言基础、迭代器与生成器、装饰器、命名空间、模块等。

第③篇“TypeScript类型系统”介绍TypeScript类型，如面量、枚举、非Nullable、非Nullable等，还介绍了更多高级类型，如联合、交叉、索引、映射对象、泛型、类类型、接口、类型别名、多态的this、有条件类型、类型查询、类型断言等，*后介绍类型更深入内容，如类型声明合并、类型推论、类型兼容性、外部类型声明、编写声明文件等。

第④篇“TypeScript应用”通过综合案例介绍TypeScript的配置管理、开发技巧等。

钟胜平 

有近10年的Web开发经验以及若干TypeScript项目的开发经验。参与过多个大型项目的开发，涉及信息服务、工业自动化、医疗等领域，深入了解JavaScript及其应用，在工作中积累了大量经验，善于总结，乐于分享，写了大量技术文章。

【*篇　初识TypeScript】
第1章　TypeScript简介 2
1.1　什么是TypeScript 2
1.1.1　始于JavaScript，终于JavaScript 3
1.1.2　可选的静态类型 4
1.1.3　开放与跨平台 4
1.2　为什么要使用TypeScript 5
1.2.1　易于发现代码中的错误 5
1.2.2　提高生产力 6
1.2.3　支持JavaScript的*特性 7
1.3　成功案例 8
1.3.1　Visual Studio Code 8
1.3.2　Angular 9

第2章　快速开始 10
2.1　在线编写并运行TypeScript 10
2.1.1　Hello World! 11
2.1.2　扩展功能：选择TypeScript版本 12
2.1.3　扩展功能：TypeScript配置项 12
2.2　本地编写并运行TypeScript 13
2.2.1　选择代码编辑器 13
2.2.2　安装Visual Studio Code 15
2.2.3　安装TypeScript 15
2.2.4　创建文件 16
2.2.5　编译程序 17
2.2.6　运行程序 18
2.2.7　可选步骤：设置默认构建任务 18

【第二篇　TypeScript语言概览】

第3章　TypeScript语言基础 22
3.1　变量 22
3.1.1　变量名 23
3.1.2　变量声明 23
3.2　注释 24
3.2.1　单行注释与多行注释 25
3.2.2　区域注释 25
3.3　数据类型 26
3.3.1　Undefined 27
3.3.2　Null 27
3.3.3　Boolean 27
3.3.4　String 27
3.3.5　Number 28
3.3.6　Symbol 28
3.3.7　Object 29
3.4　字面量 29
3.4.1　Null字面量 30
3.4.2　Boolean字面量 30
3.4.3　Number字面量 30
3.4.4　字符串字面量 30
3.4.5　模板字面量 30
3.5　对象 31
3.5.1　对象字面量 31
3.5.2　原型对象 32
3.6　数组 34
3.6.1　数组字面量 34
3.6.2　数组中的元素 34
3.7　函数 34
3.7.1　函数声明 34
3.7.2　函数表达式 35
3.7.3　箭头函数 36

第4章　TypeScript语言进阶 37
4.1　BigInt 37
4.1.1　创建BigInt 38
4.1.2　BigInt与Number 38
4.2　展开运算符 39
4.2.1　展开数组字面量 39
4.2.2　展开对象字面量 39
4.2.3　展开函数参数 39
4.3　解构 40
4.3.1　数组解构 40
4.3.2　对象解构 40
4.4　可选链运算符 40
4.4.1　基础语法 41
4.4.2　短路求值 41
4.5　空值合并运算符 42

【第三篇　TypeScript类型系统】

第5章　TypeScript类型基础 44
5.1　类型注解 44
5.2　类型检查 45
5.2.1　非严格类型检查 45
5.2.2　严格类型检查 45
5.3　原始类型 46
5.3.1　boolean 46
5.3.2　string 47
5.3.3　number 47
5.3.4　bigint 47
5.3.5　symbol与unique symbol 47
5.3.6　Nullable 50
5.3.7　void 53
5.4　枚举类型 54
5.4.1　数值型枚举 55
5.4.2　字符串枚举 56
5.4.3　异构型枚举 57
5.4.4　枚举成员映射 58
5.4.5　常量枚举成员与计算枚举成员 58
5.4.6　联合枚举类型 62
5.4.7　const枚举类型 65
5.5　字面量类型 66
5.5.1　boolean字面量类型 66
5.5.2　string字面量类型 67
5.5.3　数字字面量类型 67
5.5.4　枚举成员字面量类型 68
5.6　单元类型 68
5.7　*类型 69
5.7.1　any 69
5.7.2　unknown 71
5.7.3　小结 73
5.8　尾端类型 74
5.8.1　never 74
5.8.2　应用场景 75
5.9　数组类型 76
5.9.1　数组类型定义 76
5.9.2　数组元素类型 78
5.9.3　只读数组 79
5.10　元组类型 80
5.10.1　元组的定义 80
5.10.2　只读元组 81
5.10.3　访问元组中的元素 82
5.10.4　元组类型中的可选元素 83
5.10.5　元组类型中的剩余元素 83
5.10.6　元组的长度 84
5.10.7　元组类型与数组类型的兼容性 85
5.11　对象类型 85
5.11.1　Object 86
5.11.2　object 89
5.11.3　对象类型字面量 91
5.11.4　弱类型 97
5.11.5　多余属性 97
5.12　函数类型 102
5.12.1　常规参数类型 102
5.12.2　可选参数类型 102
5.12.3　默认参数类型 104
5.12.4　剩余参数类型 105
5.12.5　解构参数类型 106
5.12.6　返回值类型 106
5.12.7　函数类型字面量 108
5.12.8　调用签名 109
5.12.9　构造函数类型字面量 110
5.12.10　构造签名 111
5.12.11　调用签名与构造签名 111
5.12.12　重载函数 112
5.12.13　函数中this值的类型 118
5.13　接口 119
5.13.1　接口声明 119
5.13.2　属性签名 120
5.13.3　调用签名 120
5.13.4　构造签名 121
5.13.5　方法签名 121
5.13.6　索引签名 122
5.13.7　可选属性与方法 125
5.13.8　只读属性与方法 126
5.13.9　接口的继承 127
5.14　类型别名 129
5.14.1　类型别名声明 129
5.14.2　递归的类型别名 130
5.14.3　类型别名与接口 132
5.15　类 133
5.15.1　类的定义 134
5.15.2　成员变量 135
5.15.3　成员函数 138
5.15.4　成员存取器 138
5.15.5　索引成员 140
5.15.6　成员可访问性 140
5.15.7　构造函数 143
5.15.8　参数成员 144
5.15.9　继承 145
5.15.10　实现接口 150
5.15.11　静态成员 151
5.15.12　抽象类和抽象成员 153
5.15.13　this类型 155
5.15.14　类类型 156

第6章　TypeScript类型进阶 158
6.1　泛型 158
6.1.1　泛型简介 159
6.1.2　形式类型参数 160
6.1.3　实际类型参数 161
6.1.4　泛型约束 162
6.1.5　泛型函数 165
6.1.6　泛型接口 167
6.1.7　泛型类型别名 168
6.1.8　泛型类 169
6.2　局部类型 170
6.3　联合类型 171
6.3.1　联合类型字面量 171
6.3.2　联合类型的类型成员 173
6.4　交叉类型 176
6.4.1　交叉类型字面量 176
6.4.2　交叉类型的类型成员 178
6.4.3　交叉类型与联合类型 180
6.5　索引类型 181
6.5.1　索引类型查询 182
6.5.2　索引访问类型 185
6.5.3　索引类型的应用 186
6.6　映射对象类型 187
6.6.1　映射对象类型声明 187
6.6.2　映射对象类型解析 188
6.6.3　映射对象类型应用 188
6.6.4　同态映射对象类型 190
6.7　条件类型 196
6.7.1　条件类型的定义 196
6.7.2　分布式条件类型 197
6.7.3　infer关键字 199
6.8　内置工具类型 201
6.8.1　Partial<T> 201
6.8.2　Required<T> 202
6.8.3　Readonly<T> 202
6.8.4　Record<K, T> 202
6.8.5　Pick<T, K> 202
6.8.6　Omit<T, K> 203
6.8.7　Exclude<T, U> 203
6.8.8　Extract<T, U> 203
6.8.9　NonNullable<T> 203
6.8.10　Parameters<T> 204
6.8.11　ConstructorParameters<T> 204
6.8.12　ReturnType<T> 204
6.8.13　InstanceType<T> 205
6.8.14　ThisParameterType<T> 205
6.8.15　OmitThisParameter<T> 206
6.8.16　ThisType<T> 206
6.9　类型查询 206
6.10　类型断言 207
6.10.1　<T>类型断言 208
6.10.2　as T类型断言 208
6.10.3　类型断言的约束 209
6.10.4　const类型断言 210
6.10.5　!类型断言 212
6.11　类型细化 213
6.11.1　类型守卫 214
6.11.2　可辨识联合类型 225
6.11.3　赋值语句分析 232
6.11.4　基于控制流的类型分析 233
6.11.5　断言函数 233

第7章　TypeScript类型深入 238
7.1　子类型兼容性 238
7.1.1　类型系统可靠性 239
7.1.2　子类型的基本性质 239
7.1.3　*类型与尾端类型 240
7.1.4　原始类型 240
7.1.5　函数类型 241
7.1.6　对象类型 245
7.1.7　泛型 249
7.1.8　联合类型 250
7.1.9　交叉类型 251
7.2　赋值兼容性 251
7.3　类型推断 253
7.3.1　常规类型推断 253
7.3.2　按上下文归类 255
7.4　类型放宽 256
7.4.1　常规类型放宽 256
7.4.2　字面量类型放宽 257
7.5　命名空间 261
7.5.1　命名空间声明 262
7.5.2　导出命名空间内的声明 263
7.5.3　别名导入声明 265
7.5.4　在多文件中使用命名空间 266
7.5.5　小结 269
7.6　模块 269
7.6.1　模块简史 269
7.6.2　ECMAScript模块 273
7.6.3　模块导出 273
7.6.4　模块导入 276
7.6.5　重命名模块导入和导出 278
7.6.6　针对类型的模块导入与导出 280
7.6.7　动态模块导入 284
7.6.8　--module 285
7.7　外部声明 286
7.7.1　外部类型声明 287
7.7.2　外部模块声明 292
7.8　使用声明文件 293
7.8.1　语言内置的声明文件 293
7.8.2　第三方声明文件 293
7.8.3　自定义声明文件 298
7.9　模块解析 299
7.9.1　相对模块导入 299
7.9.2　非相对模块导入 300
7.9.3　模块解析策略 301
7.9.4　模块解析策略之Classic 301
7.9.5　模块解析策略之Node 304
7.9.6　--baseUrl 308
7.9.7　paths 310
7.9.8　rootDirs 312
7.9.9　导入外部模块声明 312
7.9.10　--traceResolution 313
7.10　声明合并 314
7.10.1　接口声明合并 315
7.10.2　枚举声明合并 317
7.10.3　类声明合并 318
7.10.4　命名空间声明合并 318
7.10.5　扩充模块声明 321
7.10.6　扩充全局声明 322

【第四篇　TypeScript应用】

第8章　TypeScript配置管理 324
8.1　编译器 324
8.1.1　安装编译器 325
8.1.2　编译程序 326
8.2　编译选项 328
8.2.1　编译选项风格 328
8.2.2　使用编译选项 330
8.2.3　严格类型检查 331
8.2.4　编译选项列表 337
8.3　tsconfig.json 338
8.3.1　使用配置文件 338
8.3.2　编译选项列表 340
8.3.3　编译文件列表 342
8.3.4　声明文件列表 346
8.3.5　继承配置文件 348
8.4　工程引用 351
8.4.1　使用工程引用 352
8.4.2　工程引用示例 353
8.4.3　--build 354
8.4.4　solution模式 356
8.5　JavaScript类型检查 357
8.5.1　编译JavaScript 357
8.5.2　JavaScript类型检查 358
8.5.3　JSDoc与类型 360
8.6　三斜线指令 363
8.6.1　/// <reference path="" /> 364
8.6.2　/// <reference types="" /> 366
8.6.3　/// <reference lib="" /> 367

第9章　TypeScript项目实践 371
9.1　TypeScript与Babel 371
9.1.1　Babel 372
9.1.2　TypeScript编译器 372
9.1.3　实例演示 374
9.1.4　注意事项 380
9.1.5　小结 381
9.2　TypeScript与webpack 381
9.2.1　webpack 381
9.2.2　实例演示 381
9.2.3　小结 385
9.3　TypeScript与ESLint 385
9.3.1　ESLint 386
9.3.2　实例演示 386
9.3.3　集成Visual Studio Code 390
9.3.4　小结 393
9.4　TypeScript与Visual Studio Code 393
9.4.1　代码格式化 394
9.4.2　组织模块导入语句 395
9.4.3　代码导航 395
9.4.4　快速修复 396
9.4.5　重构工具 396
9.4.6　CodeLens 397