之前编写完ts后可以在命令行中输入tsc ts文件名,来编译生成js文件,当我们的ts文件更改的时候还是需要手动的通过命令来编译生成新的文件,此时就不太方便了,这个时候我们就需要 tsc ts文件名 -w (watch:看,观察),这条命令,让编译器自动观察ts文件的变动后进行自动编译,
此处我们使用上面的监视命令,发现了一个问题,一个命令窗口只能够监视一个ts文件,如果项目中ts文件有很多,可想而知这种方法是行不通的
此时我们希望有一个命令可以将所有的ts文件一次性编译而且同时监视
此时我们就需要用到一个配置文件tsconfig.json,
Tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的配置来对代码的编译
只要创建了该配置文件
在命令行输入 tsc ,就可以将全部文件编译
输入tsc -w就是监视所有文件,后面我们要讲解配置文件的
配置内容,
我们知道json文件类似于对象,最外层是一对花括号{}
{
/*
tsconfig.json是ts编译器的配置文件,ts编译器根据它的配置来编译ts文件
"include"用来指定哪些ts文件要进行编译
"exclude"用来指定那些ts文件不需要进行编译,默认值 ["node_modules","bower_components","jspm_packages"]
"extends"定义被继承的配置文件,也就是在多个json配置文件的时候,我们希望,只使用一个配置文件
此刻我们就需要将其他的json配置文件引入进来,相当于import引入外部文件
"files"指定被编译文件的列表,只能写文件名,所以只有在文件较少的情况下使用
*/
// "include": ["./index.ts","./test.ts"] //表示这两文件
//一般使用下面的做法
"include": ["./src/*"], //'*'表示任意文件 。'**'表示任意目录
// "exclude": ["./src/index.ts"], //表示不对index.ts文件进行编译
// "files": []
/*
compilerOptions编译器的选项
1.target指定要编译的ts文件编译成什么版本的js,默认是ES3(原因是它老,所有的浏览器多兼容),在ES3中会将let编译成var
而在ES6版本中let将会编译成let,ESNext表示最新版本的ES
2.module指定使用什么个是来进行,模块化,它有这几个值:'none', 'commonjs', 'amd',
'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node12',
'nodenext'. es6与es2015是一样的
3.lib(libary库)指定项目中要使用的库,一般情况下不需要去更改
4.outDir指定编译后的文件所在的目录
5.outFile可以将我们编译后的文件中的全局作用域的代码合并成一个文件
如果要使多个模块合并在一个文件当中,模块module因为amd或system,其他的会报错
一般我们不手动实现,我们通过打包工具来实现这个功能
6.allowJs指定是否编译js文件,在任意文件当中* 如果我们模块使用js写的,那么我们需要
将allowJs设置为true,默认为false
7.checkJs检查js是否符合js语法,默认为false,checkJs与allowJs一般是一起用的
8.removeComments是否移除注释,默认false
9.noEmit编译但不产生编译后的代码,这个一般使用在不想使用tsc编译生成代码,只想使用它来
检查一下代码是否有错,默认为false
10.noEmitOnError指当有错误时不生成文件,默认为false
11.alwaysStrict(strict严格的)js有一种严格模式,也就是比之前的语法更加严谨
浏览器运行的效率更好,我们在单独的js文件中在文件开头部分添加一个“use strict”
表示了我们开启了js的严格模式,而在ts中使用alwaysStrict来进行开启,默认为false
12.noImplicitAny(implicit:隐式)检查隐式的any类型,我们不提倡使用any类型,更不提倡使用隐式的any
此时我们可以将noImplicitAny改为true来对隐式的any类型进行检查
13.noImplicitThis检查不明确的this类型,我们知道在单独的函数(也就是函数外边没有指定以的对象)时
在函数体调用this,这个this指向window,当我们在指定以对象的里面调用this,此时这个this指向我们定义
的对象,
比如:
function fn(this){
alert(this)
}
若是函数是在指定义对象外调用,这this指向window
若是函数是在指定义对象里面调用,这this指向这个对象
此时我们可以在函数的形参部分进行声明明确的类型
function fn(this: window){
alert(this)
}
14.strictNullChecks 严格的检查空值,默认为false
15.strict是所有严格检查的总开关,默认false,一般开发打开
......还有很多配置我们先讲解这些常用的,后面的配置遇到的时候
在慢慢看
*/
"compilerOptions": {
"target": "ES6",
"module": "system",
// "lib": [],
"outDir": "./dish",
"outFile": "./dish/app.js",
"allowJs": false,
"checkJs": false,
"removeComments": false,
"noEmit": false,
"noEmitOnError": true,
"alwaysStrict": true,
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strict": false
},
},
}