首页 > 编程笔记 > JavaScript笔记 阅读:11

TypeScript是什么,TypeScript和js的区别是什么?(新手必看)

JavaScript 是弱类型的程序语言,而 TypeScript 是强类型的程序语言。

对于弱类型的 JavaScript 来说,在编写代码时,正确语法编写的补全提示能力和错误语法编写的提示能力都非常“弱”,非常不利于开发者的项目编码工作。而强类型的 TypeScript 具有非常友好的补全提示或错误提示能力,其可以极大地提高项目的编码效率,而且项目运行调试过程中的 Bug 也会减少很多。

我们知道,Vue3 的源码是使用 TypeScript 编写的,并且应用层的 API 对 TypeScript 有很好的支持。本节带大家全方位了解 TypeScript。

下面就利用六何分析,从事件对象(What)、事件相关人员(Who)、事件发展历程(When)、事件应用场景(Where)、事件原因(Why),以及如何了解、应用与掌握该事件(How)6 个方面剖析 TypeScript,感受 TypeScript 强大的功能与魅力。

TypeScript是什么

这需要从 JavaScript 说起,因为 JavaScript 是一门弱类型即时编译型的程序语言,在利用 JavaScript 进行变量声明时,它没有强制约束要实现的类型,这就使得在利用 JavaScript 开发项目时,更容易出现类型不对应的情况,从而导致后续操作更容易出现程序错误,并且不容易被发现。如果类似情况出现在团队化开发中,则会引起更多问题,从而影响项目的顺利进展。

为了弥补 JavaScript 弱类型的不足,TypeScript 这一强类型的程序语言就诞生了。

TypeScript 弥补了 JavaScript 的不足,添加了更多的语法来支持类型,并且要求开发者在定义各种类型变量时明确类型,从而增强程序的健壮性,以更大程度降低程序出错的概率,实现项目开发速度的提升。

不过浏览器等运行环境的解析并不直接支持 TypeScript,最终需要通过编译转换工具将 TypeScript 编译成 JavaScript,因此 TypeScript 是来源于 JavaScript,并最终归结于 JavaScript的,如下图所示。


图 1 TypeScript 被编译成 JavaScript 的过程

TypeScript 是 JavaScript 的超集,是建立在 JavaScript 之上的,我们可以将它理解为 JavaScript 的高级版,如下图所示:


图 2 TypeScript 和 JavaScript 的关系

值得一提的是,TypeScript 的文件后缀与 JavaScript 的不同,不再是“.js”,而是“.ts”。

TypeScript是谁开发的

TypeScript 是由微软开发的。俗话说“背靠大树好乘凉”,那么由微软开发的 TypeScript 自然是非常值得信赖与依靠的。

JavaScript 是目前世界排名前 10 的程序语言,它拥有异常庞大的用户群体,根据 Stack Overflow 的统计,JavaScript 在 2008 年用户量排名进入前 10 后,一直稳步提升,目前是用户量最大的程序语言。

TypeScript 作为 JavaScript 的超集,JavaScript 的拥护者也会非常容易地投入 TypeScript 的怀抱,因此 TypeScript 在 TIOBE 排行榜上一直稳步提升。

TypeScript是什么时间诞生的

When 在这里的全称为“When was TypeScript born?”,翻译过来就是“TypeScript是什么时间诞生的?”。

2012 年 10 月,微软发布了 TypeScript 的第 1 个版本(0.8),到目前为止,开发者经过 10 多年的不懈努力,完善了 TypeScript 对前端 Angular、React、Vue 等众多框架的支持,也逐步强化了其对 Node、Deno 等后台运行环境的支撑。

其实在互联网这个优胜劣汰的环境中,任何一个项目或者一门语言能存活 10 年都不是一件容易的事情,与 Java、Python 不同,TypeScript 没有经历 30 年的风雨,也不像 JavaScript 一样经受了 20 年的雷霆磨砺,但它依旧在 10 多年的挫折中不断强大,这样看来,TypeScript 未来的发展将是一片光明。

