typescript阮⼀峰_（三万字长⽂）类型即正义：TypeScript从
⼊门到实践系列。。。
❝
本⽂由「图雀社区」认证作者 「pftom」 写作⽽成，感谢作者的优质输出，让我们的技术世界变得更加美好，欢迎加⼊图雀社区，⼀起创作优质的免费技术实战教程，予⼒编程⾏业发展?
旅游去处❞
源起
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，在这⾥感谢你们的⿎励：
会总结的⼈运⽓都不会太差
为了帮助掘友们更好的学习 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 字
图⽰数据