小册上新 | TypeScript 全面进阶指南

10,670 阅读6分钟

站内文章封面图(1301x734).jpg

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

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

TypeScript 为什么越来越受欢迎?

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

但随着项目规模的增大,这些变量类型的数量也会成倍增加,你总有记错、遗漏的时候。此时,灵活性就变成了埋在项目内的定时炸弹。在《Top 10 JavaScript errors from 1000+ projects》 中,最常见的错误就是 Cannot read property 'xxx' of undefinedundefined 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 掘金小册脑图.002.jpeg

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

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

作者是谁?

作者简介(2100x389).jpg

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

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

小册正值上新特惠期,限时6折,仅需¥29.94,一起加入学习吧!

宣传海报(1242x2650)-【站内文章】.jpg