（三万字长文）类型即正义：TypeScript 从入门到实践系列，正式完结！

源起

Tim Berners-Lee 于1989年发明了万维网并于1991年对外发布了世界上第一个网页浏览器 WorldWideWeb，从此拉开了 Web 时代的序幕。

1994 年网景公司（Netscape）发布了 Navigator 浏览器 0.9 版本，这是历史上第一个比较成熟的网络浏览器，轰动一时。

1995 年，受雇于 Netscape 的 Brendan Eich 用了十天时间设计出了 JavaScript。之后便开启了浏览器兼容和争夺的至暗时刻，到 1997 年 ECMA 组织开始发布公开标准，JavaScript 即将进入标准化进程。得益于 ECMA 的标准，JavaScript 愈发的强大，并借助 Babel 实现了标准制定和浏览器实现的兼容，使得我们可以写最现代化的代码而不用过多的考虑浏览器兼容性，并且还诞生 Node.js、React Native 等服务器端、移动端的 JavaScript 运作方式，谁也想不到二十年后的今天 JavaScript 似乎印证了 Write Once Run Anywhere 的优势，Brendan Eich 作为 JavaScript 之父，在编程的历史上留下了他的印记。

随着时间的推移，微软发现外部客户在开发大规模 JavaScript 应用的过程中遭遇了语言本身的短板，在 2012 年 10 月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript，当前最新版本为TypeScript 3.9。

TypeScript 是 JavaScript 的严格超集，因此任何 JavaScript 都是合法的 TypeScript（非常像 C 和 Objective-C 的关系）。TypeScript 为 JavaScript 带来了强大的类型系统和对 ES2015的支持，它的编译工具可以运行在任何服务器和任务系统上。类型系统实际上是非常好的文档，增强了编辑器在 「智能提示」，「跳转定义」，「代码补全」 等方向上的功能，并且在编译阶段能发现大部分的错误，对于大型工程的代码可读性和可维护性起到了了不起的作用。

TypeScript 的流行趋势

事实上 TypeScript 拥有活跃的社区，大部分第三方库都有提供 TypeScript[1] 类型定义文件，甚至知名的前端或后端库都完全使用 TypeScript 来进行开发，比如 Google 的 Angular[2]，Nest.js[3], 还有一些著名的 UI 组件库，如蚂蚁金服的 Ant Design[4]，Google 的 Material Design[5]：

编组

我们在平时工作中实实在在使用的库或框架都使用了 TypeScript 构建或正在调研使用中...

我们可以通过一些数据来了解 TypeScript 的流行趋势：

image-20200521160800816

TypeScript 的优势和收益是什么？

• 类型系统可在编译阶段发现大部分的错误
• 类型系统也是一个很直观的编程文档，可以查看任何函数或API的输入输出类型
• 类型系统增强了编辑器或IDE的功能
• TypeScript 可以自动的推导类型
• 一切 JavaScript 都是合法的 TypeScript 降低了使用成本
• TypeScript 拥抱 ES2015 以及 ESNext 草案规范
• 几乎第三方库都有 TypeScript 类型定义文件

当然，凡事都有两面性，TypeScript 有一定的学习成本，比如：Interfaces，Generics，Enums 等前端工程师不是很熟悉的概念，短期内多少会增加一些开发成本，集成和构建一些库会有一定的工作量。

我的观察

了解到 TypeScript 的优势和流行趋势之后，相比大部分人都跃跃欲试的想学习这门强大的语言了，但是笔者在学习过程中发现市面上的 TypeScript 学习资源少之又少，优质且免费的就更加的少了，笔者在学习过程中主要参考了下面几个资料：

• TypeScript 官方文档[6] ：现在在 A/B 测试 V2 版，之前的 V1 版本写得比较枯燥，很多人都死在看这个文档上，但是现在的 V2 层次比较分明，在一定程度上缓解了学习的疲劳，不过仅仅对需要对英文好的同学比较友好，如果对自己英文比较自信的同学可以学习和观看 V2 版本的文档[7]。
• 查阅 React 里面写 TypeScript 的一些技巧：typescript-cheatsheets[8]
• 阮一峰老师推荐的 TypeScript 入门教程[9]，内容比较短小精悍，浅尝辄止。
• DefinitedType 社区的维护者 Basarat[10] 写得 TypeScript Deep Dive[11]，以及其中文版[12] ，这本书很大而全，但是建议用作 TypeScript 查询手册，不适合学习。
• TypeScript 中文网[13]，但是很久没更新了（建议不看...）
• 还有更多...

努力与收获

