自动编译
我们可以使用 tsc ...../.ts -w 命令进行ts文件的自动编译
执行后 编译会持续侦听 自动编译
这种方式只能侦听一个文件 对做项目肯定是不现实的,为了解决这个问题,我们需要添加一个tsconfig.json文件,写入一个基础对象
再有tsconfig.json的前提下,我们可以在目录的终端使用 tsc 命令 一键编译目录下的所有文件,同时也可以使用tsc -w 同时侦听所有ts文件的变化并编译
tsconfig.json就是我们typescript的配置文件 我们的配置全部需要写在这个配置文件之中。
tsconfig.json基础配置
include
用来指定哪些ts文件需要被编译
**表示任意目录 *表示任意文件
"include": [
"./src/**/*" //表示根目录下的任意目录的任意文件都会被编译 **表示任意目录 *表示任意文件
],
exclude
用来指定哪些ts文件不需要编译
"compilerOptions": { //编译器的选项 // target 用来指定ts编译为js的版本 "target": "ES6" }
"exclude": [
"./src/reject/**/*" // 表示src下面的reject目录中的文件都不编译
],
extends
继承其他文件中的配置
files
指定需要编译的文件,只有需要编译的文件较少时使用 与includes相似但麻烦
compilerOptions 常用编译器选项(配置项)
target
target用来指定ts文件编译为js文件的版本 默认转换为es3
"compilerOptions": {
//编译器的选项
// target 用来指定ts编译为js的版本
"target": "ES6"
}
在es6版本使用let定义一个变量 变为js文件后就不会变成var了。
可取值为所有的js版本,写错了编译会报错,并且会提示,所以我们可以随便写一个错误的 然后就知道有什么版本了
module
指定使用模块化规范,不同的模块化编译成的js代码是完全不同的 一般使用es6版本
我们新建一个m.ts文件 导出一个变量并且在index中引入 并且使用它
commonjs
es6
可选值也可以通过错误的报错得到
lib
库 用来指定我们项目中使用的库,一般情况下不需要修改
可取值 瞎写咯
outDir
用来指定编译后js文件所放的目录
我们配置一个"./dist"
删除掉之前的js文件后 会发现自动创建了一个dist目录 并且将编译文件放入了
outFile
将代码合并为一个js文件中
我们将模块化的代码暂时去掉 只定义简单的变量
有模块化使用并且需要合并代码的时候, 模块化规范只能选择system和cmd 否则会报错
allowJs
是否对js文件进行编译 默认为false 改为true时,会编译js文件到指定目录
checkJs
编译js文件时候,检查js文件是否符合规范,这个配置如果开启 需要allowJs也开启 不然会报错
let _check = 111
_check = "222"
checkJs设置为true以后,如果不符合规范的话 会报错。
removeComments
是否移除注释,默认为false 我们的ts编译 会讲注释原封不动的编译到js文件中,当将这个配置设置为true后,编译后的js文件不会出现注释
noEmit
不生成编译后的文件,默认为false(生成),修改为true后,将不再生成js文件。
实际用处较少。
noEmitOnError
编译发生错误时,不生成编译后的文件。默认为false(出错时生成)
alwaysStrict
是否开启严格模式 默认为false
当设置为true的时候,编译后的js文件会自动开启"use strict"严格模式
如果我们的代码中使用了模块化相关的代码后 比如import export 就不会出现"use strict"字样,因为js代码如果使用了模块化相关内容 就自动进入了严格模式,所以没有文字体现了。
noImplicitAny
不允许隐式的any类型 默认为false
我们在写某些变量但并没有指定类型的时候,比如说未赋值 或者某些函数中的变量,ts编译器会隐式的给any类型,noImplicitAny这个配置不允许隐式any的出现,编译时会报错
这个选项并不是禁止any的使用,只是禁止隐式any的出现。
noImplicitThis
不允许不明确的this出现 默认为false
strictNullChecks
我们在使用某些属性的时候,若这个属性是个null 可能会出现错误,strictNullChecks会严格的检查有没有可能出现使用空值的情况,如果出现可能出现的问题,会报错
我们可以使用以下方式避免报错的出现
// if (box != null) {
// box.addEventListener("click", function () {});
// }
box?.addEventListener("click", function () {});
strict
所有严格检查的总开关,一般放到配置最上方,默认为false。如果此配置设置为true 那么所有的严格检查开关 都会默认设置为true,可以不写其他配置,如果想单独关闭某个 可以单独书写。