TypeScript - 环境搭建与编译

TypeScript 环境搭建

TypeScript 编写的程序并不能直接通过浏览器运行，我们需要先通过 TypeScript 编译器把 TypeScript 代码编译成 JavaScript 代码

TypeScript 的编译器是基于 Node.js 的，所以我们需要先安装 Node.js

Node.js 安装

https://nodejs.org

安装完成以后，通过 终端或者 cmd 等命令行工具来调用 node

1

node -v

通过 NPM 包管理工具安装 TypeScript 编译器

https://www.npmjs.com/

http://www.typescriptlang.org/

1

npm install -g typescript

TypeScript 编译器 安装成功以后，会提供一个 tsc 的命令，用于编译我们的 TypeScript 代码文件

1

tsc -v

TypeScript 编译

TypeScript 代码

1

let str: string = 'zxl';

编译 TypeScript 代码

1

tsc <要编译的ts文件>

默认情况下会在当前文件所在目录下生成同名的 js 文件

编译选项

编译命令 tsc 还支持许多编译选项。

–outDir

指定编译文件输出目录

1

tsc --outDir ./dist ./src/HelloTypeScript.ts

–target

指定编译的代码版本目标，默认为 ES3

1

tsc --outDir ./dist --target ES6 ./src/HelloTypeScript.ts

–watch

在监听模式下运行，当文件发生改变的时候自动编译

1

tsc --outDir ./dist --target ES6 --watch ./src/HelloTypeScript.ts

通过上面几个例子，基本可以了解 tsc 的使用了，如果每次编译都输入这么一大堆的选项是真的很繁琐。

其实，TypeScript 编译为我们提供了一个更加强大且方便的方式，编译配置文件：tsconfig.json，我们可以把上面的编译选项保存到这个配置文件中

编译配置文件

1
2
3
4
5
6
7
8

{
	"compilerOptions": {
		"outDir": "./dist",
		"target": "ES2015",
    "watch": true,
	},
  "include": ["./src/**/*"]
}

include

指定需要编译的 ts 文件目录，如果没有指定，则默认包含当前目录及子目录下的所有 ts 文件

默认配置

tsc 默认会从当前目录开始去查找 tsconfig.json 文件，如果没有找到，会逐级向上搜索父目录

1

tsc

指定配置文件

使用 –project 或 -p 也可以指定某个具体的配置文件

1

tsc -p ./c.json

指定配置文件目录

使用 -p 指定配置文件所在目录，tsc 会默认加载该目录下的 tsconfig.json 文件

1

tsc -p ./src

除了以上配置，ts 的编译配置选项还有很多。

更多编译选项：

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

http://www.typescriptlang.org/docs/handbook/compiler-options.html

总结

• 环境搭建
• 编译命令与配置
• 配置文件：tsconfig.json
  • outDir、target、watch、include、project