推荐 | 用正确的方式学习 TypeScript，实现全面进阶

最近，软件开发设计公司 The Software House 针对 2022 年前端市场状态的调查显示，84% 的受访者都在使用 TypeScript，43% 的受访者甚至认为 TypeScript 将超越 JavaScript 成为前端开发的主要语言。

无论 TypeScript 是否会超越 JavaScript，可以肯定的是，TypeScript 已被开发人员普遍接受，和 ES6 语法以及前端框架一起， 被视为前端开发领域的基础工具 。那 TypeScript 为什么越来越受欢迎，甚至有超越 JavaScript 的势头呢？

我们知道，JavaScript 一直以灵活性著称。在实际开发时，我们不需要确定一个变量的类型，就能直接访问可能并不存在的属性，所以无需为每一步操作都定义类型。在小型项目中，这种灵活性可以有效提高开发效率，帮助我们掌控全局。

但随着项目规模的增大，这些变量类型的数量也会成倍增加，你总有记错、遗漏的时候。此时，灵活性就变成了埋在项目内的定时炸弹。在《 Top 10 JavaScript errors from 1000+ projects 》 中，最常见的错误就是 Cannot read property ’xxx’ of undefined 、 undefined is not a function 等。这些错误就是我们过度依赖灵活性的后果，一旦它们被触发，就会导致你的页面白屏、卡死，甚至崩溃。

要解决灵活性带来的隐患，我们需要的是类型。更准确地说，是项目开发时的类型检查能力。 TypeScript 通过易上手且功能强大的类型系统，为 JavaScript 提供了强大的类型检查能力。在类型的帮助下，我们无需实际运行代码，就能通过类型的流转观察到变量的值是如何改变的。

但是，想要获得类型的帮助，我们需要额外的类型代码。这会影响开发效率吗？会有影响，但更多是正向的。

首先， 要实现类型的精确标注，我们并不一定需要大量的类型代码 。就像你给变量 A 新增一些属性得到变量 B，你会不会完全重新声明这两个变量的值。在类型层面也是一样，变量 B 的类型会基于变量 A 的类型派生得到，它们并不是两个完全独立的类型。基于这一方式，我们就能让类型之间存在紧密的关联，减少冗余的类型代码。

其次，当项目规模增大到某一阈值后，这些类型代码会是你开发时最得力的助手，让你有底气大胆地进行各种逻辑操作，不需要先把这些值都打印出来确认一遍。同时，由于 TypeScript 强大的类型推导能力，随着你对变量进行各种操作，TypeScript 就会自动地推导出变量最终的类型。你只需要确保类型符合，最终的结果就是符合你预期的。而在你敲击下 . 来访问一个变量的属性时，TypeScript 也会将所有的属性展示出来供你挑选。这就是 类型代码对开发效率的提升所在 。

而在最终编译时，TypeScript 又会将这些类型代码抹除，还给你可以直接放进浏览器里跑的、纯粹的 JavaScript 代码。因此，TypeScript 确实不能提高应用程序的性能，因为最终运行的仍然是 JavaScript。

放眼于项目的整个生命周期，得益于严密的类型检查与如臂使指的类型推导，TypeScript 不仅避免了 JavaScript 灵活性可能会带来的隐患，还能让你在面对 Bug 时更快地定位问题，让程序跑得更稳定一些！从这个方面来说， TypeScript 对开发效率的提升是终身制的 。

如何系统学习 TypeScript？

随着越来越多的前端开发者开始尝试学习和使用 TypeScript，理论上 TypeScript 应该已经完全取代 JavaScript 了，但实际上并没有。一方面，就像我们前面所说，项目规模较小或部分开发者仍然更偏爱灵活的 JavaScript 。另一方面，作为 JavaScript 中不存在的概念，类型能力相关的学习成本让很多开发者停留在入门阶段，无法前进。

许多时候， 高昂的学习成本往往来自于我们对 TypeScript 不正确的认知，以及错误的学习路径 。比如说，有人认为“把类型相关的概念学习完就算掌握 TypeScript 了”，有人过了一遍文档和社区文章，简单地上手使用一下，就觉得自己的 TypeScript 水平已经相当不错了。

首先，通过社区资源自学并没有什么问题，但好内容太少，找起来也需要很多时间。其次，任何知识点都不能孤立地学习。不然在实际开发时，遇到一个复杂点的类型编程场景，我们就束手无策了。

想要找到正确、高效的学习路径，我们可以从每个阶段使用 TypeScript 的目的出发。在项目开始阶段， 类型能力 可以为 JavaScript 代码添加类型与类型检查来确保健壮性。在项目优化阶段，我们提前使用 新语法或新特性 来简化代码。在编译阶段，我们可以利用工程层面的 tsc 以及 tsc 配置（TSConfig） ，最终获得可用的 JavaScript 代码。

因此，“类型-语法-工程”也是学习 TypeScript 的最佳路径。本课程也是这样设计的，你只需要跟着学下来，就能搭建出 TypeScript 的完整知识体系。具体来说，这门课程将分为 类型能力篇、语法篇和工程实践篇 。从下图中也能看出，我们会将重点更多地放在类型部分。

• 类型能力篇，我们会先从 TypeScript 的类型基础讲到泛型、条件类型等这些类型工具，再从内置工具类型讲解到内置工具类型进阶，带你建立起 TypeScript 类型能力知识体系，懂得结合使用各种类型工具进行类型编程，能够独立解决各种类型报错，理解类型世界的基本规则与运行规律。
• 在语法篇，我们会从 TypeScript 与 ECMAScript 的关系开始说起，介绍这些新语法的使用，对其中的重量级角色装饰器，我们更会搭配实战演练。
• 在最后的工程篇，除了 tsc 以及 TSConfig，我们还会有更多的工程实战，并与 React / ESLint 等框架或工具紧密结合，开发并部署一个基于 TypeScript 的 Node API。

就像这本小册的名字《 TypeScript 全面进阶指南 》一样，我们的目标是全方位、无死角地掌握 TypeScript。

作者是谁？

林不渡，阿里巴巴前端开发工程师。深耕 TypeScript，曾在团队中参与制定并推广 TypeScript 相关研发规约。热爱分享，曾在极客时间、前端早早聊等平台做过 TypeScript 主题分享，写过「TypeScript 的另一面：类型编程」专栏。

最后，无论你处于哪个阶段，只要想开始学习 TypeScript，这门课程就是适合你的。而且，只要你沿着课程中给出的路线，完成这一路上的各种任务，就一定能从新手成功迈向高级玩家！