TypeScript 安装与编译

因为浏览器或 Node.js 环境只能运行 JavaScript 代码，所以需要先将 TypeScript 编译为 JavaScript，所以开发时需要安装 TypeScript 编译器。

Tip

如果项目采用模块化开发，并使用打包工具（例如 webpack）生成最终的代码，一般在使用 CLI 构建项目框架时都会询问「是否采用 TypeScript 开发」，并自动安装相应的编译器。

安装

Tip

TypeScript 需要在 Node.js 环境下进行编译，因此操作系统要安装 Node.js

在终端输入以下命令在全局环境下安装 TypeScript 编译器

bash

npm install -g typescript

编译

创建一个 TypeScript 文件 hello.ts

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

Tip

在 TypeScript 文档里在变量后使用 : 指定类型（冒号前后有没有空格都可以）。以上示例指定了函数 sayHello 的参数 person 的数据类型是 string。

然后就可以在终端使用 tsc fileName.ts 命令编译 fileName.ts 文件（命令 tsc stand for typescript compiler）

bash

tsc hello.ts

Tip

使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。

Tip

默认将 TypeScript 文档编译为同名的 JavaScript 文档，如果希望编译为其他名称的文档可以采用以下命令

bash

tsc hello.ts otherFileName.js

🔨 编译后得到文件 hello.js

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

编译为 js 后并没有检查类型的代码插入进来，这是因为 TypeScript 只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会报错（但默认还是会编译出相应的 js 文件，如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError），而在运行时，与普通的 JavaScript 文件一样，不会对类型进行检查。

Tip

每次修改完 TypeScript 文档，都需要执行 tsc hello.ts 命令，十分繁琐，可以使用在命令中添加参数 -w 以「监听」 TypeScript 文档的修改情况，当 TypeScript 文档修改并保持后，自动执行编译操作，让 JavaScript 文档始终与 TypeScript 文档保持一致。

bash

tsc hello.ts -w

编译选项

使用以下命令生成一个 TypeScript 编译器配置文档 tsconfig.json

bash

tsc --init

该文档有一些默认的编译选项，可以进行修改或增删

json

{
  "compilerOptions": {
    /* 编译的目标 JavaScript 版本 */
    "target": "es2016",
    /* 源码的根目录，一般是项目目录中的 src 文件夹 */
    "rootDir": "./src",
    /* 编译文件输出的目标目录，一般是项目目录中的 public 文件夹 */
    "outDir": "./public",
    /* 编译模块导出导入所采用的规范 */
    "module": "es2015",
  },
  "includes": ["src"] /* 编译器只会处理 src 文件夹中的 TypeScript 文档 */
}

allowJs：设置为 true 时，js 文件会被 tsc 编译，否则不会。一般在项目中 js、ts 混合开发时需要设置。
allowSyntheticDefaultImports：允许对不包含默认导出的模块使用默认导入。这个选项不会影响生成的代码，只会影响类型检查。即当它设置为 true 时，允许使用 import foo from 'foo' 来导入一个通过 export = foo 导出的模块（是 ts 为了兼容 commonjs 创造的语法）。

Tip

如果项目中有 TypeScript 编译配置文档 tsconfig.json 则在终端只需要执行命令 tsc 或 tsc -w 即可，然后编译器就会根据配置文档的参数执行编译操作，例如根据 rootDir 可以找到源码文件，并将所有 TypeScript 源码文件编译为 JavaScript 文档，放置到 outDir 输出目录中。