看上面的资料学习无疑是痛苦的，于是在经过自己的一番广泛查阅资源和学习实践之后，希望自己可以写一个 TypeScript 实战入门系列，帮助更多的想学习 TypeScript 但是找不到门路的小伙伴们快速找到入门的法子，因此有了本系列文章：类型即正义：TypeScript 从入门到实践，它知识凝练而又不失深度，讲解 TypeScript 最最最常用的知识点，并通过动手做一个 React 待办事项小应用来串联讲解这些 TypeScript 知识点。目前一共有五篇文章，整个系列文章写下来一共三万字有余，并且收获了 111 个赞，4845 次阅读，16条评论，希望这系列实战入门文章能够帮助你在学习 TypeScript 的路上走得轻松些。

加星的代码仓库

因为图雀社区所有的实战技术教程都是使用图雀社区自研的开源写作工具：Tuture[14] 写作而成，且都是基于一个项目进行写作的，所以 类型即正义：TypeScript 从入门到实践背后的源码也是经过验证的且可以直接运行的，这也鼓励了很多读者去下载源码，自己跑服务，也因此给仓库点了 Star，在这里感谢你们的鼓励：

仓库地址：https://github.com/tuture-dev/typescript-tea

当然，如果你偏爱 Gitee，那么也可以找到我们的源码：https://gitee.com/tuture/typescript-tea

会总结的人运气都不会太差

为了帮助掘友们更好的学习 TypeScript 开发，整理是一种很好的方式，经过掘友的反馈和建议，图雀社区决定将之前发的文章做一个总结，方便查漏补缺和系统学习，下面会列一个大纲，然后给出对应的摘要，接着给出对应的可视化图数据，展示此文章收获的：阅读、点赞、评论，以及对于的字数，帮助掘友建立一个体系化的同时，还能很方便的了解每篇文章的一个概要和数据详情。

大纲

我们将在下面放上每篇文章的封面、链接和摘要，供读者欣赏：

• 类型即正义：TypeScript 从入门到实践（序章）[15] ：使用 Create-React-App 快速初始化一个 React TypeScript 项目，并使用 Ant Design[16] 组件库来辅助界面编写，使用了 antd V4 的黑暗模式。使得我们可以专注于学习 TypeScript 的核心知识，并快速实践运用在 React 项目里面，而避免一上来就谈 tsconfig.json、TypeScript 编译原理等枯燥、难懂的知识。

04cd8d13-aa08-47f8-bb45-c933c03260f1

• 类型即正义：TypeScript 从入门到实践（一）[17]：讲解 TypeScript 类型系统，以及枚举和接口的知识，并完成我们 React 待办事项应用的界面和数据准备过程。

233006bf-c5ae-4721-97ea-4817cd1fc8c7

• 类型即正义：TypeScript 从入门到实践（二）[18]：讲解 TypeScript 函数、交叉类型、联合类型、字面量类型和类型守卫等知识，只讲 TypeScript 相比较 JavaScript 的不同，并通过 JavaScript 的形式讲解 TypeScript，接着我们使用学到的知识完成 React 待办事项一些状态修改，函数触发，事件处理等功能逻辑。

850cbbd7-9826-4d7d-a69e-3c1b498fee80

• 类型即正义：TypeScript 从入门到实践（三）：类型别名和类[19]：讲解了 TypeScript 中和接口很像的类型别名和类的知识，由表及里的剖析了 TypeScript 类的独特之处，并继续完成 React 待办事项小应用中一些类型的处理以及类组件的编写，并引出了泛型的概念。

db716036-e13f-4c98-9661-f9fa9cb3602a

• 类型即正义：TypeScript 从入门到实践（四）：5000字长文带你重新认识泛型[20]：写了一整篇文章讲解 TypeScript 泛型，也是 TypeScript 类型编程的基础，并额外讲解了如何从零搭建 TypeScript 的开发环境。

字数总览

文字数据

其中一共写作字数：3.03 万字，在各篇分布如下：

• 类型即正义：TypeScript 从入门到实践（序章）[21] ：2983 字
• 类型即正义：TypeScript 从入门到实践（一）[22]：8412 字
• 类型即正义：TypeScript 从入门到实践（二）[23]：6933 字
• 类型即正义：TypeScript 从入门到实践（三）：类型别名和类[24]：6919 字
• 类型即正义：TypeScript 从入门到实践（四）：5000字长文带你重新认识泛型[25]：5752 字

图示数据

image-20200521151755041

图雀酱的话

第一篇是个小插曲，但是后面几篇都很均匀，最高的有 8000 呢✌️

阅读数总览

文字数据

其中一共收获阅读数：4845 次，在各篇分布如下：

