第一章 如何学习TypeScript

TypeScript 是 JavaScript 的一个超集，由 Microsoft 开发并于 2012 年首次发布。TypeScript 添加了可选的静态类型、类和接口等功能，使得编写和维护大型应用程序更加容易。

TypeScript 的主要优点之一是它提供了更好的工具和编辑器支持。这是因为 TypeScript 可以在编译时捕获错误，帮助开发人员在生产之前捕获错误。此外，TypeScript 提供更好的代码完成和导航，使得处理大型代码库更加容易。

TypeScript 也与 JavaScript 高度兼容，这意味着您可以在 TypeScript 项目中使用现有的 JavaScript 代码。这使得将现有项目迁移到 TypeScript 或逐步将 TypeScript 引入现有代码库变得容易。

---

对TypeScript存在的质疑

TypeScript 已被开发人员普遍接受，和 ES6 语法以及前端框架一起，被视为前端开发领域的基础工具。但是，关于 TypeScript 的质疑却一直没有减少，比如：

• TypeScript 限制了 JavaScript 的灵活性；
• TypeScript 并不能提高应用程序的性能；
• TypeScript 开发需要更多额外的类型代码。

这些质疑其实可以归纳为一点：TypeScript 会影响实际项目的开发效率。事实真的是这样吗？

---

为什么说 TypeScript 可能超越 JavaScript？

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

但随着项目规模的增大，这些变量类型的数量也会成倍增加，你总有记错、遗漏的时候。此时，灵活性就变成了埋在项目内的定时炸弹。要解决灵活性带来的隐患，我们需要的是类型。更准确地说，是项目开发时的类型检查能力。

TypeScript 通过易上手且功能强大的类型系统，为 JavaScript 提供了强大的类型检查能力。在类型的帮助下，我们无需实际运行代码，就能通过类型的流转观察到变量的值是如何改变的。同时，类型的标记也能帮助我们确保每一处访问、赋值与操作的类型是符合预期的，有效减少我们需要承受的心智负担。

由于类型的引入，TypeScript 的确限制了 JavaScript 的灵活性，但也增强了项目代码的健壮性，并且对于其他同属于灵活性的代表特性，如 this、原型链、闭包以及函数等，TypeScript 丝毫没有限制。

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

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

---

如何系统学习TypeScript？

高昂的学习成本往往来自于我们对 TypeScript 不正确的认知，以及错误的学习路径。并不是把类型相关的概念学习完就算掌握 TypeScript 了,也不是过了一遍文档和社区文章，简单地使用一下，就觉得自己TypeScript 水平不错了。

那么，我们到底该怎么学习 TypeScript 呢？学习没有捷径，最好的学习方法就是先建立起对事物的全面认知，然后由浅入深地系统学习。 这里的“全面”如何理解？我们首先要了解 TypeScript 是由哪些部分组成的。相对严谨来说，TypeScript 由三个部分组成：类型、语法与工程。我们可以从这三个部分入手，来建立起一个全面、系统的学习路径。

1-类型能力

它是最核心的部分，也是学习成本最高的部分。它为 JavaScript 中的变量、函数等概念提供了类型的标注，同时内置了一批类型工具，基于这些类型工具我们就能实现更复杂的类型描述，将类型关联起来。

2-语法部分

比如使用最多的可选链（?.）、空值合并（??）、装饰器等，这些语法都已经或即将成为 ECMAScript Next 的新成员。在 TypeScript 中使用这些新语法时，你只需要简单的配置就能实现语法的降级，让编译后的代码可以运行在更低的浏览器或 Node 版本下。这一部分几乎没有学习成本，他们就像语言的 API，你只需要多提醒自己去使用，及时查询官方文档就能熟悉了。

3-工程能力

类型能力与新语法确实很棒，但浏览器不认怎么办？TypeScript 会在构建时被抹除类型代码与语法的降级。这一能力就是通过 TypeScript Compiler（tsc）实现的。tsc 以及 tsc 配置（TSConfig）是 TypeScript 工程层面的重要部分。除此以外，TypeScript 工程能力的另一重要体现就是，我们可以通过类型声明的方式，在 TypeScript 中愉快地使用JavaScript社区的大量 npm 包。

类型、语法、工程其实也代表了三个不同阶段使用 TypeScript 目的：

• 1-为 JavaScript 代码添加类型与类型检查来确保健壮性，

• 2-提前使用新语法或新特性来简化代码，

• 3-以及最终获得可用的 JavaScript 代码。

因此，类型==>语法==>工程，也是学习 TypeScript 的最佳路径。