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

做者：一只图雀
仓库：Github
图雀社区主站（首发）：图雀社区
博客：掘金、知乎、慕课
公众号：图雀社区
联系我：关注公众号后能够加图雀酱微信哦
原创不易，❤️点赞+评论+收藏 ❤️三连，鼓励做者写出更好的教程。。

源起

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 类型定义文件，甚至知名的前端或后端库都彻底使用 TypeScript 来进行开发，好比 Google 的 Angular，Nest.js, 还有一些著名的 UI 组件库，如蚂蚁金服的 Ant Design，Google 的 Material Design：

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

咱们能够经过一些数据来了解 TypeScript 的流行趋势：

TypeScript 的优点和收益是什么？

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

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

个人观察

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

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

努力与收获

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

加星的代码仓库

由于图雀社区全部的实战技术教程都是使用图雀社区自研的开源写做工具：Tuture 写做而成，且都是基于一个项目进行写做的，因此 类型即正义：TypeScript 从入门到实践背后的源码也是通过验证的且能够直接运行的，这也鼓励了不少读者去下载源码，本身跑服务，也所以给仓库点了 Star，在这里感谢大家的鼓励：

仓库地址：github.com/tuture-dev/…

固然，若是你偏心 Gitee，那么也能够找到咱们的源码：gitee.com/tuture/type…

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

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

大纲

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

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

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

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

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

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

字数总览

文字数据

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

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

图示数据

图雀酱的话

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

阅读数总览

文字数据

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

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

图示数据

图雀酱的话

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

点赞总览

文字数据

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

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

图示数据

图雀酱的话

总体获赞仍是有点低的，点赞点赞点赞，是我最大的动力😆

评论数总览

文字数据

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

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

图示数据

图雀酱

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

总结与展望

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

参考资料

TypeScript 百度百科：baike.baidu.com/item/typesc…

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

草图绘制库：github.com/jwilber/rou…

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