tsconfig.json是ts編譯器的配置文件，ts編譯器可以根據(jù)他的信息來對代碼進行編譯。?

想要學(xué)習(xí)這篇文章小伙伴，可以先去看看下面文章，可以明白tsconfig.json的由來以及如何編譯：

在vscode中使用Typescript并運行_typescript vscode插件_suoh's Blog的博客-CSDN博客

下面開始講解常用的配置項：?

include 和 exclude

?先學(xué)兩個比較實用的兩個配置項，最常用的還是include

{
  /**
    "include" 用來指定哪些ts文件需要被編譯
      路徑：**表示任意目錄
            * 表示任意文件
  */
  "include": [
    "./src/**/*" //代表編譯包含src目錄下的任意目錄的任意文件，其余的不編譯
  ],
  /**
    "exclude" 用來排除哪些ts文件需要被編譯
      默認(rèn)值:[“node modues”、“bower_components”和Sspm_packages”]
  */
  // exclude該選項一般不設(shè)置，用不到
  "exclude": [
    "./test/**/*" //不編譯test下的所有文件
  ]
}

?compilerOptions

compilerOptions是編譯器的選項，比較復(fù)雜的配置選項，里面包含若干個子項，下面依次講解各個子項的作用。

target

• target 用來指定ts被編譯為ES的版本，默認(rèn)是ES3
• 可以是 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017','es2018','es2019','es2020','esnext'.

module

• 指定要使用的模塊化的規(guī)范 例如 "module": "es2015"，或者 "module": "CommonJS",
• 可以是 "none', 'commonjs',?'amd', 'system', 'uma, 'es6', 'es2015', 'es2020', 'esnext'.

當(dāng)定義"module": "es2015" 時（推薦）：?

來演示一下module的作用，我們先定義一個test.ts文件，

然后再indes.ts中引入這個模塊，可以看到編譯為js的時候是es6的模塊化標(biāo)準(zhǔn)方法?

?那么module也可以采用commonjs，那么編譯過來的語法就是commonjs的語法了

當(dāng)定義"module": "commonjs" 時：

lib

• ? ?用來指定項目中要使用的庫，例如document上的方法就屬于一個dom庫，一般不定義該屬性，默認(rèn)即可

outDir

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

?此時就可以看到，我們編譯之后的文件都會存在在js目錄下

outFile?

• 將代碼合并為一個文件
• 設(shè)置outFile后，所有的全局作用域中的代碼會合并到同一個文件中

• "outFile": "./js/index.js",就代表將所有的js目錄下的js文件都合并到index.js里面

• 用的比較少，了解即可

可以看到確實是合并了?

?

?allowJs

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

比如我們目錄下有個test.js此時設(shè)置allowJs為false的時候，它是不會被編譯的

?checkJs

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

removeComments

• 是否移除注釋，默認(rèn)false

設(shè)置為false的時候，注釋是同樣編譯過來的?

?當(dāng)設(shè)置為true，編譯后就不會有注釋，可以看到注釋就消失了

?noEmit

• 不生成編譯后的js文件，默認(rèn)就是false

noEmitOnError

• 當(dāng)有錯誤時不生成編譯文件?

下面是關(guān)于代碼類型檢查的相關(guān)屬性設(shè)置，首先我們應(yīng)該都知道在嚴(yán)格模式下進行代碼開發(fā)要比普通模式性能要好，那在js文件中開啟嚴(yán)格模式只需要在開頭添加 ‘use strict’ 即可

?

那么ts中如何開啟呢？

alwaysStrict?

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

noImplicitAny

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

我們定義一個函數(shù)設(shè)置兩個隱式類型參數(shù)，此時也不會報錯

?當(dāng)設(shè)置為true的時候就會報錯了。

?加上類型就好了：

?noImplicitThis

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

當(dāng)設(shè)置為true時就會報錯

此時就需要我們手動去設(shè)置this的指向?

?

?strictNullChecks

• 嚴(yán)格的檢查空值，可以提示一些不確定是否是空值的邏輯，方便我們對空值做判斷

strict

• 所有嚴(yán)格檢查的總開關(guān)，為true時相當(dāng)于開啟了所有嚴(yán)格檢查，false則關(guān)閉所有

今天講解的常用的tsconfig.json設(shè)置全代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-833047.html

{
	// compilerOptions編譯器的選項
	"compilerOptions": {
		// target 用來指定ts被編譯為ES的版本，默認(rèn)是ES3 
		// 可以是 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017','es2018','es2019','es2020','esnext'.
		"target": "ES6",
		// module 指定要使用的模塊化的規(guī)范
		"module": "CommonJS",
		// outDir 用來指定編譯后文件所在的目錄
		"outDir": "./js",
		// 將代碼合并為一個文件
		// "outFile": "./js/index.js",
		// 是否對js文件進行編譯，默認(rèn)是false
		"allowJs": false,
		// 是否檢查js代碼是否符合語法規(guī)范，默認(rèn)是false
		"checkJs": false,
		// 是否移除注釋
		"removeComments": true,
		// 不生成編譯后的文件
		"noEmit": false,
		// 當(dāng)有錯誤時不生成編譯文件
		"noEmitOnError": false,
		// 所有嚴(yán)格檢查的總開關(guān)
		"strict": false,
		// 用來設(shè)置編譯后的文件是否使用嚴(yán)格模式，默認(rèn)false
		"alwaysStrict": false,
		// 不允許隱式的any類型
		"noImplicitAny": true,
		// 不允許不明確類型的this
		"noImplicitThis": false,
		// 嚴(yán)格的檢查空值
		"strictNullChecks": false,

	},
	/**
	  "include" 用來指定哪些ts文件需要被編譯
	    路徑：**表示任意目錄
	          * 表示任意文件
	*/
	"include": [
		"./**/*" //代表編譯包含src目錄下的任意目錄的任意文件，其余的不編譯
	],
	/**
	  "exclude" 用來排除哪些ts文件需要被編譯
	    默認(rèn)值:[“node modues”、“bower_components”和Sspm_packages”]
	*/
	// exclude該選項一般不設(shè)置，用不到
	"exclude": [
		"./test/**/*" //不編譯test下的所有文件
	]
}

到了這里，關(guān)于tsconfig.json參數(shù)詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！