Typescript tsconfig.json的配置詳情
背景
當(dāng)我們?cè)谧?typescript 相關(guān)的項(xiàng)目時(shí),總是不可避免的要配置 ts,但是每個(gè)配置項(xiàng)到底代表什么意思,以及我們可能需要哪些配置項(xiàng)呢?每次去查官網(wǎng)、查相關(guān)資料,感覺(jué)都比較費(fèi)時(shí)費(fèi)力。所以直接就把所有配置都整理出來(lái),當(dāng)作一個(gè)“字典”來(lái)用,這樣就輕松了許多,不知道對(duì)大家有幫助嗎?
配置詳情
{
"compilerOptions": {
/* Basic Options */
"target": "es5" /* target用于指定編譯之后的版本目標(biāo): 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
"module": "commonjs" /* 用來(lái)指定要使用的模塊標(biāo)準(zhǔn): 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
"lib": ["es6", "dom"] /* lib用于指定要包含在編譯中的庫(kù)文件 */,
"allowJs": true, /* allowJs設(shè)置的值為true或false,用來(lái)指定是否允許編譯js文件,默認(rèn)是false,即不編譯js文件 */
"checkJs": true, /* checkJs的值為true或false,用來(lái)指定是否檢查和報(bào)告js文件中的錯(cuò)誤,默認(rèn)是false */
"jsx": "preserve", /* 指定jsx代碼用于的開(kāi)發(fā)環(huán)境: 'preserve', 'react-native', or 'react'. */
"declaration": true, /* declaration的值為true或false,用來(lái)指定是否在編譯的時(shí)候生成相應(yīng)的".d.ts"聲明文件。如果設(shè)為true,編譯每個(gè)ts文件之后會(huì)生成一個(gè)js文件和一個(gè)聲明文件。但是declaration和allowJs不能同時(shí)設(shè)為true */
"declarationMap": true, /* 值為true或false,指定是否為聲明文件.d.ts生成map文件 */
"sourceMap": true, /* sourceMap的值為true或false,用來(lái)指定編譯時(shí)是否生成.map文件 */
"outFile": "./dist/main.js", /* outFile用于指定將輸出文件合并為一個(gè)文件,它的值為一個(gè)文件路徑名。比如設(shè)置為"./dist/main.js",則輸出的文件為一個(gè)main.js文件。但是要注意,只有設(shè)置module的值為amd和system模塊時(shí)才支持這個(gè)配置 */
"outDir": "./dist", /* outDir用來(lái)指定輸出文件夾,值為一個(gè)文件夾路徑字符串,輸出的文件都將放置在這個(gè)文件夾 */
"rootDir": "./", /* 用來(lái)指定編譯文件的根目錄,編譯器會(huì)在根目錄查找入口文件,如果編譯器發(fā)現(xiàn)以rootDir的值作為根目錄查找入口文件并不會(huì)把所有文件加載進(jìn)去的話會(huì)報(bào)錯(cuò),但是不會(huì)停止編譯 */
"composite": true, /* 是否編譯構(gòu)建引用項(xiàng)目 */
"removeComments": true, /* removeComments的值為true或false,用于指定是否將編譯后的文件中的注釋刪掉,設(shè)為true的話即刪掉注釋,默認(rèn)為false */
"noEmit": true, /* 不生成編譯文件,這個(gè)一般比較少用 */
"importHelpers": true, /* importHelpers的值為true或false,指定是否引入tslib里的輔助工具函數(shù),默認(rèn)為false */
"downlevelIteration": true, /* 當(dāng)target為'ES5' or 'ES3'時(shí),為'for-of', spread, and destructuring'中的迭代器提供完全支持 */
"isolatedModules": true, /* isolatedModules的值為true或false,指定是否將每個(gè)文件作為單獨(dú)的模塊,默認(rèn)為true,它不可以和declaration同時(shí)設(shè)定 */
/* Strict Type-Checking Options */
"strict": true /* strict的值為true或false,用于指定是否啟動(dòng)所有類型檢查,如果設(shè)為true則會(huì)同時(shí)開(kāi)啟下面這幾個(gè)嚴(yán)格類型檢查,默認(rèn)為false */,
"noImplicitAny": true, /* noImplicitAny的值為true或false,如果我們沒(méi)有為一些值設(shè)置明確的類型,編譯器會(huì)默認(rèn)認(rèn)為這個(gè)值為any,如果noImplicitAny的值為true的話。則沒(méi)有明確的類型會(huì)報(bào)錯(cuò)。默認(rèn)值為false */
"strictNullChecks": true, /* strictNullChecks為true時(shí),null和undefined值不能賦給非這兩種類型的值,別的類型也不能賦給他們,除了any類型。還有個(gè)例外就是undefined可以賦值給void類型 */
"strictFunctionTypes": true, /* strictFunctionTypes的值為true或false,用于指定是否使用函數(shù)參數(shù)雙向協(xié)變檢查 */
"strictBindCallApply": true, /* 設(shè)為true后會(huì)對(duì)bind、call和apply綁定的方法的參數(shù)的檢測(cè)是嚴(yán)格檢測(cè)的 */
"strictPropertyInitialization": true, /* 設(shè)為true后會(huì)檢查類的非undefined屬性是否已經(jīng)在構(gòu)造函數(shù)里初始化,如果要開(kāi)啟這項(xiàng),需要同時(shí)開(kāi)啟strictNullChecks,默認(rèn)為false */
"noImplicitThis": true, /* 當(dāng)this表達(dá)式的值為any類型的時(shí)候,生成一個(gè)錯(cuò)誤 */
"alwaysStrict": true, /* alwaysStrict的值為true或false,指定始終以嚴(yán)格模式檢查每個(gè)模塊,并且在編譯之后的js文件中加入"use strict"字符串,用來(lái)告訴瀏覽器該js為嚴(yán)格模式 */
/* Additional Checks */
"noUnusedLocals": true, /* 用于檢查是否有定義了但是沒(méi)有使用的變量,對(duì)于這一點(diǎn)的檢測(cè),使用eslint可以在你書寫代碼的時(shí)候做提示,你可以配合使用。它的默認(rèn)值為false */
"noUnusedParameters": true, /* 用于檢查是否有在函數(shù)體中沒(méi)有使用的參數(shù),這個(gè)也可以配合eslint來(lái)做檢查,默認(rèn)為false */
"noImplicitReturns": true, /* 用于檢查函數(shù)是否有返回值,設(shè)為true后,如果函數(shù)沒(méi)有返回值則會(huì)提示,默認(rèn)為false */
"noFallthroughCasesInSwitch": true, /* 用于檢查switch中是否有case沒(méi)有使用break跳出switch,默認(rèn)為false */
/* Module Resolution Options */
"moduleResolution": "node", /* 用于選擇模塊解析策略,有'node'和'classic'兩種類型' */
"baseUrl": "./", /* baseUrl用于設(shè)置解析非相對(duì)模塊名稱的基本目錄,相對(duì)模塊不會(huì)受baseUrl的影響 */
"paths": {}, /* 用于設(shè)置模塊名稱到基于baseUrl的路徑映射 */
"rootDirs": [], /* rootDirs可以指定一個(gè)路徑列表,在構(gòu)建時(shí)編譯器會(huì)將這個(gè)路徑列表中的路徑的內(nèi)容都放到一個(gè)文件夾中 */
"typeRoots": [], /* typeRoots用來(lái)指定聲明文件或文件夾的路徑列表,如果指定了此項(xiàng),則只有在這里列出的聲明文件才會(huì)被加載 */
"types": [], /* types用來(lái)指定需要包含的模塊,只有在這里列出的模塊的聲明文件才會(huì)被加載進(jìn)來(lái) */
"allowSyntheticDefaultImports": true, /* 用來(lái)指定允許從沒(méi)有默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入 */
"esModuleInterop": true /* 通過(guò)為導(dǎo)入內(nèi)容創(chuàng)建命名空間,實(shí)現(xiàn)CommonJS和ES模塊之間的互操作性 */,
"preserveSymlinks": true, /* 不把符號(hào)鏈接解析為其真實(shí)路徑,具體可以了解下webpack和nodejs的symlink相關(guān)知識(shí) */
/* Source Map Options */
"sourceRoot": "", /* sourceRoot用于指定調(diào)試器應(yīng)該找到TypeScript文件而不是源文件位置,這個(gè)值會(huì)被寫進(jìn).map文件里 */
"mapRoot": "", /* mapRoot用于指定調(diào)試器找到映射文件而非生成文件的位置,指定map文件的根路徑,該選項(xiàng)會(huì)影響.map文件中的sources屬性 */
"inlineSourceMap": true, /* 指定是否將map文件的內(nèi)容和js文件編譯在同一個(gè)js文件中,如果設(shè)為true,則map的內(nèi)容會(huì)以//# sourceMappingURL=然后拼接base64字符串的形式插入在js文件底部 */
"inlineSources": true, /* 用于指定是否進(jìn)一步將.ts文件的內(nèi)容也包含到輸入文件中 */
/* Experimental Options */
"experimentalDecorators": true /* 用于指定是否啟用實(shí)驗(yàn)性的裝飾器特性 */
"emitDecoratorMetadata": true, /* 用于指定是否為裝飾器提供元數(shù)據(jù)支持,關(guān)于元數(shù)據(jù),也是ES6的新標(biāo)準(zhǔn),可以通過(guò)Reflect提供的靜態(tài)方法獲取元數(shù)據(jù),如果需要使用Reflect的一些方法,需要引入ES2015.Reflect這個(gè)庫(kù) */
}
"files": [], // files可以配置一個(gè)數(shù)組列表,里面包含指定文件的相對(duì)或絕對(duì)路徑,編譯器在編譯的時(shí)候只會(huì)編譯包含在files中列出的文件,如果不指定,則取決于有沒(méi)有設(shè)置include選項(xiàng),如果沒(méi)有include選項(xiàng),則默認(rèn)會(huì)編譯根目錄以及所有子目錄中的文件。這里列出的路徑必須是指定文件,而不是某個(gè)文件夾,而且不能使用* ? **/ 等通配符
"include": [], // include也可以指定要編譯的路徑列表,但是和files的區(qū)別在于,這里的路徑可以是文件夾,也可以是文件,可以使用相對(duì)和絕對(duì)路徑,而且可以使用通配符,比如"./src"即表示要編譯src文件夾下的所有文件以及子文件夾的文件
"exclude": [], // exclude表示要排除的、不編譯的文件,它也可以指定一個(gè)列表,規(guī)則和include一樣,可以是文件或文件夾,可以是相對(duì)路徑或絕對(duì)路徑,可以使用通配符
"extends": "", // extends可以通過(guò)指定一個(gè)其他的tsconfig.json文件路徑,來(lái)繼承這個(gè)配置文件里的配置,繼承來(lái)的文件的配置會(huì)覆蓋當(dāng)前文件定義的配置。TS在3.2版本開(kāi)始,支持繼承一個(gè)來(lái)自Node.js包的tsconfig.json配置文件
"compileOnSave": true, // compileOnSave的值是true或false,如果設(shè)為true,在我們編輯了項(xiàng)目中的文件保存的時(shí)候,編輯器會(huì)根據(jù)tsconfig.json中的配置重新生成文件,不過(guò)這個(gè)要編輯器支持
"references": [], // 一個(gè)對(duì)象數(shù)組,指定要引用的項(xiàng)目
}
include/exclude/files 三者的關(guān)系
首先我們明確一點(diǎn),exclude 是有默認(rèn)值的,如果我們沒(méi)有設(shè)置 exclude ,那其默認(rèn)值為 node_modules 、bower_components、jspm_packages 和編譯選項(xiàng) outDir 指定的路徑。
還有一點(diǎn),files 的優(yōu)先級(jí)是最高的,比如我們?cè)?nbsp;files 中指定了一些文件,但是又在 exclude 中把它們排除了,這是無(wú)效的,因?yàn)?nbsp;files 的優(yōu)先級(jí)更高,這些文件依然會(huì)被編譯,但是如果 include 中包含,那么依然會(huì)被排除,由此可見(jiàn)這三者的優(yōu)先級(jí)如下:
files > exclude > include
如果 files 和 include 都未設(shè)置,那么除了 exclude 排除的文件,編譯器會(huì)默認(rèn)包含路徑下的所有 TS 文件。
typeRoots & types
typeRoots: 默認(rèn)所有可見(jiàn)的 "@types" 包會(huì)在編譯過(guò)程中被包含進(jìn)來(lái),node_modules/@types 文件夾下以及它們子文件夾下的所有包都是可見(jiàn)的,但是如果指定了typeRoots,只有typeRoots下面的包才會(huì)被包含進(jìn)來(lái)
types: 如果指定了types,只有被列出來(lái)的包才會(huì)被包含進(jìn)來(lái),比如:
{
"compilerOptions": {
"types" : ["node", "lodash", "express"]
}
}以上就是Typescript tsconfig.json的配置詳情的詳細(xì)內(nèi)容,更多關(guān)于Typescript tsconfig.json配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
typescript快速上手的基礎(chǔ)知識(shí)篇
靜態(tài)類型的typescript與傳統(tǒng)動(dòng)態(tài)弱類型語(yǔ)言javascript不同,在執(zhí)行前會(huì)先編譯成javascript,因?yàn)樗鼜?qiáng)大的type類型系統(tǒng)加持,能讓我們?cè)诰帉懘a時(shí)增加更多嚴(yán)謹(jǐn)?shù)南拗?。注意,它并不是一門全新的語(yǔ)言,所以并沒(méi)有增加額外的學(xué)習(xí)成本2022-12-12
微信小程序?qū)崿F(xiàn)圖片自適應(yīng)(支持多圖)
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)圖片自適應(yīng)的相關(guān)資料,文中介紹的方法同樣適應(yīng)于多圖,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01
TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
type challenge刷題之(middle 部分)示例解析
這篇文章主要為大家介紹了type challenge刷題之(middle 部分)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
TypeScript判斷對(duì)稱的二叉樹(shù)方案詳解
這篇文章主要為大家介紹了TypeScript判斷對(duì)稱的二叉樹(shù)方案實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
TypeScript類型級(jí)別和值級(jí)別示例詳解
這篇文章主要為大家介紹了TypeScript類型級(jí)別和值級(jí)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
CKEditor4配置與開(kāi)發(fā)詳細(xì)中文說(shuō)明文檔
網(wǎng)上分享的CKEditor4中文說(shuō)明很多都只是的部分使用方法,今天為大家分享一下比較完整的CKEditor4中文說(shuō)明文檔2018-10-10
數(shù)據(jù)結(jié)構(gòu)TypeScript之二叉查找樹(shù)實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之二叉查找樹(shù)實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
TypeScript類型any never void和unknown使用場(chǎng)景區(qū)別
這篇文章主要為大家介紹了TypeScript類型any never void和unknown使用場(chǎng)景區(qū)別,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10

