[套装书]TypeScript图形渲染实战：基于WebGL的3D架构与实现+TypeScript实战指南（2册）

1.3.4 配置tsconfig.json文件 12
1.3.5 调用build和dev命令 13
1.3.6 使用watch命令 14
1.3.7 联合使用watch和dev命令 15
1.3.8 使用Webpack压缩打包源码 16
1.4 SysemJS VS. Webpack 16
1.5 编译（Compile）VS.转义（Transpile） 18
1.6 断点调试 19
1.6.1 安装及配置Debugger for Chrome扩展 19
1.6.2 断点调试TypeScript程序 20
1.6.3 VS Code Debug快捷键 21
1.7 本章总结 21
第2章 TypeScript封装和实现常用容器 22
2.1 ArrayBuffer、DataView及类型数组实现原理 23
2.1.1 C/C++模拟JS/TS中的ArrayBuffer对象 23
2.1.2 C/C++模拟JS/TS中的DataView对象 24
2.1.3 C/C++版CDataView VS. JS/TS版DataView 25
2.1.4 C/C++模拟JS/TS中的Float32Array对象 26
2.1.5 C/C++版CFloat32Array VS. JS/TS版Float32Array 28
2.1.6 JS/TS中的类型数组对象 30
2.2 封装动态类型数组 31
2.2.1 TypedArrayList的成员变量及构造函数 31
2.2.2 TypedArrayList的push方法 32
2.2.3 TypedArrayList的slice方法和subarray方法 33
2.2.4 TypedArrayList的其他方法和属性 35
2.2.5 capacityChangedCallback回调函数 36
2.3 封装关联数组 36
2.3.1 JS/TS中的关联数组 37
2.3.2 TypeScript索引签名 37
2.3.3 ES 6 Map对象 38
2.3.4 封装成Dictionary字典对象 39
2.3.5 测试Dictionary对象 42
2.3.6 红黑树还是哈希表 42
2.4 实现SGI STL风格双向循环链表 44
2.4.1 泛型的ListNode结构 45
2.4.2 List中的头节点 45
2.4.3 双向循环概念 46
2.4.4 List的查询与遍历操作 46
2.4.5 List的插入操作 48
2.4.6 List的删除操作 50
2.4.7 List的push / pop / push_front / pop_front操作 51
2.5 封装队列与栈 51
2.5.1 声明IAdapter泛型接口 52
2.5.2 实现AdapterBase抽象基类 52
2.5.3 实现Queue子类和Stack子类 53
2.6 实现通用树结构 54
2.6.1 树结构的内存表示 54
2.6.2 树节点添加时的要点 55
2.6.3 树节点isDescendantOf和remove方法的实现 56
2.6.4 实现addChild等方法 58
2.6.5 查询树结构的层次关系 59
2.6.6 广度/深度优先遍历算法 60
2.6.7 队列及栈在广度/深度优先遍历中的应用 62
2.6.8 广度/深度线性遍历枚举器 63
2.6.9 树结构枚举器的实现 63
2.6.10 测试树结构迭代器 67
2.6.11 深度优先的递归遍历 71
2.7 本章总结 73
第2篇 WebGL图形编程基础
第3章 WebGLApplication框架 76
3.1 Application体系结构概述 77
3.2 第一个WebGL Demo 78
3.2.1 技术要点描述 78
3.2.2 Demo的成员变量与构造函数 80
3.2.3 资源同步加载 82
3.2.4 立方体、坐标系、三角形及文字渲染 83
3.2.5 更新操作 85
3.2.6 键盘输入事件处理 86
3.2.7 总结Application框架的使用流程 87
3.3 Application框架实现 87
3.3.1 成员变量与构造函数 88
3.3.2 启动/查询/停止Application 89
3.3.3 不间断地更新操作 90
3.3.4 CanvasInputEvent及其子类 92
3.3.5 DOM中的getBoundingRect方法 93
3.3.6 实现viewportToCanvasCoordinate方法 94
3.3.7 将DOM Event事件转换为CanvasInputEvent事件 95
3.3.8 实现EventListenerObject接口进行事件分发 96
3.3.9 让事件起作用 97
3.3.10 定时器Timer系统 97
3.3.11 增删定时器对象 98
3.3.12 触发多个定时任务的操作 100
3.3.13 WebGLApplication子类 101
3.3.14 CameraApplication子类 102
3.4 HTML页面系统 103
3.4.1 HTML页面系统简介 103
3.4.2 HTML页面源码 104
3.4.3 入口文件main.ts 105
3.5 异步资源加载及同步操作 107
3.5.1 使用Promise封装HTTP异步请求 107
3.5.2 实现AsyncLoadTestApplication类 109
3.5.3 异步run函数的覆写（override）与测试 110
3.5.4 Promise.all异步并发加载及同步操作 111
3.5.5 本书后续的资源加载及同步策略 114
3.6 本章总结 114
第4章 WebGL基础 116
4.1 WebGL中的类 116
4.2 准备工作 117
4.2.1 创建WebGLRenderingContext对象 117
4.2.2 WebGLContextAttributes对象与帧缓冲区 118
4.2.3 渲染状态 120
4.2.4 WebGLContextEvent事件 121
4.3 基本几何图元绘制Demo 122
4.3.1 视矩阵、投影矩阵、裁剪和视口 122
4.3.2 GLSL ES着色语言 123
4.3.3 WebGLShader对象 126
4.3.4 GLSL ES精度限定符与WebGLShaderPrecisionFormat对象 128
4.3.5 WebGLProgram对象 130
4.3.6 WebGLActiveInfo对象 132
4.3.7 WebGLUniformLocation对象 134
4.3.8 WebGLBuffer对象 137
4.3.9 渲染数据存储思考 140
4.3.10 Interleaved数组的存储、寻址及绘制 141
4.3.11 drawArrays绘制基本几何图元 144
4.3.12 详解基本几何图元 146
4.3.13 drawElements绘制方法 149
4.4 本章总结 152
第5章 WebGLUtilLib渲染框架 153
5.1 WebGLUtilLib框架类结构体系 153
5.2 GLAttribState类的实现 155
5.2.1 预定义顶点属性常量值 156
5.2.2 GLAttribState类的bit位操作 157
5.2.3 getInterleavedLayoutAttribOffsetMap方法 158
5.2.4 getSequencedLayoutAttribOffsetMap方法 160
5.2.5 getSepratedLayoutAttribOffsetMap方法 161
5.2.6 getVertexByteStride方法 162
5.2.7 setAttribVertexArrayPointer方法 163
5.2.8 setAttribVertexArrayState方法 164
5.3 GLProgram相关类的实现 166
5.3.1 常用的VS和FS uniform变量 166
5.3.2 GLProgram的成员变量和构造函数 167
5.3.3 loadShaders方法 168
5.3.4 绑定和解绑GLProgram 169
5.3.5 载入uniform变量 170
5.3.6 GLProgramCache类 171
5.3.7 GLShaderSource对象 172
5.3.8 初始化常用的着色器 173
5.4 GLMesh相关类的实现 174
5.4.1 VAO对象与GLMeshBase类 174
5.4.2 GLStaticMesh类实现细节 175
5.4.3 GLMeshBuilder类成员变量 178
5.4.4 GLMeshBuilder类构造方法 179
5.4.5 GLMeshBuilder类的color、texcoord、normal和vertex方法 181
5.4.6 GLMeshBuilder类的begin和end方法 184
5.5 GLTexture类的实现 187
5.5.1 GLTexture的成员变量和构造函数 187
5.5.2 GLTexture类的upload方法 188
5.5.3 mipmap相关的静态方法 189
5.5.4 GLTexture的bind / unbind、wrap和filter方法 190
5.5.5 GLTexture的createDefaultTexture静态方法 191
5.6 本章总结 192
第6章 3D图形中的数学基础 193
6.1 坐标系 193
6.1.1 OpenGL / WebGL中的坐标系 193
6.1.2 左手坐标系与右手坐标系 194
6.2 TSM数学库 196
6.3 向量 197
6.3.1 向量的概念 197
6.3.2 向量的大小（或长度） 198
6.3.3 两个向量之间的距离 199
6.3.4 单位向量 199
6.3.5 向量的加法 199
6.3.6 向量的减法 200
6.3.7 向量的缩放 201
6.3.8 负向量 202
6.3.9 向量的点乘 202
6.3.10 向量的叉乘 203
6.4 矩阵 204
6.4.1 矩阵的定义 205
6.4.2 矩阵的乘法 205
6.4.3 单位矩阵 206
6.4.4 矩阵的转置 207
6.4.5 矩阵的行列式与求逆 207
6.5 仿射变换 208
6.5.1 平移矩阵 209
6.5.2 缩放矩阵 209
6.5.3 绕任意轴旋转矩阵 210
6.6 视图矩阵与投影矩阵 211
6.6.1 视图（摄像机）矩阵 212
6.6.2 投影矩阵 213
6.7 四元数 214
6.8 平面 215
6.8.1 构造平面 216
6.8.2 平面的单位化 217
6.8.3 点与平面的距离与关系 217
6.9 矩阵堆栈 218
6.9.1 构造函数与worldMatrix属性 219
6.9.2 矩阵的入栈、出栈及load方法 219
6.9.3 仿射变换操作 220
6.10 摄像机 220
6.10.1 成员变量和构造函数 221
6.10.2 摄像机的移动和旋转 222
6.10.3 摄像机的更新 224
6.10.4 摄像机的相关属性 225
6.11 WebGLCoordSystem类 227
6.12 本章总结 228
第7章 多视口渲染基本几何体、坐标系及文字 230
7.1 使用GLMeshBuilder多视口渲染基本几何体 230
7.1.1 Demo的需求描述 230
7.1.2 Demo的成员变量和构造函数 231
7.1.3 drawByMatrixWithColorShader方法绘制流程 233
7.1.4 使用INTERLEAVED顶点存储格式绘制三角形 234
7.1.5 使用SEQUENCED顶点存储格式绘制四边形 235
7.1.6 使用SEPARATED顶点存储格式绘制立方体 236
7.1.7 创建多视口的方法 239
7.1.8 WebGL中的纹理坐标系 240
7.1.9 drawByMultiViewportsWithTextureShader方法绘制流程 240
7.1.10 绘制纹理立方体 242
7.1.11 实现Atlas纹理贴图效果 243
7.1.12 收尾工作 245
7.2 坐标系、文字渲染及空间变换Demo 246
7.2.1 Demo的需求描述 246
7.2.2 Demo的成员变量和构造函数 247
7.2.3 生成单视口或多视口坐标系数组 248
7.2.4 覆写（override）更新和渲染虚方法 249
7.2.5 覆写（override）键盘事件处理虚方法 250
7.2.6 drawFullCoordSystem方法 250
7.2.7 drawFullCoordSystemWithRotatedCube方法 252
7.2.8 DrawHelper类的drawFullCoordSystem方法 254
7.2.9 深度测试对坐标系绘制的影响 255
7.2.10 drawText方法 256
7.2.11 MathHelper类的obj2GLViewportSpace方法 258
7.2.12 3D图形中的数学变换流水线 258
7.3 本章总结 259
第3篇 开发实战
第8章 解析与渲染Quake3 BSP场景 262
8.1 Q3BspApplication入口类 262
8.2 解析Quake3 BSP二进制文件 264
8.2.1 Quake3BspParser类的常量定义 264
8.2.2 Q3BSPLump结构定义 265
8.2.3 解析BSP文件头 266
8.2.4 解析实体字符串数据 267
8.2.5 解析材质数据 269
8.2.6 解析顶点数据 270
8.2.7 解析顶点索引数据 273
8.2.8 解析渲染表面数据 273
8.2.9 Quake3与WebGL坐标系转换 276
8.3 渲染Quake3 BSP场景 277
8.3.1 Quake3BspScene的初始化 278
8.3.2 DrawSurface对象 278
8.3.3 封装Promise加载所有纹理 279
8.3.4 生成GLStaticMesh对象 280
8.3.5 绘制整个BSP场景 282
8.4 本章总结 283
第9章 解析和渲染Doom3 PROC场景 285
9.1 Doom3Application入口类 285
9.2 解析Doom3 PROC场景 286
9.2.1 Doom3词法解析规则 287
9.2.2 IDoom3Tokenizer词法解析器 287
9.2.3 Doom3 PROC文件格式总览 288
9.2.4 Doom3ProcParser的parse方法 289
9.2.5 Doom3Area、Doom3Surface及Doom3Vertex类 290
9.2.6 Doom3ProcParser的_readArea方法 292
9.2.7 Doom3ProcParser的_readSurface方法 293
9.2.8 Doom3ProcParser的_readPortals方法 295
9.2.9 Doom3ProcParser的_readNodes方法 297
9.3 使用Doom3ProcScene加载和渲染PROC场景 298
9.3.1 RenderSurface对象 299
9.3.2 Doom3ProcScene的draw方法 299
9.3.3 Doom3ProcScene类的loadTextures方法 300
9.3.4 Doom3ProcScene的parseDoom3Map方法 301
9.4 AABB包围盒 303
9.4.1 AABB包围盒与OBB包围盒的特点 304
9.4.2 构建AABB包围盒 304
9.4.3 计算AABB包围盒的9个顶点坐标值 306
9.4.4 计算变换后的AABB包围盒 307
9.4.5 AABB包围盒的两个常用碰检算法 307
9.5 摄像机视截体 308
9.5.1 摄像机视截体的概念 308
9.5.2 Frustum类的成员变量和构造函数 309
9.5.3 buildFromCamera方法的实现 310
9.5.4 让Camera类支持Frustum 312
9.5.5 Frustum与包围盒及三角形的可见行测试 313
9.5.6 让GLStaticMesh支持包围盒 314
9.5.7 更新Doom3ProcScene的draw方法 314
9.5.8 将Frustum绘制出来 315
9.5.9 Doom3ProcScene类增加包围盒绘制方法 316
9.6 本章总结 316
第10章 解析和渲染Doom3 MD5骨骼蒙皮动画 318
10.1 骨骼蒙皮动画原理 318
10.1.1 骨骼蒙皮动画效果演示 319
10.1.2 骨骼蒙皮动画中的各种坐标系 320
10.1.3 骨骼蒙皮动画数学关键点的问答 321
10.2 解析和渲染.md5mesh文件格式 322
10.2.1 .md5mesh文件解析流程 323
10.2.2 .md5mesh中的绑定姿态 324
10.2.3 解析绑定姿态 325
10.2.4 .md5mesh中的蒙皮数据 326
10.2.5 解析蒙皮数据 329
10.2.6 计算顶点最终位置 330
10.2.7 加载和生成纹理 331
10.2.8 绘制绑定姿态（BindPose） 332
10.3 解析和渲染.md5anim文件格式 333
10.3.1 .md5anim的解析流程 333
10.3.2 解析.md5anim中的关节层次信息 334
10.3.3 解析.md5anim中的包围盒数据 336
10.3.4 解析.md5anim中的baseframe数据 337
10.3.5 解析.md5anim中的frame数据 338
10.3.6 帧动作姿态结构 339
10.3.7 MD5Anim类的buildLocalSkeleton方法 340
10.3.8 MD5Anim类的updateToModelSpaceSkeleton方法 342
10.3.9 MD5SkinedMesh类的playAnim方法 342
10.3.10 MD5SkinedMesh的drawAnimPose方法 343
10.4 实现MD5SkinedMeshApplication Demo 344
10.5 本章总结 346



