Typescript 實戰 --- （11）配置tsconfig.json

一、與文件相關的選項

若是 tsconfig.json 中沒有任何配置，編譯器就會按照默認的配置編譯當前目錄下的全部 ts 文件，包括三種類型 ts, d.ts, tsx

// tsconfig.json

{
  "files": [ // 數組，表示編譯器須要編譯的單個文件的列表
    "src/a.ts"  // 運行 tsc 命令時，只有 a.ts 被編譯了
  ],
  "include": [ // 數組，表示編譯器須要編譯的文件或目錄
    "src", // 會編譯 src 目錄下全部的 ts 文件
    "src/*", // 只會編譯 src 一級目錄下的 ts 文件
    "src/*/*", // 只會編譯 src 二級目錄下的 ts 文件
  ],
  "exclude": [ // 數組，表示編譯器須要排除的文件或目錄，默認會排除 node_modules 下的全部文件和全部的聲明文件
    "src/lib", // 表示不會編譯src下的lib目錄
  ]
}

 

配置文件之間是能夠繼承的，能夠把一些基礎的配置抽離出來方便複用，而後經過 extends 選項來導入基礎配置

// tsconfig.base.json

{
  "files": [ // 數組，表示編譯器須要編譯的單個文件的列表
    "src/a.ts"  // 運行 tsc 命令時，只有 a.ts 被編譯了
  ],
  "include": [ // 數組，表示編譯器須要編譯的文件或目錄
    "src", // 會編譯 src 目錄下全部的 ts 文件
    "src/*", // 只會編譯 src 一級目錄下的 ts 文件
    "src/*/*", // 只會編譯 src 二級目錄下的 ts 文件
  ],
  "exclude": [ // 數組，表示編譯器須要排除的文件或目錄，默認會排除 node_modules 下的全部文件和全部的聲明文件
    "src/lib", // 表示不會編譯src下的lib目錄
  ]
}

// tsconfig.json

{
  "extends": "./tsconfig.base.json",
  // 還能夠覆蓋 tsconfig.base.json 中的配置
  "exclude": [], // 指定不排除任何目錄
  "compileOnSave": true, // 保存文件時讓編譯器自動編譯，vscode暫不支持
}

 

二、與編譯相關的選項

// tsconfig.json

{
  "compilerOptions": {
    "incremental": true, // 增量編譯，ts 編譯器能夠在第一次編譯後生成一個能夠存儲編譯信息的文件，
    // 在二次編譯時會根據這個文件作增量編譯，這樣就能夠提升編譯的速度
    "tsBuildInfoFile": "./buildFile", // 增量編譯文件的存儲位置
    "diagnostics": false, // 打印診斷信息

    "target": "es5", // 目標語言的版本
    "module": "commonjs", // 生成代碼的模塊標準
    "outFile": "./app.js", // 將多個相互依賴的文件生成一個文件，能夠用在 AMD 模塊中
    // 指定 moudle 爲 amd ，編譯時會將多個 ts 文件合併打包成一個 js 文件

    "lib": [], // ts 須要引用的庫，即聲明文件。就算沒有引用任何類庫，當目標語言的版本是 es5 時
    // 也會默認引用 "dom", "es5", "scripthost"
    
    "allowJs": true, // 容許編譯 JS 文件（js、jsx）
    "checkJs": true, // 容許指出在 JS 文件中的報錯信息，一般與 allowJs 一塊兒使用
    "outDir": "./out", // 指定輸出目錄（全部編譯後的文件會存放於此目錄中）
    "rootDir": "./", // 用來控制輸出的目錄結構（指定輸入文件目錄）

    "declaration": true, // 用於生成聲明文件，如 index.ts -> index.d.ts
    "declarationDir": "./d", // 聲明文件的路徑
    "emitDeclarationOnly": true, // 只生成聲明文件（不會生成 js 文件）
    "sourceMap": true, // 生成目標文件的 sourceMap，如 index.ts -> index.js.map
    "inlineSourceMap": true, // 生成目標文件的 inline sourceMap（包含在生成的 js 文件之中）
    "declarationMap": true, // 生成聲明文件的 sourceMap，如 index.ts -> index.d.ts 和 index.d.ts.map
    "typeRoots": [], // 聲明文件目錄，默認 node_modules/@types
    "types": [], // 指定須要加載的聲明文件的包，若是指定了某一個包，就會只加載這個包的聲明文件

    "removeComments": true, // 刪除註釋

    "noEmit": true, // 不輸出任何文件
    "noEmitOnError": true, // 發生錯誤時，不輸出文件

    "noEmitHelpers": true, // 不生成 helper 函數，需額外安裝 ts-helpers
    "importHelpers": true, // 經過 tslib 引入 helper 函數，文件必須是模塊

    "downlevelIteration": true, // 降級遍歷器的實現（es3/es5）

    "strict": true, // 開啓全部嚴格的類型檢查，爲 true 時，下面類型檢查相關的取值也都爲 true
    "alwaysStrict": true, // 在代碼中注入 "use strict"
    "noImplicitAny": true, // 不容許隱式的 any 類型
    "strictNullChecks": true, // 不容許把 null、undefined 賦值給其它類型變量
    "strictFunctionTypes": true, // 不容許函數參數雙向協變
    "strictPropertyInitialization": true, // 類的實例屬性必須初始化
    "strictBindCallApply": true, // 嚴格的 bind、call、apply 檢查
    "noImplicitThis": true, // 不容許 this 有隱式的 any 類型

    "noUnusedLocals": true, // 檢查只聲明，未使用的局部變量
    "noUnusedParameters": true, // 檢查未使用的函數參數
    "noFallthroughCasesInSwitch": true, // 防止 switch 語句貫穿（若是某一個分支沒有 break，下面的分支將會依次執行）
    "noImplicitReturns": true, // 每一個分支都要有返回值，如 if else 中都要有返回值

    "esModuleInterop": true, // 若是一個模塊用 export = 導出， 既能夠用 import from 導入，也能夠用 import = 導入
    "allowUmdGlobalAccess": true, // 容許在模塊中以全局變量的方式訪問 UMD模塊 
    "moduleResolution": "node", // 模塊解析策略，默認 node，還能夠用 classic
    "baseUrl": "./", // 解析非相對模塊的基地址，默認是當前目錄
    "paths": { // 路徑映射，相對於 baseUrl
      "jquery": ["node_modules/jquery/dist/jquery.slim.min.js"]
    },
    "rootDirs": ["src", "out"], // 將多個目錄放在一個虛擬目錄下，用於運行時

    "listEmittedFiles": true, // 打印輸出的文件
    "listFiles": true, // 打印編譯的文件（包括引用的聲明文件）
  }
}

 

classic 模塊策略：

node 模塊策略：