TypeScript编译选项介绍及配置

🕓 编译选项

自动编译文件

编译文件时，使用 -w指令，TS编译器会自动监视文件的变化，并在文件发生变化的时候对文件进行重新编译

示例: tsc xxx.ts -w

自动编译整个项目

如果直接使用tsc命令，则可以自动将当前项目下所有的ts文件编译为js文件

但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个TS配置文件 tsconfig.json

添加 tsconfig.json 文件之后，只需要输入 tsc 命令就可以自动完成整个项目的编译

配置选项

include

定义希望被编译的文件的所在目录

默认值：["**/*"]

示例：include:["src/**/*","tests/**/*"]
上述示例中，所有的src目录和test目录下的文件都会被编译

P.S: * 表示任意目录 表示任意文件

exclude

定义需要排除在外的目录

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

示例：exclude:["./src/123/**/*"]

extends

定义被继承的配置文件

示例："extends":"./configs/base"

上述示例中，当配置文件中会自动包含config目录下base.json中的所有配置信息

files

指定被编译文件的列表，只有需要编译的文件少时候才会用到

示例：

"files":[
    "core.ts",
    "kano.ts",
    "app.ts"
    "tsc.ts"
]

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

compilerOptions

编译选项是配置文件中非常重要也是比较复杂的配置选项
在compiler中包含多个子选项，用来完成对编译的配置

项目选项：

target

设置TS代码编译的目标版本

可选值：ES3（默认） 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'

如下设置，我们所写的TS代码将会编译为ES6版本的js代码

"compilerOptions":{
    "target":"ES6"
}

lib

指定代码运行时所包含的库（宿主环境）

可选值：ES5 ES6/ES2015 ES7/ES2016 ES2018 ES2019 ES2020 ESNext DOM ......

示例：

"compilerOptions":{
    "target":"ES6",
    "lib":["ES6","DOM"],
    "outDir":"dist",//指定编译后文件的输出目录
    "outFile":"dist/aa.js"//将全局作用域的代码合并为一个文件作为输出
}

module

设置编译后代码使用的模块化系统

可选值：CommonJS、UMD、AMD、System、ES2020、ESNext、None

示例："module": "commonjs"

allowJS

设置是否对js文件进行编译(压缩,babel)，默认是false

outDir

用来指定编译后文件的输出位置

示例："outDir":"./dist"

checkJs

是否检查js代码的语法规范，默认为false

removeComments

编译时是否移除注释，默认为false

noEmit

不生成编译后的文件

noEmitOnError

当有错误的时候不生成编译后的js文件,推荐打开

语法检查选项：

strict

以下所有的语法检查开关，为true的时候，下面所有语法检查设置都会被默认打开，设置为关闭的时候，严格检查就会关闭，下面的设置也会失效

alwaysStrict

用来设置编译后的文件是否使用严格模式，默认为fasle

这里有个小知识点，如果你的js使用了模块化编程，其实就会自动进入严格模式

noImplicitAny

不允许隐式any，默认为false

配置开启的代码示例：

function dd(a,b){}//ab参数就是隐式any,开启了noImplicitAny就会报错

noImplicitThis

不允许不明确类型的this,默认为false

配置开启时代码示例：

function dd(){
    return this //这个this不明确，因为他的类型是随着调用者发生变化的
}

strictNullChecks

严格检查空值，默认为false

比如我想获取dom后立马操作节点，开启了这个配置后，编辑器就会提醒你这样做有可能造成空值，反正我是建议开启这个选项

题外话：在ES2020之后，新增加了一个可选链语法，可以防止调用对象的时候对象不存在造成null：dom?.prop1 如果prop1不存在的话，这条语句返回一个undefined，而不是报错