什么是 TypeScript

摘要：在本教程中，您将了解什么是 TypeScript 以及它相较于原生 JavaScript 的优势。

TypeScript 简介

TypeScript 是 JavaScript 的超集。

TypeScript 在 JavaScript 的基础上构建。首先，您编写 TypeScript 代码。然后，您使用 TypeScript 编译器将 TypeScript 代码编译成纯 JavaScript 代码。

获得纯 JavaScript 代码后，您可以将其部署到任何 JavaScript 运行的环境中。

TypeScript 文件使用 .ts 扩展名，而不是 JavaScript 文件的 .js 扩展名。

TypeScript 使用 JavaScript 语法并添加额外的语法来支持类型。

如果您有一个没有语法错误的 JavaScript 程序，那么它就是一个 TypeScript 程序。这意味着所有 JavaScript 程序都是 TypeScript 程序。如果您要将现有的 JavaScript 代码库迁移到 TypeScript，这将非常有用。

下图显示了 TypeScript 和 JavaScript 之间的关系

为什么选择 TypeScript

TypeScript 的主要目标是

• 为 JavaScript 引入可选类型。
• 将未来 JavaScript 的计划功能（也称为 ECMAScript Next 或 ES Next）实现到当前的 JavaScript 中。

1) TypeScript 提高您的生产力，同时帮助避免错误

类型通过帮助您避免许多错误来提高生产力。通过使用类型，您可以在编译时捕获错误，而不是在运行时出现错误。

例如，以下函数将两个数字 x 和 y 相加

function add(x, y) {
   return x + y;
}Code language: JavaScript (javascript)

如果您从 HTML 输入元素获取值并将它们传递给函数，则可能会得到意外的结果

let result = add(input1.value, input2.value);
console.log(result); // result of concatenating stringsCode language: JavaScript (javascript)

例如，如果用户输入了 10 和 20，则 add() 函数将返回 1020，而不是 30。

原因是 input1.value 和 input2.value 是字符串，而不是数字。当您使用运算符 + 来添加两个字符串时，它会将它们连接成一个字符串。

当您使用 TypeScript 显式地为参数指定类型时，如下所示

function add(x: number, y: number) {
   return x + y;
}Code language: JavaScript (javascript)

在这个函数中，我们为参数添加了数字类型。函数 add() 将只接受数字，而不是任何其他值。

当您如下调用函数时

let result = add(input1.value, input2.value);Code language: JavaScript (javascript)

…如果您将 TypeScript 代码编译成 JavaScript，TypeScript 编译器将发出错误。因此，您可以防止错误在运行时发生。

2) TypeScript 将未来的 JavaScript 带到今天

TypeScript 支持 ES Next 中为当前 JavaScript 引擎规划的未来功能。这意味着您可以在 Web 浏览器（或其他环境）完全支持新 JavaScript 功能之前使用它们。

每年，TC39 都会发布几个新的 ECMAScript 功能，ECMAScript 是 JavaScript 的标准。功能提案通常会经历五个阶段

• 阶段 0：雏形
• 阶段 1：提案
• 阶段 2：草案
• 阶段 3：候选
• 阶段 4：完成

TypeScript 通常支持处于阶段 3 的功能。有关更多信息，请查看 TC39 流程。

总结

• TypeScript 是 JavaScript 的超集。
• TypeScript 为 JavaScript 添加了类型，并帮助您避免在运行时发生的潜在错误。
• TypeScript 还实现了 JavaScript 的未来功能。