• 类型即正义：TypeScript 从入门到实践（序章）[26] ：1155 次
• 类型即正义：TypeScript 从入门到实践（一）[27]：1376 次
• 类型即正义：TypeScript 从入门到实践（二）[28]：952 次
• 类型即正义：TypeScript 从入门到实践（三）：类型别名和类[29]：988 次
• 类型即正义：TypeScript 从入门到实践（四）：5000字长文带你重新认识泛型[30]：374 次

图示数据

image-20200521152145328

图雀酱的话

为啥最重要的泛型，阅读却少的可怜?，能不能燥起来！

点赞总览

文字数据

其中一共收获点赞数：111 赞，在各篇分布如下：

• 类型即正义：TypeScript 从入门到实践（序章）[31] ：34 赞
• 类型即正义：TypeScript 从入门到实践（一）[32]：28 赞
• 类型即正义：TypeScript 从入门到实践（二）[33]：19 赞
• 类型即正义：TypeScript 从入门到实践（三）：类型别名和类[34]：20 赞
• 类型即正义：TypeScript 从入门到实践（四）：5000字长文带你重新认识泛型[35]：10 赞

图示数据

image-20200521154239608

图雀酱的话

整体获赞还是有点低的，点赞点赞点赞，是我最大的动力?

评论数总览

文字数据

其中一共收获评论数：16 条，在各篇分布如下：

• 类型即正义：TypeScript 从入门到实践（序章）[36] ：0 评论
• 类型即正义：TypeScript 从入门到实践（一）[37]：2 评论
• 类型即正义：TypeScript 从入门到实践（二）[38]：5 评论
• 类型即正义：TypeScript 从入门到实践（三）：类型别名和类[39]：9 评论
• 类型即正义：TypeScript 从入门到实践（四）：5000字长文带你重新认识泛型[40]：0 评论

图示数据

image-20200521155805708

图雀酱

难道程序员真的是人狠话不多？评论有点少，想听见你的声音！

总结与展望

这一系列文章通过实战的方式呈现了 TypeScript 最最最常用的一些知识点，时代在变化， JavaScript 可以说是目前为止唯一实现了 Write Once Run Anywhere 的脚本语言，它的热度和趋势长久不衰，但 JavaScript 本身也有其语言的缺陷，也许在未来新的标准会慢慢补齐它，至少现在让我们用 TypeScript 来解决你可能面临的问题吧！

参考资料

TypeScript 百度百科：https://baike.baidu.com/item/typescript/4314718

万物起源-从 JavaScript 到 TypeScript：https://zhuanlan.zhihu.com/p/61345416

草图绘制库：https://github.com/jwilber/roughViz#Scatter

❝想要学习更多精彩的实战技术教程？来图雀社区[41]逛逛吧。 ❞

Reference

[1]

TypeScript: https://github.com/microsoft/TypeScript

[2]

Angular: https://github.com/angular/angular

[3]

Nest.js: https://github.com/nestjs/nest

[4]

Ant Design: https://github.com/ant-design/ant-design

[5]

Material Design: https://github.com/mui-org/material-ui

[6]

TypeScript 官方文档: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

[7]

V2 版本的文档: https://www.staging-typescript.org/docs/handbook/intro.html

[8]

typescript-cheatsheets: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet

[9]

TypeScript 入门教程: https://ts.xcatliu.com/

[10]

Basarat: https://github.com/basarat

[11]

TypeScript Deep Dive: https://github.com/basarat/typescript-book/

[12]

中文版: https://jkchao.github.io/typescript-book-chinese/

[13]

TypeScript 中文网: https://www.tslang.cn/

[14]

Tuture: https://github.com/tuture-dev/tuture

[15]

类型即正义：TypeScript 从入门到实践（序章）: https://juejin.im/post/5e8a82d2518825737b4ae3e0

[16]

Ant Design: https://ant.design/

[17]

类型即正义：TypeScript 从入门到实践（一）: https://juejin.im/post/5e8a831cf265da48046988cb

[18]

类型即正义：TypeScript 从入门到实践（二）: https://juejin.im/post/5e8b3153e51d4546f70d0d3c

[19]

类型即正义：TypeScript 从入门到实践（三）：类型别名和类: https://juejin.im/post/5e97b3c7518825737e0f88dc

[20]

类型即正义：TypeScript 从入门到实践（四）：5000字长文带你重新认识泛型: https://juejin.im/post/5ec2951ce51d454dda7f5dd6

● 类型即正义：TypeScript 从入门到实践（序章）● 类型即正义：TypeScript 从入门到实践（三）：类型别名和类● 类型即正义，TypeScript 从入门到实践（四）：5000字长文带你重新认识泛型

·END·