ts编译配置：tsconfig.json

一、自动编译ts文件

1、自动编译单个文件

   命令：`tsc  文件名.ts  -w`    // -w表示监视，如果文件变化，自动重新编译

 

2、自动编译当前项目下的所有的ts文件

   命令： 在tsconfig.json同级目录下执行  `tsc`  或  `tsc -w`     // 注意，需要先在项目的根目录下创建一个配置文件tsconfig.json

二、详解tsconfig.json中的配置选项

1、include

定义希望被编译文件所有的的目录，从tsconfig.json所在的目录作为起始目录

默认值：[**/**]

案例：

"include":["dev/**/*","prop/**/*"]     //表示所有的dev目录和prop目录下的文件都会被编译

**：表示任意目录

*：表示任意文件

 

2、exclude

定义不需要编译的目录，从tsconfig.json所在的目录作为起始目录

默认值：["node_modules","bower_components","jspm_packages"]

案例："exclude":["./prop/**/*"]   //代表不编译prop目录下的所有文件

 

3、extends

定义被继承的配置文件，从tsconfig.json所在的目录作为起始目录

案例：

"extends":"./config/base"       //表示当前配置文件会自动包含config目录下base.json中的所有配置信息

 

4、files（很少用）

指定需要编译文件的列表

案例：

"files":

["one.ts",

"two.ts",

"three.ts",

"four.ts"]

// 表示列表中文件都会被TS编译器编译

 

三、详解tsconfig.json中的compilerOptions

1、target

指定ts编译的js目标版本，解决浏览器兼容性

可选值："ES3"（默认）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"。

案例：

"compilerOptions":{

　　"target":"ES6"

}    //表示我们所编写的ts代码将会被编译ES6版本的js代码

 

2、module

指定使用的模块化规范（若选ES6，编译后的js使用import和export，若选CommonJS，编译后的js使用require）

可选值：  "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。

▶ 只有 "AMD"和 "System"能和 --outFile 一起使用。

▶ "ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。

 

3、lib

指定编译过程中需要引入的库文件的列表（比如，如果lib中没有DOM，console.log()语句会报错）

可选值：

▶ ES5

▶ ES6

▶ ES2015

▶ ES7

▶ ES2016

....

案例：

"compilerOptions":{

　　"target":"ES6",

　　"lib":["ES6","DOM"]

}

注意：如果--lib没有指定默认注入的库的列表。默认注入的库为：

▶ 针对于--target ES5：DOM，ES5，ScriptHost

▶ 针对于--target ES6：DOM，ES6，DOM.Iterable，ScriptHost

 

4、outDir

用来指定编译后的js文件所在的目录

案例：

"compilerOptions":{

　　"target":"ES6",

　　"lib":["ES6","DOM"],

　　"outDir":'./dist'

}

 

5、outFile

将编译后的js文件合并成一个js文件

案例：

"compilerOptions":{

　　"target":"ES6",

　　"lib":["ES6","DOM"],

　　"outDir":'./dist',

　　"outFile":'./dist/main.js'

}

"outFile":'./dist/main.js'   //就表示把编译后的文件合并到main.js这个文件中，最后只会输出一个js文件

出现问题的解决方案：mudule只能使用 amd或者是system

其实outFile这个功能我们在工作中也很少使用，因为我们打包的时候都是通过打包工具进行使用的。所以

这个outFile大家知道有这个东西了解一下就行

 

6、allowJs

是否对js文件进行编译

默认值:false

案例：

"allowJs":true

 

7、checkJs

是否检查js代码符合语法规范  （开启之后，`let a=1;  a=true` 这种语法不通过）

默认值:false

案例：

"checkJs":true

 

8、removeComments

在编译的时候是否移除注释

默认值:false

 

9、noEmit

不生成编译后的文件（开启之后，使用tsc命令，不生成任何js文件）

默认值为：false

案例：

"noEmit":true   //这个有什么用呢，可能有时候你就想用ts的语法检测。就可以使用这个

 

10、noEmitOnError

当存在语法错误的时不生成编译后的文件

默认值：false

案例：

"noEmitOnError":true

 

11、alwaysStrict

js中有一种模式叫做严格模式，它语法更严格，在浏览器执行的性能更高，开发时候我们都会让我们的代码在严格模式下执行

如果是在js文件的话，只需要在js文件的开头加入一个字符串  "use strict";   就表示开启了js的严格模式

设置编译后的文件是否使用严格模式

默认值：false

案例：

"alwaysStrict":true

当代码中有import或export模块代码时，js会自动进入严格模式下

 

12、noImplicitAny

不允许隐式的any类型  （function (a,b){ return a+b }  报错，返回值是any）

默认值为：false

案例：

"noImplicitAny":true

 

13、strictNullChecks

严格的检查空值，开启后，如果对象可能为空，编译不通过

默认值为:false

案例：

"strictNullChecks":false

 

14、strict

所有严格检查的总开关（上面11~13都开启）

默认值为:false

案例：

"strict":false