LOADING

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,而不是报错

    发表回复

    电子邮件地址不会被公开。必填项已用 * 标注