新書推薦:
《
引爆:炸药、硝酸盐和现代世界的形成
》
售價:HK$
85.1
《
人类星球:我们如何创造了人类世(企鹅·鹈鹕丛书013)
》
售價:HK$
91.8
《
伏候圣裁:中国古代的君主与政治
》
售價:HK$
98.6
《
艺术图像学研究(第一辑)
》
售價:HK$
188.2
《
摆脱强迫的人生(修订版)
》
售價:HK$
88.5
《
知宋·宋代之司法
》
售價:HK$
99.7
《
空间与政治
》
售價:HK$
87.4
《
少年读三国(全套12册)
》
售價:HK$
490.6
|
編輯推薦: |
本书从应用角度出发,手把手教你学习TypeScript,包含大量实战案例代码与开发技巧,可帮助读者快速掌握TypeScript的开发。
|
內容簡介: |
本书深入浅出地介绍TypeScript基础知识和开发技巧,可帮助读者快速入门并掌握TypeScript的开发。本书分为基础篇和实战篇,共11章。基础篇包括:TypeScript的类型与函数、接口与类、命名空间与模块。实战篇详细介绍如何在各种前端项目中应用
TypeScript,包括命令行实战、Express实战,以及在React、React Native、Vue、微
信小程序等项目中如何应用TypeScript,*后还介绍了项目迁移与社区共建等。
|
關於作者: |
胡桓铭 前端开发者,曾任ThoughtWorks前端工程师,参与过多个项目的开发与部署,对TypeScript情有独钟,参与了TypeScript的DefinitelyTyped部分维护。
|
目錄:
|
前言
基础篇
第1章 Hello TypeScript2
1.1 引言2
1.1.1 JavaScript 与 ECMAScript3
1.1.2 TypeScript5
1.2 准备环境8
1.2.1 安装 Node.js8
1.2.2 npm和 Yarn9
1.2.3 安装 TypeScript10
1.3 Visual Studio Code11
1.3.1 安装VSCode11
1.3.2 安装Shell 命令12
1.4 Hello World12
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 symbol25
2.1.7 iterator和generator26
2.2 高级类型31
2.2.1 interface31
2.2.2 交叉类型与联合类型32
2.2.3 类型保护与区分类型35
2.2.4 typeof 与 instanceof38
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 回调函数和 promise52
2.3.4 async 和 await59
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 配置 TSConfig109
5.1.3 配置 TSLint112
5.1.4 使用 Git113
5.2 Commander.js117
5.2.1 格式化命令118
5.2.2 更好的输入120
5.2.3 添加色彩122
5.3 处理网络请求123
5.3.1 定义接口123
5.3.2 Promise125
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 Husky131
6.2 定义数据结构132
6.2.1 连接数据库133
6.2.2 定义数据模型134
6.3 数据接口135
6.3.1 Express136
6.3.2 增删查改137
6.4 本章小结142
6.5 作业143
第7章 React 实战:桌面网站144
7.1 创建项目144
7.1.1 create-react-app145
7.1.2 配置 TypeScript147
7.1.3 配置 TSLint156
7.2 架构158
7.2.1 React-Router158
7.2.2 Redux160
7.3 编辑提醒事项163
7.3.1 组件164
7.3.2 Redux 组件166
7.3.3 Redux Persist170
7.3.4 处理网络请求174
7.4 实现列表180
7.4.1 实现列表页180
7.4.2 复用编辑组件182
7.5 测试190
7.5.1 配置 Jest190
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 Navigation211
8.2.2 Reudx212
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-component225
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 配置 TypeScript241
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 迁移到TypeScript252
11.1.2 从 Flow迁移到TypeScript253
11.2 社区共建254
11.2.1 贡献类型文件254
11.2.2 关注更新256
11.3 本章小结257
11.4 作业257
|
內容試閱:
|
与 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年元宵节
|
|