TypeScript - 环境搭建与编译

TypeScript - 环境搭建与编译

[TOC]

学习目标

• 学会环境搭建
• 掌握 TypeScript 代码的编译与运行

TypeScript 环境搭建

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

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

Node.js 安装

https://nodejs.org

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

node -v

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

https://www.npmjs.com/

http://www.typescriptlang.org/

npm install -g typescript

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

tsc -v

如果大家对 node 和 npm 等知识点有疑问或者想深入了解的，我们其它课程中有针对它们的更详细更深入的内容，可以咨询我们t s的课程顾问进行了解

TypeScript 编译

TypeScript 代码

let str: string = 'ts';

编译 TypeScript 代码

tsc <要编译的ts文件>

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

编译选项

编译命令 tsc 还支持许多编译选项，我们先来了解其中几个，后续我们在具体有需求的时候再去了解更多的。

--outDir

指定编译文件输出目录

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

--target

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

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

--watch

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

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

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

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

编译配置文件

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

include

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

默认配置

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

tsc

指定配置文件

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

tsc -p ./c.json

指定配置文件目录

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

tsc -p ./src

后面我们还会讲到更多的关于编译的操作，现在先让我们看一下上面这个例子，大家可以发现在我们原先的 ts 文件中有这么一段代码 : string，而编译后的 js 文件是没有的，那么这是什么呢？其实这个就和我们上面提到的类型系统有关系了，下面就让我们来具体看一下类型系统到底是这么回事，它能帮助我们解决什么问题！

除了以上配置，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