柚子快報邀請碼778899分享：TypeScript編譯選項(xiàng)

http://yzkb.51969.com/

創(chuàng)建配置文件 tsconfig.json

tsc --init

直接執(zhí)行 tsc 命令，默認(rèn)編譯目錄下所有的 ts 文件

1、include

需要被編譯的 ts 文件

"include": [

"./src/**/*"

]

路徑：** 表示任意目錄，*表示任意文件

2、exclude

不需要被編譯的 ts 文件 默認(rèn)值：[“node_modules”, “bower_components”, “jspm_packages”]

"exclude": [

"./src/**/*"

]

3、extends

定義被繼承的配置文件

"extends": [

"./config/base"

]

表示當(dāng)前配置文件中會自動包含 config 目錄下 base.json 中所有的配置信息

4、files

指定被編譯文件的列表，只有需要編譯的文件少時才會用到

"files": [

"core.ts",

"sys.ts",

"types.ts",

"parser.ts"

]

以上列表中的文件都會被TS編譯器所編譯

5、compilerOptions

編譯器的選項(xiàng)，里面包含多個子選項(xiàng)，用來完成對編譯的配置

"compilerOptions": {

}

（1）target

指定TS被編譯為ES的版本

可選值：es3（默認(rèn)），es5，es6，es2015，es2016，es2017，es2018，es2019，es2020，es2021，es2022，esnext（最新版本）

"target": "es2016"

（2）module

指定要使用模塊化的規(guī)范

可選值：commonjs，amd，system，umd，es6，es2015，es2020，esnext，none，es2022，node16，nodenext，preserve

"module": "commonjs"

（3）lib

指定項(xiàng)目中要使用的庫。當(dāng)代碼在瀏覽器環(huán)境中運(yùn)行的時候默認(rèn)不用設(shè)置這個配置；當(dāng)運(yùn)行在nodejs中可以去改

可選值： es5， es6， es2015，es7，es2016，es2017，es2018，es2019，es2020，es2021，es2022，esnext，dom，dom.iterable，webworker, webworker.importscripts， webworker.iterable，scripthost，es2015.core，es2015.collection，es2015.generator，es2015.iterable，es2015.promise，es2015.proxy，es2015.reflect，es2015.symbol，es2015.symbol.wellknown，es2016.array.include，es2017.object，es2017.sharedmemory，es2017.string，es2017.intl，es2017.typedarrays，es2018.asyncgenerator，es2018.asynciterable，es2018.intl，es2018.promise，es2018.regexp，es2019.array，es2019.object，es2019.string，es2019.symbol，es2020.bigint，es2020.date，es2020.promise，es2020.sharedmemory，es2020.string，es2020.symbol.wellknown，es2020.intl，es2020.number，es2021.promise，es2021.string，es2021.weakref，es2021.intl，es2022.array，es2022.error，es2022.intl，es2022.object，es2022.string，esnext.array，esnext.symbol，esnext.asynciterable，esnext.intl，esnext.bigint，esnext.string，esnext.promise，esnext.weakref.

"lib": ["es6", "dom"]

（4）outDir

用來指定編譯后文件所在的目錄

"outDir": "./dist"

（5）outFile

將編譯后的代碼合并為一個文件，注意：是所有全局作用域中的代碼

"outFile": "./dist/app.js"

（6）allowJs

是否對 js文件進(jìn)行編譯，默認(rèn)是 false

"allowJs": false

（7）checkJs

是否檢查 js文件是否符合語法規(guī)范，默認(rèn)是 false

"checkJs": false

（8）removeComments

編譯后是否移除注釋，默認(rèn)是 false

"removeComments": false

（9）noEmit

是否生成編譯后的文件，默認(rèn)是 true

"noEmit": true

（10）noEmitOnError

當(dāng)有錯誤的時候不生成編譯后的文件，默認(rèn)是 false

"noEmitOnError": false

（11）alwaysStrict

設(shè)置編譯后的文件是否使用嚴(yán)格模式，默認(rèn)是 false

"alwaysStrict": false

（12）noImplicitAny

不允許隱式的 any 類型，默認(rèn)是 false

"noImplicitAny": false

如下，如果設(shè)置為 true 就會報錯

function (a, b) {

return a + b;

}

可改為：

function (a: number, b: number) {

return a + b;

}

（13）noImplicitThis

不允許不明確類型的 this，默認(rèn)是 false

"noImplicitThis": false

如下，如果設(shè)置為 true 就會報錯，this 的類型是不明確的

function fn() {

alert(this);

}

可改為：

function fn(this: Window) {

alert(this);

}

（14）strictNullChecks

嚴(yán)格的檢查空值，默認(rèn)是 false

"strictNullChecks": false

如下：在網(wǎng)頁中獲取到的元素不一定存在，有可能為 Null，為 Null 時使用 addEventListener 方法就會報錯。如果 strictNullChecks 設(shè)置為 true 就會報錯

let box = document.getElementById('box')

box.addEventListener(click, function() {

alert('box')

})

可改為：

let box = document.getElementById('box')

box?.addEventListener(click, function() {

alert('box')

})

（15）strict

所有嚴(yán)格檢查的總開關(guān)

"strict": true

柚子快報邀請碼778899分享：TypeScript編譯選項(xiàng)

http://yzkb.51969.com/

文章來源