Loop`s Workshop

Appearance

TypeScript 基操之编译 ​

本章介绍 TypeScript 的一些最基本的语法和用法。

TypeScript Playground

  • 值与类型
  • TS 编译
  • ts-node

类型擦除 ​

“类型”是针对“值”的，是后者的一个元属性。每一个值在 TS 里面都是有类型的。比如3是一个值，它的类型是number。

TypeScript 代码只涉及类型，不涉及值。所有跟“值”相关的处理，都由 JavaScript 完成。TypeScript 项目包含两种代码，一种是底层的“值代码”，另一种是上层的“类型代码”。TypeScript 的编译过程会进行类型擦除，把“类型代码”全部拿掉，只保留“值代码”。

TypeScript 编译 ​

JavaScript 的宿主环境不认识 TypeScript 代码。所以，TypeScript 项目要想运行，必须先转为 JavaScript 代码，这个代码转换的过程就叫做“编译”（compile）。

TypeScript 官方没有做运行环境，只提供编译器（TypeScript Compiler，tsc）。编译时，会将类型声明和类型相关的代码全部删除，只留下能运行的 JavaScript 代码，并且不会改变 JavaScript 的运行结果。

因此，TypeScript 的类型检查只是编译时的类型检查，而不是运行时的类型检查。一旦代码编译为 JavaScript，运行时就不再检查类型了。

tsc 编译器 ​

TypeScript 官方提供的编译器叫做 tsc，可以将 TypeScript 脚本编译成 JavaScript 脚本。

基本命令 ​

  • 安装
bash
$ npm install -g typescript
bash
$ npx tsc -v
Version 5.7.3
  • 帮助信息
bash
$ tsc -h
$ tsc --all
  • 编译脚本
bash
$ tsc app.ts
$ tsc file1.ts file2.ts file3.ts
  • 参数

（1）--outFile

如果想将多个 TypeScript 脚本编译成一个 JavaScript 文件，使用--outFile参数。

bash
$ tsc file1.ts file2.ts --outFile app.js

（2）--outDir

编译结果默认都保存在当前目录，--outDir参数可以指定保存到其他目录。

bash
$ tsc app.ts --outDir dist

（3）--target

为了保证编译结果能在各种 JavaScript 引擎运行，tsc 默认会将 TypeScript 代码编译成很低版本的 JavaScript，即 3.0 版本（以es3表示）。这通常不是我们想要的结果。

这时可以使用--target参数，指定编译后的 JavaScript 版本。建议使用es2015，或者更新版本。

bash
$ tsc --target es2015 app.ts

（4）--noEmitOnError

编译过程中，如果没有报错，tsc命令不会有任何显示。所以，如果你没有看到任何提示，就表示编译成功了。

如果编译报错，tsc命令就会显示报错信息，但是这种情况下，依然会编译生成 JavaScript 脚本。

这是因为 TypeScript 团队认为，编译器的作用只是给出编译错误，至于怎么处理这些错误，那就是开发者自己的判断了。

如果希望一旦报错就停止编译，不生成编译产物，可以使用--noEmitOnError参数。

bash
$ tsc --noEmitOnError app.ts

上面命令在报错后，就不会生成app.js。

（5）--noEmit

tsc 还有一个--noEmit参数，只检查类型是否正确，不生成 JavaScript 文件。

$ tsc --noEmit app.ts

tsconfig.json ​

类似各种命令行模块的参数配置文件，tsc的编译参数可以写在配置文件tsconfig.json。只要当前目录有这个文件，tsc就会自动读取，所以运行时可以不写参数。

ts-node ​

ts-node 是一个非官方的 npm 模块，可以直接运行 TypeScript 代码。

使用时，可以先全局安装它。

bash
$ npm install -g ts-node

安装后，就可以直接运行 TypeScript 脚本。

bash
$ ts-node script.ts

上面命令运行了 TypeScript 脚本script.ts，给出运行结果。

如果不安装 ts-node，也可以通过 npx 调用它来运行 TypeScript 脚本。

bash
$ npx ts-node script.ts

上面命令中，npx会在线调用 ts-node，从而在不安装的情况下，运行script.ts

如果执行 ts-node 命令不带有任何参数，它会提供一个 TypeScript 的命令行 REPL 运行环境，你可以在这个环境中输入 TypeScript 代码，逐行执行。

bash
$ ts-node
>

上面示例中，单独运行ts-node命令，会给出一个大于号，这就是 TypeScript 的 REPL 运行环境，可以逐行输入代码运行。

bash
$ ts-node
> const twice = (x:string) => x + x;
> twice('abc')
'abcabc'
>

上面示例中，在 TypeScript 命令行 REPL 环境中，先输入一个函数twice，然后调用该函数，就会得到结果。

按下 Ctrl + d，或者输入.exit 退出这个 REPL 环境

如果只是想简单运行 TypeScript 代码看看结果，ts-node 不失为一个便捷的方法。