编译器
TypeScript 编译器是一段 JavaScript 程序,能够对 TypeScript 代码和 JavaScript 代码进行静态类型检查,并且可以将 TypeScript 程序编译为可执行的 JavaScript 程序。TypeScript 编译器是自托管编译器,它使用 TypeScript 语言进行开发。
TypeScript 编译器程序位于 TypeScript 语言安装目录下的 lib
文件夹中。TypeScript 编译器对外提供了一个命令行工具用来编译 TypeScript 程序,它就是 tsc
命令。
本节将详细介绍如何安装 TypeScript 编译器,以及如何使用 TypeScript 编译器来编译单个和多个 TypeScript 源文件。
安装编译器
安装 TypeScript 编译器最简单的方式是使用 npm
工具,即 Node.js
包管理器。如果你的计算机中没有安装 Node.js
,那么需要先安装 Node.js
。我们可以到 Node.js
的官方网站上下载软件安装包并安装。Node.js
的安装包中内置了 npm
工具,因此安装 Node.js
的同时会自动安装 npm
工具。关于安装 Node.js
的详细介绍请参考 9.1.3 节。
安装了 Node.js
之后,在命令行窗口中运行下列命令来全局安装 TypeScript 语言:
npm install -g typescript
如果安装成功,那么该命令会打印出如下的输出信息(实际版本号与安装的版本有关):
+ typescript@3.8.3
在不同的操作系统中,全局安装的 TypeScript 会被安装到不同的目录下。例如,在 Windows
系统中 TypeScript 会被安装到 %AppData%\npm
目录下。根据 GNU 编码规范,每个命令行程序都应该提供 --help
和 --version
两个选项。TypeScript 编译器也提供了这两个标准的命令行选项。
--help --all
在成功地安装了 TypeScript 后,我们就可以在命令行上使用 tsc
命令。按照惯例,可以使用 --help
(简写为 -h
)选项来显示 tsc
命令的帮助信息。示例如下:
tsc --help
运行该命令将产生类似于如下的输出结果:
Version 3.8.3
Syntax: tsc [options] [file...]
Examples: tsc hello.ts
tsc --outFile file.js file.ts
tsc @args.txt
tsc --build tsconfig.json
Options:
-h, --help Print this message.
-w, --watch Watch input files.
...
在默认情况下,--help
选项仅会显示基本的帮助信息。我们可以使用额外的 --all
选项来查看完整的帮助信息。示例如下:
tsc --help --all
编译程序
在安装了 TypeScript 之后,就可以使用 tsc
命令来编译 TypeScript 工程了。
编译单个文件
TypeScript 编译器最基本的使用方式是编译单个文件。
假设,当前工程目录结构如下:
C:\app
`-- index.ts
index.ts
文件的内容如下:
function add(x: number, y: number): number {
return x + y;
}
在 C:\app
目录下运行 tsc
命令来编译 index.ts
文件,示例如下:
tsc index.ts
默认情况下,编译器会在 C:\app
目录下生成编译后的 index.js
文件,其内容如下:
function add(x, y) {
return x + y;
}
当前工程目录结构如下:
C:\app
|-- index.js
`-- index.ts
如果待编译文件的文件名中带有空白字符,如空格,那么就需要使用转义符号 \
或者使用单、双引号将文件名包围起来。
假设当前工程目录结构如下:
C:\app
`-- filename with spaces.ts
在 C:\app
目录下运行 tsc
命令来编译 filename with spaces.ts
文件。示例如下:
# 使用双引号
tsc "filename with spaces.ts"
# 使用单引号
tsc 'filename with spaces.ts'
# 使用转义符号
tsc filename\ with\ spaces.ts
编译多个文件
TypeScript 编译器能够同时编译多个文件。我们可以在命令行上逐一列出待编译的文件,也可以使用通配符来模糊匹配待编译的文件。
假设当前工程目录结构如下:
C:\app
|-- index.ts
`-- utils.ts
在 C:\app
目录下运行 tsc
命令来编译 index.ts
和 utils.ts
文件。示例如下:
tsc index.ts utils.ts
除此之外,还可以使用通配符来匹配待编译的文件,支持的通配符包括:
-
*
匹配零个或多个字符,但不包含目录分隔符。 -
?
匹配一个字符,但不包含目录分隔符。 -
**/
匹配任意目录及其子目录。
在 C:\app
目录下运行 tsc
命令并使用通配符来匹配当前目录下的所有 TypeScript 文件。示例如下:
tsc *.ts
不论使用以上哪种方式来指定待编译的文件,编译器都会在 C:\app
目录下生成编译后的 index.js
文件和 utils.js
文件,工程目录结构如下:
C:\app
|-- index.js
|-- index.ts
|-- utils.js
`-- utils.ts
--watch和-w
TypeScript 编译器提供了一种特殊的编译模式,即观察模式。在观察模式下,编译器会监视文件的修改并自动重新编译文件。观察模式通过 --watch
(简写为 -w
)编译选项来启用。
假设当前工程目录结构如下:
C:\app
`-- index.ts
在 C:\app
目录下运行 tsc
命令来编译 index.ts
文件并启用观察模式。示例如下:
tsc index.ts --watch
运行 tsc
命令后,编译器会编译 index.ts
文件并进入观察模式。在命令行窗口中能够看到如下输出消息:
[1:00:00 PM] Starting compilation in watch mode...
[1:00:01 PM] Found 0 errors. Watching for file changes.
这时,如果我们修改 index.ts
文件并保存,编译器会自动重新编译 index.ts
文件。在命令行窗口中能够看到如下输出消息:
[1:00:10 PM] File change detected. Starting incremental compilation...
[1:00:11 PM] Found 0 errors. Watching for file changes.
编译器在重新编译了 index.ts
文件之后依然会继续监视文件的修改。