TypeScript 环境搭建

从上一节可以知道，TypeScript 代码是不能直接在浏览器或 Node.js 环境中运行的，我们需要使用 “TypeScript 编译器” 来将其编译成 JavaScript 代码，然后才能运行。

下载安装 Node.js

由于 TypeScript 的编译器是基于 Node.js 开发的，因此在安装 TypeScript 之前，我们需要先安装好 Node.js 环境。只需要以下简单的 3 步即可。

1. 下载 Node.js

首先前往 Node.js 官网，下载 Node.js 最新的 LTS（长期支持）版本，如下图所示。

2. 安装 Node.js

Node.js 本质上是一个软件，然后我们只需要像普通软件那样安装就可以了，如下图所示。

3. 验证安装

接下来，我们在电脑左下角搜索框中搜索 “CMD”，然后打开 “命令提示符”，如下图所示。

然后在命令符提示窗口输入 “node -v” 并按下 Enter 键，如果能看到版本号（如 “v22.x.x”）之类的结果，就说明 Node.js 安装成功了，如下图所示。

安装 TypeScript 编译器

安装好了 Node.js 之后，我们就可以使用它自带的包管理命令 npm 来安装 TypeScript 编译器了。在 CMD 中输入以下命令来安装：

npm i typescript -g

安装完成之后，我们可以输入 “tsc -v” 来验证。如果能够显示版本号（比如Version 6.x.x），就表示 TypeScript 编译器已经安装完成了，如下图所示。

编写 TypeScript 程序

首先在电脑上（比如 D 盘根目录下）创建一个名为 “ts-test” 的目录。然后使用 VSCode 打开这个目录，接着创建一个 test.ts（注意后缀名是 .ts），如下图所示。

然后在 test.ts 中输入以下代码

// 定义变量
const message: string = "欢迎来到绿叶网";

// 打印变量
console.log(message);

我们打开 VS Code 终端（使用 Ctrl + `），并执行 “tsc test.ts” 命令，此时会发现文件夹里多了一个同名的 test.js 文件，如下图所示。

打开 test.js，我们可以发现原来的 TypeScript 代码被编译成下面这样的 JavaScript 代码：

"use strict";

// 定义变量
const message = "欢迎来到绿叶网";

// 打印变量
console.log(message);

细心的小伙伴会发现，编译后的 JavaScript 代码的顶部多了一句 "use strict";。这是因为 TypeScript 默认在严格模式下编译代码。这里不需要去管它，正常运行即可。

最后，我们再使用 Node.js 来运行这个生成的 “.js” 文件，也就是执行下面命令：

node test.js

此时运行结果如下：

欢迎来到绿叶网

编译 TypeScript 更高效的方式

小伙伴们肯定都发现了，每次修改 TypeScript 代码，都需要执行 2 步才行：

• 使用 “tsc test.ts” 编译成 .js 文件。
• 使用 “node test.js” 运行 .js 文件。

在日常学习和开发中，每次都要这样执行多步其实是非常麻烦的。为了提高效率，我们可以使用 tsx 这个非常流行的第三方工具，来实现 “一键执行”。

首先，执行以下命令全局安装 tsx：

npm i tsx -g

安装完成之后，我们只需要执行以下命令，就可以直接运行编译得到结果了，非常方便。

tsx test.ts

需要清楚的是，tsx 并不是让 Node.js 突然拥有了直接看懂 TypeScript 的能力。它的底层原理是：在内存中实时把 “.ts” 快速编译成 “.js”，然后立即丢给 Node.js 运行。它省略了在硬盘上生成 “.js” 文件的中间步骤，让我们感觉像是 “直接” 运行了 TypeScript。

tsc : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。

Set-ExecutionPolicy RemoteSigned