练习 - 设置 TypeScript 项目

10 分钟

在此练习中，你将创建一个 TypeScript 项目。然后，将运行编译器并验证是否生成了 JavaScript 文件，以确认开发环境是否已正确设置。

在 Visual Studio Code 中设置 TypeScript 项目

在此步骤中，你将在 Visual Studio Code 中创建一个项目工作区，然后初始化该工作区。

打开 Visual Studio Code。
在“欢迎”窗格上，选择“添加工作区文件夹”。
创建一个新的项目文件夹，然后选择“添加”。
在左侧窗格中，选择“资源管理器”按钮。
在“资源管理器”窗格中，选择“新建文件”图标。
在“模块 01 练习”下，键入文件名“module01.ts”，然后选择 Enter。 TypeScript 文件将出现在新的代码编辑器中。

生成 tsconfig.json 文件

在编译 TypeScript 源代码时，TypeScript 编译器会应用默认行为。但你可以通过将 tsconfig.json 文件添加到 TypeScript 项目文件夹的根目录来修改 TypeScript 编译器选项。此文件定义了 TypeScript 项目设置，例如编译器选项和应包括的文件。

你可以使用 TypeScript 编译器的 init 选项，生成具有默认选项的 tsconfig.json 文件。

在 Visual Studio Code 中，选择“终端”>“新建终端”，打开新的终端窗口。
在命令提示符处，输入 tsc --init。

注意，新的 tsconfig.json 文件已添加到“资源管理器”窗格中。可能需要刷新“资源管理器”窗格以查看文件。
在代码编辑器中打开 tsconfig.json 文件。你将看到它具有许多选项，其中大部分都被注释掉了。查看每个启用的选项的说明。
在 tsconfig.json 文件中，查找目标选项，并将其更改为 "ES2015"。
更新 tsconfig.json 文件，以便编译器将所有 JavaScript 文件保存到新文件夹中。

a. 在“资源管理器”窗格中，在项目中创建一个名为“build”的新文件夹。
b. 在 tsconfig.json 文件中，查找 outDir 选项，删除注释，并将参数设置为“build”。
保存 tsconfig.json 文件。
在命令提示符处，输入 tsc。此命令会读取 tsconfig.json 文件并重置项目的选项。

提示

若要详细了解 tsconfig.json 文件，请参阅 TSConfig 参考。

将 TypeScript 编译为 JavaScript

让我们将一些 JavaScript 代码添加到 TypeScript 文件，然后对其进行编译。

将以下 JavaScript 代码复制并粘贴到 module01.ts 编辑器中。
```
function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));
```
注意，即使尚未编译代码，Visual Studio Code 已使用其内置的 TypeScript 支持来进行类型检查。与之前一样，addNumbers 函数的两个参数存在类型错误。
更新 TypeScript 代码，指定每个参数的类型。将 x 替换为 x: number，将 y 替换为 y: number。
保存 TypeScript 文件。 TypeScript 编译器仅适用于已保存的文件版本。
在终端命令提示符下，输入 tsc module01.ts。编译器应该正常运行。

注意，已添加了一个新的 JavaScript 文件，但它不在资源管理器的 build 文件夹中。可能需要刷新“资源管理器”窗格以查看文件。在单个文件上运行 tsc 命令时，编译器将忽略 tsconfig.json 文件。
若要加载配置文件并编译文件夹中的所有 .ts 文件，请在不使用文件名的情况下运行 tsc。此命令应该会将 .js 文件添加到 build 文件夹。请记得删除根文件夹中的多余的 .js 文件。
打开 module01.js 文件，然后选择右上角的“向右拆分编辑器”按钮，以打开新的编辑器视图。

现在，你应该可以并排查看 .ts 和 .js 文件。注意，它们是相同的，只不过 .js 文件不包含新的类型注释。
在终端命令提示符下，输入 node ./build/module01.js。此命令会运行 JavaScript 并在控制台日志中显示结果。

添加 HTML 文件

最后一步是将 HTML 文件添加到项目中，以便可以运行并测试 JavaScript 代码。

在资源管理器中，选择“新建文件”按钮。
键入文件名 module01.html，然后选择 Enter。 HTML 文件将出现在新的代码编辑器中。

将以下 HTML 复制并粘贴到编辑器中，然后保存该文件。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <title>Test JavaScript</title>
</head>
<body>
   <h1>Test JavaScript</h1>
   <p id="date"></p>
   <p>This page calls the script module01.js and is used for testing.</p>
   <script src="./build/module01.js"></script>
</body>
</html>

在资源管理器中，右键单击 module01.html，然后选择“使用默认浏览器打开”。
激活浏览器的开发人员工具，接下来便可在 TypeScript 中开始编码了！

练习解决方案

你可以从 GitHub 代码存储库下载完成的 Visual Studio Code 工作区。若要运行解决方案，必须先在计算机上安装以下软件：

Visual Studio Code（或所选的 IDE）
节点包管理器 (npm)
TypeScript 编译器 (tsc)

为了获得最佳结果，请按照本模块中有关设置环境和使用 TypeScript 编译器的完整说明进行操作。设置环境后，可以运行使用 TypeScript 生成 JavaScript 应用程序学习路径中的任何实验室安装程序或解决方案文件。

继续