---------------------------TypeScript实战指南---------------------------


前言
基础篇
第1章　Hello TypeScript 2
1.1　引言 2
1.1.1　JavaScript 与 ECMAScript 3
1.1.2　TypeScript 5
1.2　准备环境 8
1.2.1　安装 Node.js 8
1.2.2　npm和 Yarn 9
1.2.3　安装 TypeScript 10
1.3　Visual Studio Code 11
1.3.1　安装VSCode 11
1.3.2　安装Shell 命令 12
1.4　Hello World 12
1.5　本章小结 14
1.6　作业 14
第2章　类型与函数 15
2.1　基本类型 15
2.1.1　JavaScript 的基本类型 16
2.1.2　TypeScript的基本类型 16
2.1.3　变量声明 18
2.1.4　泛型 19
2.1.5　枚举 22
2.1.6　symbol 25
2.1.7　iterator和generator 26
2.2　高级类型 31
2.2.1　interface 31
2.2.2　交叉类型与联合类型 32
2.2.3　类型保护与区分类型 35
2.2.4　typeof 与 instanceof 38
2.2.5　类型别名 40
2.2.6　字面量类型 41
2.2.7　索引类型与映射类型 41
2.2.8　类型推导 44
2.3　函数 48
2.3.1　定义函数 48
2.3.2　参数 49
2.3.3　回调函数和 promise 52
2.3.4　async 和 await 59
2.3.5　重载 59
2.4　本章小结 61
2.5　作业 61
第3章　接口与类 63
3.1　接口 63
3.1.1　定义 64
3.1.2　函数类型 69
3.1.3　可索引类型 70
3.1.4　继承接口 71
3.2　类 72
3.2.1　定义 73
3.2.2　实现接口 73
3.2.3　继承 74
3.2.4　存取器 76
3.2.5　只读属性 77
3.2.6　类函数和静态属性 78
3.2.7　抽象类 78
3.3　本章小结 80
3.4　作业 80
第4章　命名空间与模块 81
4.1　命名空间 81
4.1.1　单文件命名空间 81
4.1.2　多文件命名空间 83
4.1.3　别名 84
4.1.4　外部命名空间 85
4.2　模块 86
4.2.1　导出与导入 87
4.2.2　生成模块 91
4.2.3　外部模块 94
4.3　本章小结 97
4.4　作业 97
实战篇
第5章　命令行应用实战：天气查询 106
5.1　创建项目 106
5.1.1　初始化项目 108
5.1.2　配置 TSConfig 109
5.1.3　配置 TSLint 112
5.1.4　使用 Git 113
5.2　Commander.js 117
5.2.1　格式化命令 118
5.2.2　更好的输入 120
5.2.3　添加色彩 122
5.3　处理网络请求 123
5.3.1　定义接口 123
5.3.2　Promise 125
5.3.3　await 和 async 127
5.4　本章小结 128
5.5　作业 128
第6章　Express实战：后端服务 129
6.1　创建项目 129
6.1.1　初始化项目 130
6.1.2　Husky 131
6.2　定义数据结构 132
6.2.1　连接数据库 133
6.2.2　定义数据模型 134
6.3　数据接口 135
6.3.1　Express 136
6.3.2　增删查改 137
6.4　本章小结 142
6.5　作业 143
第7章　React 实战：桌面网站 144
7.1　创建项目 144
7.1.1　create-react-app 145
7.1.2　配置 TypeScript 147
7.1.3　配置 TSLint 156
7.2　架构 158
7.2.1　React-Router 158
7.2.2　Redux 160
7.3　编辑提醒事项 163
7.3.1　组件 164
7.3.2　Redux 组件 166
7.3.3　Redux Persist 170
7.3.4　处理网络请求 174
7.4　实现列表 180
7.4.1　实现列表页 180
7.4.2　复用编辑组件 182
7.5　测试 190
7.5.1　配置 Jest 190
7.5.2　组件的测试 192
7.5.3　Action 的测试 195
7.5.4　Reducer的测试 196
7.6　本章小结 197
7.7　作业 198
第8章　React Native 实战：客户端开发 199
8.1　创建项目 199
8.1.1　配置开发环境 200
8.1.2　创建 React Native 项目 208
8.2　设计架构 210
8.2.1　React Navigation 211
8.2.2　Reudx 212
8.2.3　列表页 215
8.3　本章小结 217
8.4　作业 217
第9章　Vue 实战：HTML 5网页开发 219
9.1　创建项目 219
9.1.1　创建 Vue 项目 220
9.1.2　写TypeScript代码 221
9.2　实现列表 225
9.2.1　vue-class-component 225
9.2.2　网络请求 228
9.2.3　列表页 230
9.3　本章小结 231
9.4　作业 231
第10章　小程序实战 234
10.1　创建项目 234
10.1.1　创建小程序 236
10.1.2　创建 WePY 工程项目 239
10.1.3　配置 TypeScript 241
10.1.4　入口文件 242
10.1.5　WePY页面 243
10.1.6　WePY组件 246
10.1.7　针对原生API进行优化 246
10.2　实现列表 247
10.2.1　网络请求 247
10.2.2　列表页 249
10.3　本章小结 249
10.4　作业 250
第11章　项目迁移与社区共建 251
11.1　项目迁移 251
11.1.1　从 JavaScript 迁移到TypeScript 252
11.1.2　从 Flow迁移到TypeScript 253
11.2　社区共建 254
11.2.1　贡献类型文件 254
11.2.2　关注更新 256
11.3　本章小结 257
11.4　作业 257

