跳到主要内容

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提高了生产力,同时有助于避免错误

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

以下函数将两个数字 xy 相加:

function add(x, y) {
return x + y;
}

如果你从 HTML input 元素中获取值并将它们传递给该函数,可能会得到意外的结果:

let result = add(input1.value, input2.value);
console.log(result); // 结果将是两个拼接后的字符串

例如,如果用户输入 1020add() 函数将返回 1020,而不是 30

原因是 input1.valueinput2.value 是字符串,不是数字。当你使用运算符 + 将两个字符串相加时,它会将它们连接成一个字符串。

当使用 TypeScript 显式指定参数类型时,如下所示:

function add(x: number, y: number) {
return x + y;
}

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

当你调用如下函数时:

let result = add(input1.value, input2.value);

如果你将 TypeScript 代码编译成 JavaScript,TypeScript 编译器将提示错误。因此,你可以预防错误在运行时发生。

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

TypeScript 支持 ES Next 中为当前 JavaScript 引擎计划的新特性。这意味着你可以在 web浏览器(或其他环境)完全支持 JavaScript 新特性之前使用它们。

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

  • 阶段0:Strawperson
  • 第一阶段:提案
  • 第二阶段:草稿
  • 第三阶段:候选
  • 第四阶段:完成

TypeScript 通常支持阶段 3 中的功能。