本地编写并运行 TypeScript

TypeScript 官网提供的在线编辑器用起来虽然十分便利，但也有诸多限制，没人会在实际项目开发中使用它。所谓 “工欲善其事，必先利其器”，下面我们来搭建一套本地开发环境。

选择代码编辑器

在开始编码之前，我们首先要选择一款合适的代码编辑器。目前可供选择的方案非常多，从 TypeScript 官网上我们能够找到支持 TypeScript 语言的编辑器列表：

alm.tools
Atom
CATS
Eclipse
Emacs
NeoVim
NetBeans
Notepad++
Sublime Text
Vim
Visual Studio
Visual Studio Code
WebStorm

本书将以 Visual Studio Code 代码编辑器为例来演示如何搭建和使用 TypeScript 开发环境。如果读者有喜欢的其他软件，那么可以去搜索相关的资料。这里推荐大家使用 Visual Studio Code 来编写 TypeScript 程序。

前文中我们介绍过，Visual Studio Code 是由微软公司发布的一款跨平台的免费的集成开发环境（IDE）。微软公司在设计和开发 IDE 方面有着非常丰富的经验，Visual Studio Code 一经推出很快就成为世界上最流行的代码编辑器之一。更重要的是，它对 TypeScript 语言的支持尤为出色。Visual Studio Code 和 TypeScript 都是微软公司的产品，两个开发团队之间有着密切的合作。Visual Studio Code 本身就是使用 TypeScript 语言开发的，Visual Studio Code 开发团队对 TypeScript 语言的使用反馈和功能需求是 TypeScript 团队制订开发计划时的重要参考。

为了保证两个产品都能够进行快速迭代并且为开发者提供最新的 TypeScript 特性，Visual Studio Code 开发团队与 TypeScript 开发团队就产品发布周期达成了一致：

Visual Studio Code 每个月发布一次。
TypeScript 每两个月进行一次完整功能的发布，如 3.6、3.7 和 3.8 等。
TypeScript 每个月至少发布一次到 npm，可能是补丁或功能的发布。
TypeScript 的发布时间将比 Visual Studio Code 的发布时间提前约一周；当 Visual Studio Code 发布时，将会把最新版的 TypeScript 集成进来。

图2-5 所示为 TypeScript 和 Visual Studio Code 发布周期的比较。

Figure 1. 图2-5　TypeScript和Visual Studio Code发布周期的比较（图片来自微软官网）

安装 Visual Studio Code

如图2-6所示，可以从 Visual Studio Code 的官网上下载稳定版的 Visual Studio Code 软件安装包。下载完成后，运行安装程序即可完成安装。

Figure 2. 图2-6　Visual Studio Code下载页面

安装 TypeScript

虽然 Visual Studio Code 支持编写 TypeScript 语言的程序，但是它并没有内置 TypeScript 编译器。为了能够编译 TypeScript 程序，我们还需要单独安装 TypeScript 语言。

安装 TypeScript 语言最简单的方式是使用 npm 工具。如果你的计算机中还没有安装 Node.js，则需要到 Node.js 的官网上下载LTS版本的安装包并安装。在安装 Node.js 的同时，也会自动安装 npm 工具。安装完成后，可使用如下命令来验证安装是否成功：

node -v

若安装成功，运行上面的命令会输出 Node.js 的版本号，如 “12.13.0”。

接下来，使用下面的命令全局安装 TypeScript：

npm install -g typescript

“npm install” 是 npm 命令行工具提供的命令之一，该命令用来安装 npm 代码包及其依赖项；“-g” 选项表示使用全局模式安装 TypeScript 语言；最后的 “typescript” 代表的是 TypeScript 语言在 npm 注册表中的名字。

当安装完成后，可以使用下面的命令来验证 TypeScript 是否安装成功：

tsc --version

若安装成功，则运行该命令的结果可能会显示 “Version 3.x.x”，该数字表示安装的 TypeScript 的版本号，如图2-7所示。

Figure 3. 图2-7　检查安装是否成功

至此，我们已经安装完了所有必要的软件。接下来就可以开始在本地编写 “hello,world” 程序了。

创建文件

首先，新建一个名为 sample 的目录作为示例项目的根目录，所有代码都将放在这个目录下。接下来，启动 Visual Studio Code，然后将 sample 文件夹拖曳到 Visual Studio Code 窗口中，或者可以使用快捷键 “Ctrl + K Ctrl + O” 打开 “Open Folder …” 对话框找到刚刚创建的 sample 目录，然后点击 “Select Folder” 按钮，在 Visual Studio Code 中打开此目录，如图2-8所示。

Figure 4. 图2-8　在Visual Studio Code中打开文件夹

新建 tsconfig.json 文件

使用新建文件快捷键 “Ctrl + N” 来创建一个文件并输入以下代码：

{
    "compilerOptions": {
        "strict": true,
        "target": "es5"
      }
}

使用保存文件快捷键 “Ctrl + S” 将这个文件保存为 “tsconfig.json”。“tsconfig.json” 是 TypeScript 编译器默认使用的配置文件。此例中的配置文件启用了所有的严格类型检查编译选项，并将输出 JavaScript 的版本指定为 ECMAScript 5。在本书后面的章节中，将会详细介绍编译选项的使用方法。

新建 hello-world.ts 文件

使用新建文件快捷键 “Ctrl + N” 来创建一个文件并输入以下代码：

const greeting = 'hello, world';

console.log(greeting);

使用保存文件快捷键 “Ctrl + S” 将这个文件保存为 “hello-world.ts”，TypeScript 源文件的常规扩展名为 “.ts”。

编译程序

Visual Studio Code 的任务管理器已经集成了对 TypeScript 编译器的支持，我们可以利用它来编译 TypeScript 程序。使用 Visual Studio Code 任务管理器的另一个优点是它能将编译过程中遇到的错误和警告信息显示在 “Problems” 面板里。

使用快捷键 “Ctrl + Shift + B” 或从菜单栏里选择 “Terminal→Run Build Task” 来打开并运行构建任务面板，然后再选择 “tsc: build - tsconfig.json” 来编译 TypeScript 程序，如图2-9所示。

Figure 5. 图2-9　运行构建任务菜单

当编译完成后，在 “hello-world.ts” 文件的目录下会生成一个同名的 “hello-world.js” 文件，它就是编译输出的 JavaScript 程序。

此时的目录结构如下所示：

sample
|-- hello-world.js
|-- hello-world.ts
`-- tsconfig.json

生成的 “hello-world.js” 文件如下所示：

"use strict";
const greeting = 'hello, world';
console.log(greeting);

运行程序

在 Visual Studio Code 里，使用 “Ctrl + ”（“” 为反引号，位于键盘上数字键 1 的左侧）快捷键打开命令行窗口。然后，使用 Node.js 命令行工具来运行 “hello-world.js”，示例如下：

node hello-world.js

运行上述命令将打印出信息 “hello, world”，如图2-10所示。

Figure 6. 图2-10　示例程序运行结果

可选步骤：设置默认构建任务

为了便于以后多次运行、编译 TypeScript 命令，我们可以将 “tsc: build -tsconfig.json” 设置为默认构建任务。使用快捷键 “Ctrl + Shift + B” 打开运行构建任务面板，点击右侧齿轮形状的配置按钮打开任务配置文件，如图 2-11 所示。

Figure 7. 图2-11　设置默认构建任务

然后，将下面的配置输入 task.json 文件并保存：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": ["$tsc"],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

这样配置之后，当使用快捷键 “Ctrl + Shift + B” 时会直接编译 TypeScript 程序。