Q: 祈求程式不會有bug該拜什麼神？
A: 拜雍正，專治八阿哥

// XDD 今天來講tsconfig.json，覺得新手這篇可以先 pass，大概知道有 tsconfig.json 可以設定就好，可以先用預設的，有需要設定再去了解及修改。（搞得我好像不是新手一樣，重點是設定真的太多了哈哈

tsconfig.json 是什麼

TypeScript 編譯設定的文件。

如何產生 tsconfig.json

在上一篇有使用過，這邊再提一下，在目錄執行：

tsc --init

這時候就產生了 tsconfig.json。

tsconfig.json 的預設

一開始我們拿到的 tsconfig 檔， 裡面的預設就有這些：

{
    "compilerOptions": {
        "target": "es5",  //指定編譯生成的JS版本
        "module": "commonjs", //指定生成哪種模組
        "strict": true,  //啟用所有嚴格類型檢查選項
        "esModuleInterop": true,  //兼容模組導入的方式
        "skipLibCheck": true,     // 不會檢查引入的函式庫檔案       
        "forceConsistentCasingInFileNames": true //確保檔案的大小寫一致
    }
}

tsconfig.json 還有哪些設定

除了預設 compilerOptions 的設定外， 還有：

• compileOnSave : 在最上層設定 compileOnSave 屬性，可已讓IDE編輯器在儲存檔案的時候根據tsconfig.json重新產生編譯檔案。

• compilerOptions: 所有的編譯設定都會寫在 compilerOptions 裡， 我們一開始取得的預設設定就在 compilerOptions 。

• include: 指定編譯需要編譯的文件或目錄。

• exclude: 指定編譯器需要排除的文件或文件夾。如默認排除 node_modules 文件夾。

  • include 及 exclude 最常見的萬用字元包括：
  • *-表示匹配0至多個字元(不包含分隔符號)
  • ?-匹配一個相符字元（不包含分隔符號）
  • **/-表示匹配所有子資料夾

• extends: 引入其他配置檔案，繼承配置。default 包含當前目錄和子目錄下所有 TypeScript 文件。

• files: files的值為包含相對或絕對文件路徑的list，表示需要編譯的文件。default 包含當前目錄和子目錄下所有 TypeScript 文件。若指定 files，則只會編譯指定的檔案。

• references: 指定要引用的專案。有時候為了方便將前端項目和後端node項目放在同一個目錄下開發，兩個項目依賴同一個配置文件和通用文件。

• typeAcquisition: 設置自動引入函式庫相關定義文件。包含 3 個子屬性：

  • enable : 布林類型，是否開啟自動引入庫類型定義文件(.d.ts)，默認為 false；
  • include : 數組類型，允許自動引入的函式庫名，如：["jquery", "lodash"]；
  • exculde : 數組類型，排除的函式庫名。

overall

