如何编译TS文件？关于TypeScript配置文件的部分配置选项

1.不设置配置文件

如果不设置配置文件的话，在终端进入目录后，可以直接指定 xxx.ts 单个文件进行编译，也可以编译监听单个TS文件，编译后生成的JS文件会出现在你TS文件所在的那个目录下。

直接编译单个文件：

tsc xxx.ts

编译监听单个文件：

tsc xxx.ts -w

2.设置配置文件

在目录下创建tsconfig.json，创建好后即使不进行配置，也可以直接编译监听该目录下的所有TS文件。

编译监听该目录下的所有TS文件：

tsc -w

在创建好tsconfig.json后，就可以对ts编译器进行配置，例如TS的严格模式、TS编译好后的JS文件放到哪个文件夹下等等。

以下是 tsconfig.json 配置文件的部分配置选项:

{
	/*
        tsconfig.json 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译

        tsconfig的一些配置选项：
    */
	"include": [
		//用于指定哪些TS文件需要被编译，不写则编译所有的
		"../part2/*", // * 表示任意文件， ** 表示任意目录/文件夹
		"../part1/*"
	],

	"exclude": [
		//用于指定哪些TS文件不需要被编译，不写则为空
		"../part1/*"
	],

	/*
        "extends":"tsconfig.json文件路径"
        用于指定该tsconfig.json文件继承于哪一个tsconfig.json文件
    */

	
     "files":[
          xxx.ts,
          xx.ts
      ]
      //用于指定需要被编译的文件，类似include
    

	"compilerOptions": {
		//最重要，表示编译器的选项

		"target": "ES6", //用于指定ts被编译为js的版本,ESNext表示最新版本的ES

		"module": "ES2015", //指定要使用的模块化的规范

		"lib": ["ES2015", "DOM"], //用来指定项目中需要使用的库，不写就没有代码提示，一般不需要改这个，除非项目是在非浏览器的环境下

		"outDir": "./dist", //用于指定编译后的JS文件所存放的目录

		"outFile": "./dist/app.js" //用于将编译后的JS代码合并为一个文件，用的不多，并且开启这个选项的话，那么配置项module就必须使用system 或 amd的模式

		"allowJs": true, //表示是否对JS文件进行编译，默认为false

		"checkJs": true, //是否检查JS代码，检查是否符合语法规范，默认false

		"removeComments": true, //表示是否移除注释，默认false

		"noEmit": false, //表示不生成编译后的文件，默认false，用的不多

		"noEmitOnError": true, //表示当有错误时，不生成编译后的文件，默认false

		"strict": true, //所有严格检查的总开关

		"alwaysStrict": true, //用于设置编译后的文件是否使用严格模式，默认false

		"noImplicitAny": true, //不允许出现隐式的any类型，默认false

		"noImplicitThis": true, //不允许出现隐式的，类型不明的this

		"strictNullChecks": true //严格的检查空值
	}
}

//一般使用ts-loader对ts进行打包编译，因此这些配置项只需一部分即可

这些配置项就基本够用了，开发中缺哪补哪。这些配置项的部分工作可以交给webpack和babel来完成，例如约束编译后的JS语法的ES版本，打包后存放文件夹位置等。