教程 | https://www.typescripttutorial.net
翻译 | 杨小爱
在今天的教程中，我们将一起来了解什么是 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 的基础上实现未来 JavaScript 的计划功能，即 ECMAScript Next 或 ES Next。
1) TypeScript 提高我们的工作效率，同时帮助避免bug
类型通过帮助我们避免许多错误来提高生产力。通过使用类型，我们可以在编译时捕获错误，而不是让它们在运行时发生。
以下函数将两个数字 x 和 y 相加：
如果我们从 HTML 输入元素中获取值并将它们传递给函数，我们可能会得到意想不到的结果：
例如，如果用户输入 10 和 20，则 add() 函数将返回 1020，而不是 30。
原因是 input1.value 和 input2.value 是字符串，而不是数字。当我们使用运算符 + 添加两个字符串时，它将它们连接成一个字符串。
当我们使用 TypeScript 显式指定参数的类型时，如下所示：
在此函数中，我们将数字类型添加到参数中。函数 add() 将只接受数字，而不接受任何其他值。
当我们按如下方式调用该函数时：
TypeScript 的主要目标是：
- 向 JavaScript 引入可选类型。
- 实现未来 JavaScript 的计划功能，即当前 JavaScript 的 ECMAScript Next 或 ES Next。
1) TypeScript 提高您的工作效率，同时帮助避免错误
类型通过帮助你避免许多错误来提高生产力。通过使用类型，你可以在编译时捕获错误，而不是让它们在运行时发生。
以下函数将两个数字x和相加y：
如果你从 HTML 输入元素获取值并将它们传递给函数，你可能会得到意想不到的结果：
例如，如果用户输入10and 20，add()函数将返回1020，而不是30。
原因是input1.valueandinput2.value是字符串，而不是数字。当你使用运算符+将两个字符串相加时，它会将它们连接成一个字符串。
当你使用 TypeScript 显式指定参数的类型时，如下所示：
在这个函数中，我们将数字类型添加到参数中。该函数add()将只接受数字，而不接受任何其他值。
当你调用该函数时，如下所示：
如果我们把 TypeScript 代码编译成 JavaScript，TypeScript 编译器会报错。因此，我们可以防止错误在运行时发生。
2) TypeScript 将JavaScript 带到了今天
TypeScript 支持在 ES Next 中为当前 JavaScript 引擎的功能计划即将推出。这意味着我们可以在 Web 浏览器（或其他环境）完全支持它们之前使用新的 JavaScript 功能。
每年，TC39 都会为 JavaScript 的标准 ECMAScript 发布几个新功能。功能提案通常经历五个阶段：
- Stage 0: Strawperson
- Stage 1: Proposal
- Stage 2: Draft
- Stage 3: Candidate
- Stage 4: Finished
TypeScript 通常支持第 3 阶段的功能。
感谢你的阅读，祝编程快乐！
学习更多技能请点击下方公众号
