【TypeScript教程】01—如何安装用于使用 TypeScript 的开发环境

素颜马尾好姑娘i 2022-09-14 11:17 290阅读 0赞

![17623a84a177f23d5bb94ae3f505ff89.png][]

教程 | 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 文件的扩展名。

![b20eab5d81eeeee65706be636304dd1a.png][]

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

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

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

![00cd13f97ae3e5ad68c6bead776a80f5.png][]

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：

![ac11d3a4e1fbb2344745de60a06bc25a.png][]

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

![aa5fd2aa88cb1bae0d6dc00b6dbe7356.png][]

*  单击“扩展”选项卡以查找 VS Code 的扩展。
 *  键入实时服务器以进行搜索。
 *  单击安装按钮以安装扩展。

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

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

其次，介绍了TypeScript的优势。

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

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

#  #

**学习更多技能**

**请点击下方公众号**

![576694c7a22e859b62d52e30d59173fc.gif][]

![e7abfbe91e361ec869d57b0c941ed641.png][]

![a92cf330126b189001eb680d05a8e3fc.png][]

[17623a84a177f23d5bb94ae3f505ff89.png]: /images/20220828/dc3fef9b706743a69733bb5494b6971a.png
[b20eab5d81eeeee65706be636304dd1a.png]: /images/20220828/8d1486ae274c416f87925879b1f0f5ad.png
[00cd13f97ae3e5ad68c6bead776a80f5.png]: /images/20220828/1c97ea9295c7405b971667e32d3998b8.png
[ac11d3a4e1fbb2344745de60a06bc25a.png]: /images/20220828/68c000df02b6407684d1b4930669cea2.png
[aa5fd2aa88cb1bae0d6dc00b6dbe7356.png]: /images/20220828/62f2db2a56224f07bbceff0724a4cbdd.png
[576694c7a22e859b62d52e30d59173fc.gif]: /images/20220828/adf7f22ef2cf4b4b819cd19c20a398a1.png
[e7abfbe91e361ec869d57b0c941ed641.png]: /images/20220828/9ea39d0decd24dd6a849211c67e95fec.png
[a92cf330126b189001eb680d05a8e3fc.png]: /images/20220828/6409735154234e46ad816b6236c47de0.png