{
  "compileOnSave": false,    //編輯器在儲存檔案的時候根據tsconfig.json重新產生編譯檔案
  "compilerOptions": {

    /* 基本選項 */
    "target": "es5",    // 指定編譯生成的JS版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs", // 指定生成哪種模組: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],          // 編譯需要引入的特定函式庫檔案
    "allowJs": true,    // 允許編譯 javascript 文件
    "checkJs": true,    // 報告 javascript 文件中的錯誤
    "jsx": "preserve",  // 指定 jsx 代碼的生成: 'preserve', 'react-native', or 'react'
    "declaration": true,  // 生成相應的 '.d.ts' 文件
    "declarationMap": true,   //生成宣告檔案的 sourceMap
    "sourceMap": true,   // 生成相應的 '.map' 文件
    "outFile": "./",     // 將輸出文件合併為一個文件
    "outDir": "./",      // 指定輸出目錄
    "rootDir": "./",     // 檔案應該要被放置的位置
    "composite": true,       // 是否编译构建引用项目
    "tsBuildInfoFile": "./", // 指定文件存儲增量編譯信息，默認為 tsconfig.tsbuildinfo
    "removeComments": true,  // 刪除編譯後的所有的註釋
    "noEmit": true,          // 不產生輸出檔案
    "importHelpers": true,   // 從 tslib 導入輔助工具函數
    "isolatedModules": true,  // 將每個文件做為單獨的module（與 'ts.transpileModule' 類似）.

    /* 嚴格的類型檢查選項 */
    "strict": true,           // 啟用所有嚴格類型檢查選項                    
    "noImplicitAny": true,    // 在表達式和聲明上有隱含的 any類型時報錯                   
    "strictNullChecks": true,  // 啟用嚴格的 null 檢查                  
    "strictFunctionTypes": true,    //啟用檢查function型別        
    "strictBindCallApply": true,   //啟用對 bind, call, apply 更嚴格的型別檢查           
    "strictPropertyInitialization": true,     //啟用class实例属性的賦值檢查
    "noImplicitThis": true,    //當 this 表達式值為 any 類型的時候，生成一個錯誤                
    "alwaysStrict": true,     // 以嚴格模式檢查每個module，並在每個文件裡加入 'use strict'                  

    /* 額外的檢查 */
    "noUnusedLocals": true,   // 有未使用的變數時，拋出錯誤
    "noUnusedParameters": true,  // 有未使用的參數時，拋出錯誤
    "noImplicitReturns": true, // 並不是所有function里的代碼都有返回值時，拋出錯誤
    "noFallthroughCasesInSwitch": true, // 報告 switch 語句的 fallthrough 錯誤。 （即，不允許 switch 的 case 語句貫穿）
    "noUncheckedIndexedAccess": true,       //檢查 index signature 屬性是否是undefined     

    /* 模組選項 */
    "moduleResolution": "node",  // 選擇模組解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./",         // 用於解析非相對模組名稱的基目錄
    "paths": {},            // 模組名到基於 baseUrl 的路徑映射的列表
    "rootDirs": [],        // 根文件夾列表，其組合內容表示項目運行時的結構內容
    "typeRoots": [],       // 包含類型聲明的文件列表
    "types": [],          // 需要包含的類型聲明文件名列表
    "allowSyntheticDefaultImports": true,  // 允許從沒有設置默認導出的模組中默認導入。

    /* Source Map Options */
    "sourceRoot": "./",                    // 指定調試器應該找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./",                       // 指定調試器應該找到映射文件而不是生成文件的位置
    "inlineSourceMap": true,               // 生成單個 soucemaps 文件，而不是將 sourcemaps 生成不同的文件
    "inlineSources": true,                 // 將代碼與 sourcemaps 生成到一個文件中，要求同時設置了 --inlineSourceMap 或 --sourceMap 屬性

    /* 其他選項 */
    "experimentalDecorators": true,        // 啟用裝飾器
    "emitDecoratorMetadata": true,          // 為裝飾器提供元數據的支持
        
    /* 進階選項 */
    "skipLibCheck": true,                     //不會檢查引入的函式庫檔案
    "forceConsistentCasingInFileNames": true // 確保檔案的大小寫一致
  },
  "files":[
        "hello.ts"                           //若指定 files，則只會編譯指定的 hello.ts 檔案。
  ],
  "exclude": [                               //指定編譯器需要排除的文件或文件夾
    "node_modules"
  ],
  "extends": "./tsconfig.base.json",         //把基礎配置抽離成tsconfig.base.json檔案，然後引入
  
  "references": [                             // 指定依赖的程式路徑
     {"path": "./common"}
  ],
  "typeAcquisition": {                       //自動引入函式庫相關定義文件(.d.ts)。
      "enable": false,
      "exclude": ["jquery"],
      "include": ["jest"]
  }
}

其實在compilerOptions可能還有幾個漏掉的設定，但我也還沒很理解用途。但後面有用到的設定也會筆記。

是否還記得 day02 牛刀小試，寫了第一個ts，使用了型別註記 (Type Annotation) 來指定型別， 下一篇就來介紹指定型別的3種方法唷～

參考資料

https://ithelp.ithome.com.tw/articles/10216636
https://segmentfault.com/a/1190000022809326
https://jkchao.github.io/typescript-book-chinese/project/compilationContext.html#tsconfig-json