編譯上下文

簡單理解，編譯上下文就是告訴ts哪些檔案是可以被編譯的，以及使用什麼樣的編譯選項進行輸出。使用tsconfig.json檔案定義編譯上下文。

配置項說明

在專案的根目錄下建立一個空的tsconfig.json檔案，TypeScript會把此目錄和子目錄下的所有 .ts 檔案作為編譯上下文的一部分，它還會包含一部分預設的編譯選項

{}

基礎配置

對於常用的專案配置，可以直接使用第三方擴充套件

{
  "extends": "@tsconfig/node12/tsconfig.json",
  "compilerOptions": {
    "preserveConstEnums": true   // 列舉型別不進行優化
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
 

參考這裡：https://github.com/tsconfig/bases/

自定義配置

{
  "compilerOptions": {

    /* 基本選項 */
    "target": "es5",                       // 指定 ECMAScript 目標版本: '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' 檔案
    "sourceMap": true,                     // 生成相應的 '.map' 檔案
    "outFile": "./",                       // 將輸出檔案合併為一個檔案
    "outDir": "./",                        // 指定輸出目錄
    "rootDir": "./",                       // 用來控制輸出目錄結構 --outDir.
    "removeComments": true,                // 刪除編譯後的所有的註釋
    "noEmit": true,                        // 不生成輸出檔案
    "importHelpers": true,                 // 從 tslib 匯入輔助工具函式
    "isolatedModules": true,               // 將每個檔案作為單獨的模組 （與 'ts.transpileModule' 類似）.

    /* 嚴格的型別檢查選項 */
    "strict": true,                        // 啟用所有嚴格型別檢查選項
    "noImplicitAny": true,                 // 在表示式和宣告上有隱含的 any型別時報錯
    "strictNullChecks": true,              // 啟用嚴格的 null 檢查
    "noImplicitThis": true,                // 當 this 表示式值為 any 型別的時候，生成一個錯誤
    "alwaysStrict": true,                  // 以嚴格模式檢查每個模組，並在每個檔案里加入 'use strict'

    /* 額外的檢查 */
    "noUnusedLocals": true,                // 有未使用的變數時，丟擲錯誤
    "noUnusedParameters": true,            // 有未使用的引數時，丟擲錯誤
    "noImplicitReturns": true,             // 並不是所有函式裡的程式碼都有返回值時，丟擲錯誤
    "noFallthroughCasesInSwitch": true,    // 報告 switch 語句的 fallthrough 錯誤。（即，不允許 switch 的 case 語句貫穿）

    /* 模組解析選項 */
    "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          // 為裝飾器提供元資料的支援
  }
}
 

編譯

使用yarn安裝typescript yarn add typescript

# 根據配置檔案編譯
npx tsc

# 指定編譯檔案路徑
npx tsc -p ./path-to-project-directory

# 觀測模式

npx tsc -w

指定編譯檔案

{
  "files": [
    "./some/file.ts"
  ]
}

使用 include 和 exclude 選項來指定需要包含的檔案和排除的檔案:

{
  "include": [
    "./folder"
  ],
  "exclude": [
    "./folder/**/*.spec.ts",
    "./folder/someSubFolder"
  ]
}
 

說明: 使用 globs：**/* （一個示例用法：some/folder/**/*）意味著匹配所有的資料夾和所有檔案（副檔名為 .ts/.tsx，當開啟了 allowJs: true 選項時，副檔名可以是 .js/.jsx）