tsconfig.json配置說明

配置 tsconfig.json

tsconfig.json 所包含的屬性並不多，只有 7 個，ms 官方也給出了它的定義文件。但看起來並不怎么舒服，這里就翻譯整理一下。（若有誤，還請指出）

• files: 數組類型，用於表示由 ts 管理的文件的具體文件路徑
• exclude: 數組類型，用於表示 ts 排除的文件（2.0 以上支持 Glob）
• include: 數組類型，用於表示 ts 管理的文件（2.0 以上）
• compileOnSave: 布爾類型，用於 IDE 保存時是否生成編譯后的文件
• extends: 字符串類型，用於繼承 ts 配置，2.1 版本后支持
• compilerOptions: 對象類型，設置編譯的選項，不設置則使用默認配置，配置項比較多，后面再列
• typeAcquisition: 對象類型，設置自動引入庫類型定義文件(.d.ts)相關，該對象下面有 3 個子屬性分別是：
  • enable: 布爾類型，是否開啟自動引入庫類型定義文件(.d.ts)，默認為 false
  • include: 數組類型，允許自動引入的庫名，如：["jquery", "lodash"]
  • exculde: 數組類型，排除的庫名

如不設定 files 和 include，ts 默認是 exclude 以外的所有的以 .ts 和 .tsx 結尾的文件。如果，同時設置 files 的優先級最高，exclude 次之，include 最低。

上面都是文件相關的，編譯相關的都是靠 compilerOptions 設置的，接着就來看一看。

屬性名	值類型	默認值	描述
allowJs	boolean	false	編譯時，允許有 js 文件
allowSyntheticDefaultImports	boolean	module === "system"	允許引入沒有默認導出的模塊
allowUnreachableCode	boolean	false	允許覆蓋不到的代碼
allowUnusedLabels	boolean	false	允許未使用的標簽
alwaysStrict	boolean	false	嚴格模式，為每個文件添加 "use strict"
baseUrl	string		與 path 一同定義模塊查找的路徑，詳細參考這里
charset	string	"utf8"	輸入文件的編碼類型
checkJs	boolean	false	驗證 js 文件，與 allowJs 一同使用
declaration	boolean	false	生成 .d.ts 定義文件
declarationDir	string		生成定義文件的存放文件夾（2.0 以上）
diagnostics	boolean	false	是否顯示診斷信息
downlevelIteration	boolean	false	當 target 為 ES5 或 ES3 時，提供對 for..of，解構等的支持
emitBOM	boolean	false	在輸出文件頭添加 utf-8 (BOM)字節標記
emitDecoratorMetadata	boolean	false	詳見 issue
experimentalDecorators	boolean	false	允許注解語法
forceConsistentCasingInFileNames	boolean	false	不允許不同變量來代表同一文件
importHelpers		boolean	false	引入幫助（2.1 以上）
inlineSourceMap	boolean	false	將 source map 一同生成到輸出文件中
inlineSources	boolean	false	將 ts 源碼生成到 source map 中，需要同時設置 inlineSourceMap 或 sourceMap
isolatedModules	boolean	false	將每個文件作為單獨的模塊
jsx	string	"preserve"	jsx 的編譯方式
jsxFactory	string	"React.createElement"	定義 jsx 工廠方法，React.createElement 還是 h（2.1 以上）
lib	string[]		引入庫定義文件，可以是["es5", "es6", "es2015", "es7", "es2016", "es2017", "esnext", "dom", "dom.iterable", "webworker", "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", "esnext.asynciterable"]（2.0 以上）
listEmittedFiles	boolean	false	顯示輸入文件名
listFiles	boolean	false	顯示編譯輸出文件名
locale	string	隨系統	錯誤信息的語言
mapRoot	string		定義 source map 的存放位置
maxNodeModuleJsDepth	number	0	檢查引入 js 模塊的深度，需同 allowJs 一同使用
module	string		指定模塊生成方式，["commonjs", "amd", "umd", "system", "es6", "es2015", "esnext", "none"]
moduleResolution	string		指定模塊解析方式，["classic" : "node"]
newLine	string	隨系統	行位換行符，"crlf" (windows) 或 "lf" (unix)
noEmit	boolean	false	不顯示輸出
noEmitHelpers	boolean	false	不在輸出文件中生成幫助
noEmitOnError	boolean	false	出錯后，不輸出文件
noFallthroughCasesInSwitch	boolean	false	switch 語句中，每個 case 都要有 break
noImplicitAny	boolean	false	不允許隱式 any，如果true，函數的形參必須帶類型，如果叫不出class名的js對象，那就得any，比如（d:any）=>{} 如果false，函數的樣子更像js  （d）=>{}
noImplicitReturns	boolean	false	函數所有路徑都必須有顯示 return
noImplicitThis	boolean	false	不允許 this 為隱式 any
noImplicitUseStrict	boolean	false	輸出中不添加 "use strict"
noLib	boolean	false	不引入默認庫文件
noResolve	boolean	false	不編譯三斜杠或模塊引入的文件
noUnusedLocals	boolean	false	未使用的本地變量將報錯（2.0 以上）
noUnusedParameters	boolean	false	未使用的參數將報錯（2.0 以上）
outDir	string		定義輸出文件的文件夾
outFile	string		合並輸出到一個文件
paths	object		與 baseUrl 一同定義模塊查找的路徑，詳細參考這里
preserveConstEnums	boolean	false	不去除枚舉聲明
pretty	boolean	false	美化錯誤信息
reactNamespace	string	"React"	廢棄。改用jsxFactory
removeComments	boolean	false	去除注釋
rootDir	string	當前目錄	定義輸入文件根目錄
rootDirs	string []		定義輸入文件根目錄
skipDefaultLibCheck	boolean	false	廢棄。改用 skipLibCheck
skipLibCheck	boolean	false	對庫定義文件跳過類型檢查（2.0 以上）
sourceMap	boolean	false	生成對應的 map 文件
sourceRoot	string		調試時源碼位置
strict	boolean	false	同時開啟 alwaysStrict, noImplicitAny, noImplicitThis 和 strictNullChecks (2.3 以上)
strictNullChecks	boolean	false	null 檢查（2.0 以上）
stripInternal	boolean	false	不輸出 JSDoc 注解
suppressExcessPropertyErrors	boolean	false	不提示對象外屬性錯誤
suppressImplicitAnyIndexErrors	boolean	false	不提示對象索引隱式 any 的錯誤
target	string	"es3"	輸出代碼 ES 版本，可以是 ["es3", "es5", "es2015", "es2016", "es2017", "esnext"]
traceResolution	boolean	false	跟蹤模塊查找信息
typeRoots	string []		定義文件的文件夾位置（2.0 以上）
types	string []		設置引入的定義文件（2.0 以上）
watch	boolean	false	監聽文件變更

一般情況下，tsconfig.json 文件只需配置 compilerOptions 部分。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, // 允許引入沒有默認導出的模塊 "module": "es2015",
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "lib": [
      "dom",
      "es5",
      "es2015"
    ]
  }
}

 

其中，allowSyntheticDefaultImports 是使用 vue 必須的，而設置 module 則是讓模塊交由 webpack 處理，從而可以使用 webpack2 的搖樹。另外，加上allowJs，這樣就可以一點點將現有的 js 代碼轉換為 ts 代碼了。

如果，你在 webpack 中設置過 resolve -> alias，那么，在 ts config 中也需要通過 baseUrl + path 的方式來定義模塊查找的方式。

<a name="tslint"></a>

 

歡迎關注公眾號，進一步技術交流：