第一章 如何学习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 Compilertsc)实现的。tsc 以及 tsc 配置(TSConfig)是 TypeScript 工程层面的重要部分。除此以外,TypeScript 工程能力的另一重要体现就是,我们可以通过类型声明的方式,在 TypeScript 中愉快地使用JavaScript社区的大量 npm 包。

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

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

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_36362721/article/details/131000422
今日推荐