.　　* 深入理解骨骼蒙皮动画的数学原理，并成功地解析和渲染Doom3中的MD5骨骼动画格式。
　　本书有何特色
　　* 深入：凝聚作者15年3D图形编程经验，带领读者探索3D图形编程的知识；
　　* 系统：使用TypeScript构建Application应用程序框架及WebGL渲染框架；
　　* 广泛：涉及数据结构、WebGL渲染API用法、3D数学、二进制文件读取、骨骼动画及场景渲染等内容；
　　* 独特：使用TypeScript和WebGL渲染API来演示Quake3、Doom3引擎的场景和骨骼动画渲染；
　　* 实用：详细讲解8个完整的3D图形Demo，帮助读者理解3D图形渲染最本质的运行流程。
　　本书内容
　　第1篇 数据结构基础（第1、2章）
　　第1章SystemJS与webpack，以循序渐进的方式介绍了如何构建基于SystemJS和webpack的TypeScript语言开发、编译和调试环境，最终形成一个支持源码自动编译、模块自动载入、服务器端热部署、具有强大断点调试功能、能自动打包的TypeScript开发环境。
　　第2章TypeScript封装和实现常用容器，主要涉及与数据结构相关的知识点。首先讲解了JS/TS中新增的ArrayBuffer、DataView及与类型数组相关的知识点，然后封装和实现了动态类型数组、字典、双向循环列表、队列、栈及通用树结构。
　　第2篇 WebGL图形编程基础（第3~7章）
　　第3章WebGLApplication框架，通过本书第一个WebGL Demo来演示一个支持不停刷新、重绘、事件分发与响应、具有定时效果的WebGLApplication框架体系的使用流程。该框架支持使用ES 6.0标准中的async/await机制进行资源加载。
　　第4章WebGL基础，通过一个WebGL基本几何图元绘制的Demo，详细介绍了WebGLContextEvent、WebGLContextAttribut、WebGLRenderingContext、WebGLShader、WebGLProgram、WebGLShaderPrecisionFormat、WebGLActiveInfo、WebGLUniformLocation和WebGLBuffer这9个类的作用和常用方法。读者可以重点关注WebGLBuffer的3种不同渲染数据存储模式。
　　第5章WebGLUtilLib渲染框架，介绍了多个与WebGL相关的类。其中，GLProgram类用来编译、链接GLSL ES GPU Shader源码，并提供载入uniform变量的相关操作；GLStaticMesh对象用于绘制静态物体；GLMeshBuilder对象可以用于绘制动态物体；GLTexuture类可以在GLStaticMesh或GLMeshBuilder生成的网格对象上进行纹理贴图操作。
　　第6章3D图形中的数学基础，通过介绍开源TSM（TypeScript Vector And Matrix Math Library）数学库，让读者掌握向量、矩阵、四元数等相关的3D数学知识，并在TSM库的基础上实现了平面、摄像机、矩阵堆栈及GLCoordSystem等后续Demo要用到的类。
　　第7章多视口渲染基本几何体、坐标系及文字，使用WebGLApplication框架及WebGLUtilLib库实现了两个Demo。其中，第一个Demo使用GLMeshBuilder类在多视口中渲染基本几何体；第二个Demo则用来演示3D图形中坐标系的各种变换效果，并通过使用Canvas2D来绘制文字，从而解决WebGL中文字绘制的短板问题。
　　第3篇 开发实战（第8~10章）
　　第8章解析与渲染Quake3 BSP场景，首先在Quake3BspParser类的实现中介绍了如何使用DataView对象进行Quake3 BSP二进制文件解析，然后实现Quake3BspScene类。Quake3BspScene类可以将需要渲染的数据编译成GLStaticMesh对象支持的格式，从而正确地显示Quake3 BSP场景。
　　第9章解析和渲染Doom3 PROC场景，主要介绍了如何解析和渲染Doom3 PROC场景文件。首先实现了用Doom3SceneParser类进行场景文件的解析；然后实现了用Doom3ProcScene类进行场景文件的渲染；最后对场景的渲染增加视截体的可见性测试，从而提升WebGL的绘制效率。
　　第10章解析和渲染Doom3 MD5骨骼蒙皮动画，主要介绍了如何解析和渲染Doom3引擎中的MD5骨骼蒙皮动画。首先通过问答的方式介绍了骨骼动画中4个与坐标系相关的问题；然后解析并绘制.md5mesh文件；最后介绍.md5anim动画文件格式，并实现动画序列的显示播放。
　　本书配套资源获取方式
　　本书涉及的源代码文件和Demo需要读者自行下载。请登录华章公司网站www.hzbook.com，在该网站上搜索到本书，然后单击“资料下载”按钮，即可在页面上找到“配书资源”下载链接。
　　运行书中的源代码需要进行以下操作：
　　（1）按照本书第1章中的介绍下载并安装Node.js和VS Code。
　　（2）在VS Code的终端对话框中输入npm install命令，自动下载运行依赖包。
　　（3）下载好依赖包后继续输入npm run watch。
　　（4）在VS Code中新建一个终端面板，输入npm run dev。
　　本书读者对象
　　* 对3D图形编程、WebGL图形开发、游戏开发感兴趣的技术人员；
　　* 想转行做图形开发和WebGL开发的技术人员；
　　* 需要全面学习3D图形开发的技术人员；
　　* 想从其他强类型语言（C、C++、Java、C#、Objective-C等）转HTML 5开发的技术人员；
　　* JavaScript程序员；
　　* 想了解TypeScript的程序员；
　　* 想提高编程水平的人员；
　　* 在校大学生及喜欢计算机编程的自学者；
　　* 专业培训机构的学员。
　　本书阅读建议
　　* 没有3D图形框架开发基础的读者，建议从第1章顺次阅读并演练每一个实例；
　　* 有一定3D图形开发基础的读者，可以根据实际情况有重点地选择阅读各个模块和项目案例；
　　* 对于每一个模块和项目案例，先思考一下实现思路，然后再阅读，学习效果更好；
　　* 可以先对书中的模块和Demo阅读一遍，然后结合本书提供的源码再进行理解，并亲自运行和调试，这样理解起来就更加容易，也会更加深刻。
　　本书作者
　　本书由步磊峰编写。感谢在本书编写和出版过程中给予了笔者大量帮助的各位编辑！
　　由于作者水平所限，加之写作时间较为仓促，书中可能还存在一些疏漏和不足之处，敬请各位读者批评指正。联系邮箱：hzbook2017@163.com。
　　编著者
　　
　　
　　---------------------------TypeScript实战指南---------------------------
　　
　　
　　与 TypeScript相遇，还是在 ThoughtWorks 工作的时候。那个时候，我们需要维护大量的前端遗留项目，需要与客户规划我们的人效，需要控制系统迭代带来的 bug 率。我们接手的项目往往缺乏严谨的注释和完整的代码说明文档，这导致在维护 JavaScript 遗留项目时，需要花费更多的时间去厘清参数及函数之间的关系，甚至需要用 debugger 逐层去观察值的变化。工作非常低效，但客户的需求又总是急迫的，这迫使我们去思考如何提升团队的工作效率。
　　这个时期也是 Facebook 开始推广Flow 的时候。我们觉得添加静态类型应该是个非常不错的方向，也看了很多应用静态类型的成功案例。碰巧Flow 对于遗留项目非常友好，你不需要为每个文件、每个函数、每行代码都添加类型，而只需要在你认为有必要的地方写上类型即可。所以我们很快进行了实验。
　　然而，我们在采用 Flow后不久就发现了很多新产生的问题：
　　1）升级困难，配置复杂。尤其是在 React Native 项目中，经常会在升级后运行失败。
　　2）生态弱势。很多第三方库当时没有 Flow 的类型问题件。
　　3）难于上手。Flow 的气质更像考究的学院派风格，功能强大灵活，但对于新加入团队的人而言，其难度令人生畏。
　　于是，我们又将目光投向了 TypeScript。最初了解 TypeScript是看到Angular 团队在更新 Angular 2 时开始全面采用TypeScript 代码。他们给出了这样两个理由：
　　1）TypeScript 明确了抽象。在大型工程项目中，我们希望模块之间的边界是使用接口定义的，而 JavaScript 不足以清晰表达类似的边界划分，Flow也不能。而 TypeScript 可以定义接口，可以强制程序员去思考 API 的边界，去设计代码，而不只是编写代码，暴露代码的耦合。
　　2）TypeScript 可以使代码在一定程度上达到“Self-documenting” 的效果。“Self-documenting”是一个非常有意思的概念，它强调的是代码本身具有自我说明的效果，而不是依赖文档。TypeScript 有着非常严格的强类型表达，这迫使你在函数使用之前就必须标注好函数的入参和返回值类型。这样的强依赖使得函数本身表达清晰，同时也可以非常容易地推导出代码的依赖结构，进行重构。
　　之后，我们开始尝试在遗留项目中进行TypeScript重构，那是一种相见恨晚的感觉。从后期的数据来看，我们很有效地降低了bug率，同时支持项目的人效也得到了极大的提升。
　　这一段经历，使我重新开始思考关于语言静态类型的问题。在大型团队开发时，沟通的成本往往是极高的。这就是为什么在后端开发中，拥有静态类型的语言仍然占据主流，也是为什么Python在3.5版本中加入Type Hint。显式的类型声明不仅有利于阅读，也有利于代码编辑器进行代码提示和依赖分析。
　　比如，在Java开发中，如果需要重构的话，依赖IntelliJ IDEA提供的函数重构功能，可以自动地对每一个依赖该函数的文件进行自动化重构。但这在JavaScript中是不可想象的，你只能使用全局文本搜索来修改函数名，这种操作非常原始，就像在现代战争中还拿着石锤向着敌方阵地冲刺一样。
　　这就是TypeScript为JavaScript生态带来的价值，也是为什么Angular和Vue都转向使用TypeScript进行重构。比起学术型的Flow而言，TypeScript更像一门工程型的语言，它配置容易，上手快速，更适合在实战中使用，是一件非常称手的“兵器”。
　　我希望读者在使用TypeScript之前，能够对TypeScript有足够的了解。我结合TypeScript的官方手册与其他公开资料，整理了一些TypeScript基础的内容，就是本书的“基础篇”，最好粗略过一遍这部分内容。在“实战篇”中会提及这些内容，返回去再看时，反而能加深理解。
　　实际上，如何在实战中使用TypeScript反而是一个老大难的问题。这也是初学者更容易遇到的困难。“为什么手册读完了，官方实例也看了，我还是不会在React里写TypeScript呢？”这是我经常听到的反馈，希望本书能够很好地回答这类问题。
　　最后，非常感谢2018年年底的住院经历，因为无法完全被治愈，使得我开始重新思考生命与健康的问题，如果有机会我也非常想聊聊这个话题。我非常感谢娜娜的陪伴，这是最长情的告白。同时感谢吴怡编辑的理解与体谅，使得我还有机会完成此书。最后感谢开源社区，不仅帮助我成长，也提供了丰富的资料助力我完成此书，希望能有更多的机会回馈社区。
　　作者
　　于2019年元宵节
　　

.　　—— 跨平台开源UI引擎FairyGUI作者萧应棠
　　
　　
　　
　　---------------------------TypeScript实战指南---------------------------
　　
　　
　　本书手把手教你学习TypeScript，包含大量实际案例代码与开发技巧，可帮助读者快速掌握TypeScript的开发。
　　主要内容：
　　TypeScript的安装与Hello World代码。
　　TypeScript的基础知识，包括基本类型、高级类型、函数、接口、类等。
　　命令行实战案例，从创建项目到配置使用，可使读者快速进入开发阶段。
　　通过一个案例介绍Express实战，包括测试驱动的开发和部署等。
　　如何在React、React Native项目中应用TypeScript。
　　如何在Vue项目中应用TypeScript，包括项目的开发全流程。
　　如何与微信小程序项目相结合开发自己的应用。