TypeScript 与 JavaScript 的区别

很多小伙伴在刚接触 TypeScript 时，心里总会有一个疑问：“既然 TypeScript 最终都要编译成 JavaScript 才能运行，那我为什么不直接写 JavaScript 呢？这不是多此一举吗？”

其实，存在即合理。TypeScript 如今能称霸整个前端工程化生态，必然有它不可替代的优势。这一节，我们来详细对比一下 TypeScript 与 JavaScript 之间到底有什么区别。

TypeScript 与 JavaScript 核心区别在哪？

通俗点来说，JavaScript 是一位 “随性的艺术家” ，而 TypeScript 是一位 “严谨的工程师”。它们的区别主要体现在以下 3 个方面。

1. 动态类型 vs 静态类型（最核心区别）

• JavaScript 是一门动态类型语言。意思是说，变量的类型是在 “程序运行期间” 才确定下来的。我们完全可以把一个数字赋值给变量，下一秒又把它变成字符串，系统完全不管。只有当代码真正在浏览器里跑起来，遇到无法执行的操作时，它才会抛出错误导致页面崩溃。
• TypeScript 是一门静态类型语言。意思是说，变量的类型在 “代码编写期间” 就已经确定了。如果我们规定了一个变量是数字，那么就绝对不能塞一个字符串进去。TypeScript 会在代码编译阶段（甚至在你敲代码的瞬间）就已经把错误揪出来。

2. 编译过程的区别

• JavaScript：不需要编译，写完 “.js” 文件后，直接扔给浏览器或 Node.js 就能运行。（解释型语言）
• TypeScript：浏览器和 Node.js 都不认识它。写完 “.ts” 文件后，必须经过 TypeScript 编译器（tsc）的编译，转换成普通的 “.js” 文件后，才能被真正执行。

3. 面向对象（OOP）的增强

虽然现代的 JavaScript（ES6+）也引入了 “类（class）” 的概念，使得我们可以使用 JavaScript 进行面向对象编程。但是 TypeScript 在此基础上做了大量的增强，并引入了传统的后端语言（如 Java、C#）中才有的概念，包括：

• 接口（interface）
• 泛型（generics）
• 访问修饰符（public、private、protected）
• 抽象类（abstract class）
• ……

这些特性的加入，使得前端也能像编写大型后端架构一样，写出更加规范、高可复用的代码。

4. 零运行时开销（性能一致）

很多小伙伴可能会担心：“TypeScript 增加了这么多严格检查和高级特性，运行起来会不会比普通的 JavaScript 慢啊？”

答案是：绝对不会！这是因为 TypeScript 的所有类型检查和限制，仅仅发生在 “编译阶段”。当 TypeScript 被编译为 JavaScript 之后，所有与类型相关的代码都会被彻底抹除。因此，最终在浏览器或 Node.js 中运行的代码，就是纯净的 JavaScript ，它不会带来任何额外的运行时性能负担。

TypeScript 和 JavaScript 代码对比

光说理论有点抽象，我们来看一个常见的例子：获取用户对象的名称。

示例 1：JavaScript 的隐患

function printUserName(user) {
    console.log(user.name);
}

// 正常调用
printUserName({ name: "Jack", age: 20 }); 

// 错误调用：传入一个没有 name 属性的对象
printUserName({ age: 20 }); 

// 错误调用：什么都不传
printUserName();

运行结果如下。

Jack
undefined
（报错）TypeError: Cannot read properties of undefined (reading 'name')

分析：

对于 JavaScript 代码来说，如果程序还没运行，编辑器是根本不知道 user 是什么东西来的。

当我们运行 “错误调用 1” 时，控制台会输出 undefined，这可能导致后续的逻辑全部错乱。

当我们运行 “错误调用 2” 时，程序会直接崩溃，抛出如下致命错误。这种错误往往藏在深处，只有用户点到那个页面时才会爆发。

TypeError: Cannot read properties of undefined (reading 'name')

示例 2：TypeScript 的降维打击

// 定义接口，限制 User 对象必须长什么样
interface User {
    name: string;
    age: number;
}

// 限制参数 user 必须符合 User 接口的规范
function printUserName(user: User) {
    console.log(user.name);
}

// 正常调用
printUserName({ name: "阿莫", age: 20 }); 

// 错误调用 1
printUserName({ age: 20 }); 

// 错误调用 2
printUserName();

分析：

在 TypeScript 中，一切变得极其严谨。当我们尝试写入 “错误调用 1” 和 “错误调用 2” 的代码时，VS Code 就直接给代码 “飘红” 了，如下图所示。

当我们将鼠标移到飘红的地方，VS Code 也会给出相应的错误提示。也就是说，在 TypeScript 的保护下，这种低级而致命的错误，根本就没有机会活到代码运行的那一刻。

TypeScript 和 JavaScript 对比表

为了方便小伙伴们能够有一个整体的印象，我们把 TypeScript 和 JavaScript 的区别总结成下：

我应该选择 TypeScript，还是 JavaScript？

看到这里，小伙伴们可能会问：“既然 TypeScript 那么棒，我是不是以后再也不用写 JavaScript 了呢？”

我们倒没必要从一个极端走到另一个极端。因为技术的选择，永远都是要看业务场景的：

• 什么时候用 JavaScript？如果你只是想写一个几十行代码的小脚本（比如写个网页轮播图，或者简单的表单验证），或者是一个快速验证想法的个人小 Demo，此时直接用 JavaScript 是最快的，没必要引入 TypeScript 增加配置成本。
• 什么时候用 TypeScript？如果你们是一个团队在开发，项目稍微有点规模（比如后台管理系统、大型电商网站），或者在用 Vue、React 等现代框架做企业级项目。那么请毫不犹豫地选择 TypeScript！虽然它在前期需要多敲几行类型代码，但在后期的长期维护中，能够帮你节省无数个抓狂找 bug 的深夜。

此外，还有很多小伙伴可能会担心：“如果我使用了 TypeScript，是不是以前那些优秀的 JavaScript 第三方库（比如 jQuery、Lodash、Echarts）都不能用了？”

这一点完全不用担心！TypeScript 拥有极其强大的生态兼容能力。通过引入 “声明文件（.d.ts）”，TypeScript 能够为现有的纯 JavaScript 库赋予强大的类型提示。而且，目前市面上绝大多数主流的 JavaScript 库，都已经自带了类型声明，或者在社区中有现成的类型包可供直接下载。

最后想跟小伙伴们说一句：作为初学者，没必要对 TypeScript 感到恐惧。我们可以把它当成 “带有类型提示的升级版 JavaScript” 来学。只要你的 JavaScript 基础够扎实，学习 TypeScript 只是顺水推舟的事情。