教程 | https://www.typescripttutorial.net

翻译 | 杨小二

TypeScript 是 Typed JavaScript。TypeScript 向 JavaScript 添加类型，通过在你运行的 JavaScript 代码之前捕获错误来帮助你加快开发速度。

TypeScript 是一种建立在 JavaScript 之上的开源编程语言。它适用于任何浏览器、任何操作系统、任何运行 JavaScript 的环境。

在本 TypeScript 教程中，你将学习到：

• 为什么 TypeScript 比普通 JavaScript 更有优势。
• 了解 TypeScript 的真正含义及其背后的工作原理。
• 使用 TypeScript 及其丰富的功能，如类型、类、接口、模块等。

前提条件

你要遵循本教程，你还需要具备以下知识：

• 基本的 JavaScript 知识。如果你想学习 JavaScript，请查看JavaScript 教程。
• ECMAScript 2015 或 ES6知识现在

现在，我们开始进入今天的内容。

TypeScript 简介

TypeScript 是 JavaScript 的超级集。

TypeScript 建立在 JavaScript 之上。首先，你编写 TypeScript 代码。然后，你使用 TypeScript 编译器将 TypeScript 代码编译为纯 JavaScript 代码。

一旦你拥有纯 JavaScript 代码，你就可以将其部署到 JavaScript 运行的任何环境中。

TypeScript 文件使用.ts扩展名而不是.jsJavaScript 文件的扩展名。

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

如果你有一个没有任何语法错误的 JavaScript 程序，它也是一个 TypeScript 程序。这意味着所有 JavaScript 程序都是 TypeScript 程序。如果你要将现有的 JavaScript 代码库迁移到 TypeScript上，这也是可以的，并且非常有用。

下图展示了 TypeScript 和 JavaScript 的关系：

TypeScript 的主要目标是：

• 向 JavaScript 引入可选类型。

• 实现未来 JavaScript 的计划功能，即当前 JavaScript 的 ECMAScript Next 或 ES Next。

1) TypeScript 提高您的工作效率，同时帮助避免错误

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

以下函数将两个数字x和相加y：

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

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

let result = add(input1.value, input2.value);console.log(result); // result of concatenating strings

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

原因是input1.valueandinput2.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：稻草人

• 第1阶段：提案

• 第 2 阶段：草稿

• 第3阶段：候选

• 第 4 阶段：完成

而且 TypeScript 通常支持处于第 3 阶段的功能。

TypeScript 设置

你需要设置以下工具才能开始使用 TypeScript：

• Node.js – Node.js 是运行 TypeScript 编译器的环境。请注意，你不需要了解 node.js。

• TypeScript 编译器——一个 Node.js 模块，将 TypeScript 编译成 JavaScript。如果你对 node.js 使用 JavaScript，则可以安装该ts-node模块。它是 node.js 的 TypeScript 执行和 REPL

• Visual Studio Code 或 VS Code——是一个支持 TypeScript 的代码编辑器。强烈推荐使用 VS Code。但是，你可以使用自己喜欢的编辑器。

如果你使用 VS Code，你可以安装以下扩展来加快开发过程：

• Live Server – 允许你使用热重载功能启动开发本地服务器。

安装 Node.js

要安装 node.js，请按照以下步骤操作：

• 转到node.js 下载页面。

• 下载适合你的平台（即 Windows、macOS 或 Linux）的 node.js 版本。

• 执行下载的 node.js 包或执行文件。安装非常简单。

• 通过在 macOS 和 Linux 上打开终端或在 Windows 上打开命令行并键入命令来验证安装node -v。如果你看到你下载的版本，那么你已经成功地在你的计算机上安装了 node.js。

安装 TypeScript 编译器

要安装 TypeScript 编译器，请在 macOS 或 Linux 上启动终端并在 Windows 上启动命令提示符，然后键入以下命令：

npm install -g typescript

安装完成后，你可以键入以下命令来检查当前的 TypeScript 编译器版本：

tsc --v

它应该像这样返回版本：

Version 4.0.2

请注意，你的版本可能比此版本更新。

如果你使用的是 Windows 并收到以下错误：

'tsc' is not recognized as an internal or external command,operable program or batch file.

...然后你应该将以下路径添加C:\Users\<user>\AppData\Roaming\npm到PATH变量中。请注意，你应该将 更改<user>为你的 Windows 用户。

要ts-node全局安装模块，请从 macOS 和 Linux 上的终端或 Windows 上的命令提示符运行以下命令：

npm install -g ts-node

安装 VS 代码编辑器

要安装 VS Code，请按照以下步骤操作：

• 到VS Code 下载页面。

• 下载适合你的操作系统（Windows、macOS 或 Linux）的最新版本的 VS Code

• 执行下载的软件包或安装程序文件以启动安装向导。安装过程也非常简单。

• 启动 VS 编辑器。

你将看到如下图所示的 VS Code：

要安装Live Server扩展，请执行以下步骤：

• 单击“扩展”选项卡以查找 VS Code 的扩展。

• 键入实时服务器以进行搜索。

• 单击安装按钮以安装扩展。

到这里，今天的教程就已经结束了，最后，我再总结一下：

首先，我们介绍了什么是TypeScript 。

其次，介绍了TypeScript的优势。

最后，介绍了如何设置 TypeScript 开发环境。

感谢你的阅读，祝编程快乐！

学习更多技能

请点击下方公众号