TypeScript适用于什么样的项目

TypeScript 适用于任何规模、任何类型的项目!TypeScript 更适用于中大型项目。对比 JavaScript,TypeScript 提供的数据类型可以为项目带来更高的可维护性,以及更少的 Bug。

因为 TypeScript 来源于 JavaScript 又归结于 JavaScript,所以原来基于 JavaScript 的项目,可以直接利用 TypeScript 进行改造。

因为 TypeScript 完全可以和 JavaScript 共存,所以开发人员可以利用 TypeScript 升级强化 JavaScript 程序代码,将代码逐步替换为 TypeScript 的类型声明和约束,以增强程序的健壮性。

团队化开发的中大型项目如果直接利用 TypeScript 开发会更为有利。TypeScript 可以明确定义各个变量的类型,在多人操作同一程序模块时根本不需要纠结或担心类型是否会出错,因为 TypeScript 有强制约束和智能代码提示,这样可以极大地减少类型不对应等初级错误。也正是因为标准的一致性,在团队化开发时还可以避免成员之间无意义的沟通,大幅度减少沟通成本。

为什么引用TypeScript

想要知道为什么引用 TypeScript,就要清楚 TypeScript 的主要目标:利用强类型定义尽可能降低程序出错的概率,从而增强项目代码的可维护性,提高项目的开发效率。下面分两点进行详细分析。

1) TypeScript 可以提高开发者的工作效率,同时帮助开发者避免错误。

TypeScript 提供的数据类型可以帮助开发者避免许多错误。通过使用TypeScript,开发者可以实现错误前置,在编写代码时就可以获知错误信息,而不是在运行时才发现错误。

下面使用 JavaScript 和 TypeScript 来实现同一个需求,读者可以从中感受下面使用 JavaScript 和 TypeScript 来实现同一个需求,读者可以从中感受 TypeScript 的优势。

需求是,封装一个函数,在函数内部将两个数字相加。例如,数字为 x 和 y,返回的结果为“x+y”的和。

JavaScript 代码实现如下:
function add(x, y) {
    return x + y;
}

正确调用如下:
const result = add(2, 3); // 5

错误调用如下:
const result2 = add('2', '3'); // '23'

如何限制错误调用呢?TypeScript 的语法如下:
function add (x: number, y: number): number {
    return x + y;
}
从上述代码中可以看出,在形参接口的部分将其接收形参的类型设置为了数值类型,这就代表该函数只能接收数值类型的数据,而不能接收任何其他类型的数据。在使用与上述相同方式调用函数时,可以发现 TypeScript 编译器会报错。

TypeScript 成功实现了错误前置,防止了程序在运行时发生错误,这就是 TypeScript 的类型约束,明显可以看出其代码功能性更强、可读性更高。

调用 add() 函数的代码如下:
const result3 = add(2, 3); // 5
const result4 = add('2', '3'); // 直接提示错误

2) 与 ECMAScript 标准同步发展。引用 TypeScript 的另一个重要原因就是它坚持与 ECMAScript 标准同步发展。

TypeScript 的发展紧跟 ECMAScript 历史发展的步伐,只要 ECMAScript 标准进入候选阶段,TypeScript 就会尝试实现其功能,这就让企业和开发人员可以放心地使用 TypeScript,而不需要担心是否会与 ECMAScript 标准产生冲突。

怎样学习TypeScript

TypeScript 名字中的 Type 翻译为中文是“类型”的意思,说明“类型”是 TypeScript 最核心的特性,因此学好 TypeScript 的关键在于掌握 TypeScript 的类型。

TypeScript 除了支持 JavaScript 所有的基础和引用类型,还提供了特有的类型,主要包括 tuple(元组)、enum(枚举)、any(任意)、void(空)、union(联合)、interface(接口)、generic(泛型)等。

读者只要从 TypeScript 的基础类型出发,细化 TypeScript 中类型的规范、定义、使用等流程,就能够快速掌握 TypeScript。

相关文章