tsconfig 常用配置項(常用OR詳解)

生成tsc配置文件方式

tsc --init

tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。
tsconfig.json文件可以是個空文件，那么所有默認的文件都會以默認配置選項編譯

常用配置項總結

{
  "compilerOptions": {
    "outDir": "dist", //輸出目錄
    "sourceMap": true, //采用sourceMap
    "target": "ES2016", //目標語法
    "module": "esnext", //模塊格式
    "moduleResolution": "node", //模塊解析方式
    "strict": true, //嚴格模式
    "jsx": "preserve",  //jsx不轉義
    "esModuleInterop": true, //允許通過es6語法引入commonjs
    "resolveJsonModule": true, //解析json
    "lib": ["dom", "esnext"], //支持的庫類 esnext和dom
  }
}

其他配置項搜集總結

{
  "extends": "",
  "compileOnSave": false,
  "compilerOptions": { //編譯選項
    "allowJS": false, // 允許編譯器編譯JS，JSX文件
    "checkJs": false, // 	在 .js文件中報告錯誤。與allowJs配合使用。
    "allowSyntheticDefaultImports": false, //允許從沒有設置默認導出的模塊中默認導入。這并不影響代碼的輸出，僅為了類型檢查。默認值：module === "system" 或設置了 --esModuleInterop 且 module 不為 es2015 / esnext
    "allowUnreachableCode": false, //不報告執行不到的代碼錯誤。
    "allowUnusedLabels": false, //不報告未使用的標簽錯誤
    "alwaysStrict": false, // 在代碼中注入'use strict',以嚴格模式解析并為每個源文件生成 "use strict"語句
    "charset": "utf8", //輸入文件的字符集
    "declaration": false, // 生成聲明文件.d.ts，開啟后會自動生成聲明文件
    "declarationDir": "", // 指定生成聲明文件存放目錄
    "diagnostics": false, // 顯示診斷信息
    "extendedDiagnostics": false, //顯示詳細的診段信息
    "experimentalDecorators":false,//啟用實驗性的ES裝飾器
    "disableSizeLimit": false, //禁用JavaScript工程體積大小的限制
    "emitBOM": false, //在輸出文件的開頭加入BOM頭（UTF-8 Byte Order Mark）。
    "forceConsistentCasingInFileNames": false, //禁止對同一個文件的不一致的引用
    "incremental": true, // TS編譯器在第一次編譯之后會生成一個存儲編譯信息的文件，第二次編譯會在第一次的基礎上進行增量編譯，可以提高編譯的速度
    "isolatedModules":false,//將每個文件作為單獨的模塊（與“ts.transpileModule”類似）。
    "listEmittedFiles": false, //打印出編譯后生成文件的名字
    "listFiles": false, // 編譯過程中打印文件名
    "tsBuildInfoFile": "./buildFile", // 增量編譯文件的存儲位置
    "target": "ES5", // 指定ECMAScript目標版本 "ES3"（默認）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"
    "module": "CommonJS", // 設置程序的模塊系統， "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015", "ESNext", "ES2020"，只有 "AMD"和 "System"能和 --outFile一起使用，"ES6"和 "ES2015"可使用在目標輸出為 "ES5"或更低的情況下。默認值：target === "ES6" ? "ES6" : "commonjs"
    "moduleResolution": "node", // 模塊解析策略，ts默認用node的解析策略，即相對的方式導入
    "jsx":"Preserve",//在 `.tsx`文件里支持JSX： `"React"`或 `"Preserve"`
    "jsxFactory":"React.createElement",//指定生成目標為react JSX時，使用的JSX工廠函數，比如 `React.createElement`或 `h`
    "newLine": "crlf", //當生成文件時指定行結束符： "crlf"（windows）或 "lf"（unix）。
    "noEmit": false, // 不輸出文件,即編譯后不會生成任何js文件
    "noEmitOnError": false, // 發送錯誤時不輸出任何文件
    "noErrorTruncation": false, //不截短錯誤消息
    "noFallthroughCasesInSwitch": false, // 防止switch語句貫穿(即如果沒有break語句后面不會執行)
    "noImplicitAny": false, // 不允許隱式的any類型,在表達式和聲明上有隱含的 any類型時報錯
    "noImplicitReturns": false, //每個分支都會有返回值，不是函數的所有返回路徑都有返回值時報錯
    "noImplicitThis": false, // 不允許this有隱式的any類型
    "noImplicitUseStrict": false, //模塊輸出中不包含 "use strict"指令
    "noLib": false, //不包含默認的庫文件（ lib.d.ts）
    "noResolve": false, //不把 /// <reference``>或模塊導入的文件加到編譯文件列表。
    "noEmitHelpers": true, // 不生成helper函數，減小體積，需要額外安裝，常配合importHelpers一起使用
    "noStrictGenericChecks": false, //禁用在函數類型里對泛型簽名進行嚴格檢查
    "noUnusedLocals": false, // 若有未使用的局部變量則拋錯
    "noUnusedParameters": false, // 檢若有未使用的函數參數則拋錯
    "lib": [ //TS需要引用的庫，即聲明文件，es5 默認引用dom、es5、scripthost,如需要使用es的高級版本特性，通常都需要配置，如es8的數組新特性需要引入"ES2019.Array",
      "DOM",
      "ES2015",
      "ScriptHost",
      "ES2019.Array"
    ],
    "outDir": "./dist", // 指定輸出目錄
    "outFile": "./app.js", // 將多個相互依賴的文件生成一個文件，可以用在AMD模塊中，即開啟時應設置"module": "AMD",
    "preserveSymlinks": false, //不把符號鏈接解析為其真實路徑；將符號鏈接文件視為真正的文件
    "preserveWatchOutput": false, //保留watch模式下過時的控制臺輸出
    "removeComments": true, // 刪除所有注釋，除了以 /!*開頭的版權信息
    "rootDir": "./", // 指定輸出文件目錄(用于輸出)，用于控制輸出目錄結構
    "resolveJsonModule":true,//允許導入擴展名為“.json”的模塊
    "emitDeclarationOnly": true, // 只生成聲明文件，而不會生成js文件
    "sourceMap": true, // 生成目標文件的sourceMap文件
    "inlineSourceMap": false, // 生成目標文件的inline SourceMap，inline SourceMap會包含在生成的js文件中
    "inlineSources": false, // 將代碼與sourcemaps生成到一個文件中，要求同時設置了 --inlineSourceMap或 --sourceMap屬性
    "declarationMap": true, // 為聲明文件生成sourceMap
    "types": [], // 要包含的類型聲明文件名列表
    "typeRoots": [], // 聲明文件目錄，默認時node_modules/@types
    "importHelpers": true, // 通過tslib引入helper函數，文件必須是模塊（比如 __extends， __rest等）
    "downlevelIteration": true, // 降級遍歷器實現，如果目標源是es3/5，那么遍歷器會有降級的實現
    "strict": true, // 啟用所有嚴格類型檢查選項。啟用 --strict相當于啟用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization
    "skipLibCheck": false, //忽略所有的聲明文件（ *.d.ts）的類型檢查
    "strictNullChecks": true, // 不允許把null、undefined賦值給其他類型的變量.在嚴格的 null檢查模式下， null和 undefined值不包含在任何類型里，只允許用它們自己和 any來賦值（有個例外， undefined可以賦值到 void）
    "strictFunctionTypes": true, // 不允許函數參數雙向協變
    "strictPropertyInitialization": true, // 	確保類的非undefined屬性已經在構造函數里初始化。若要令此選項生效，需要同時啟用--strictNullChecks
    "suppressExcessPropertyErrors": false, //阻止對對象字面量的額外屬性檢查
    "suppressImplicitAnyIndexErrors": false, //阻止 --noImplicitAny對缺少索引簽名的索引對象報錯
    "strictBindCallApply": true, // 嚴格的bind/call/apply檢查
    "useDefineForClassFields": true, //詳見 https://jkchao.github.io/typescript-book-chinese/new/typescript-3.7.html#usedefineforclassfields-%E6%A0%87%E8%AE%B0%E4%B8%8E-declare-%E5%B1%9E%E6%80%A7%E4%BF%AE%E9%A5%B0%E7%AC%A6
    "esModuleInterop": true, // 允許module.exports=xxx 導出，由import from 導入.因為很多老的js庫使用了commonjs的導出方式，并且沒有導出default屬性
    "allowUmdGlobalAccess": true, // 允許在模塊中全局變量的方式訪問umd模塊
    "baseUrl": "./", // 解析非相對模塊的基地址，默認是當前目錄
    "paths": { // 模塊名到基于 baseUrl的路徑映射的列表
      // 如使用jq時不想使用默認版本，而需要手動指定版本，可進行如下配置
      "jquery": [
        "node_modules/jquery/dist/jquery.min.js"
      ]
    },
    "rootDirs": [
      "src",
      "out"
    ], // 將多個目錄放在一個虛擬目錄下，用于運行時，即編譯后引入文件的位置可能發生變化，這也設置可以虛擬src和out在同一個目錄下，不用再去改變路徑也不會報錯
  },
  "files": [],
  "include": [],
  "exclude": [],
  "references": []
}