tsconfig 備忘清單

前言

使用 ts 已多年，但是貌似對於 tsconfig 總是記憶不清，每次都是 cv 歷史項目，所以寫了這篇備忘錄，希望能幫助到大家。

本文總結整理自 Matt Pocock 的一篇文章 3，加以個人理解，並做了一些修改。

配置清單

{
  "compilerOptions": {
    /* 基礎選項: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "isolatedModules": true,
    "noUnusedLocals": true,
    /* 嚴格模式 */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    /* 使用 tsc 編譯: */
    "module": "NodeNext",
    "outDir": "dist",
    "sourceMap": true,
    /* 需要構建成庫: */
    "declaration": true,
    /* 需要在 monorepo 中構建成庫: */
    "composite": true,
    "declarationMap": true,
    /* 如果不適用 tsc 編譯: */
    "module": "preserve",
    "noEmit": true,
    /*  如果需要再瀏覽器中運行你的代碼: */
    "lib": ["es2022", "dom", "dom.iterable"],
    /* 如果你不需要再瀏覽器中運行你的代碼，比如 node: */
    "lib": ["es2022"]
  }
}

完整的配置說明

基礎配置

{
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "isolatedModules": true,
    "noUnusedLocals": true
  }
}

比如我們在 ts 中引入 import React from 'react', 我們會看到如下報錯

核心是因爲 esm 有 default 這個概念，而 cjs 沒有。任何導出的變量在 cjs 看來都是 module.exports 這個對象上的屬性，esm 的 default 導出也只是 cjs 上的 module.exports.default 屬性而已，而且目前已有的大量的第三方庫大多都是用 UMD / cjs 寫的（或者說，使用的是他們編譯之後的產物，而編譯之後的產物一般都爲 cjs ），但現在前端代碼基本上都是用 esm 來寫，所以 esm 與 cjs 需要一套規則來兼容。

詳細解釋可參見：_esModuleInterop 到底做了什麼？_1

嚴格模式

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true
  }
}
const array: number[] = [];
const value: number | undefined = array[0]; // noUncheckedIndexedAccess -> value有類型number | undefined
class Base {
  greet() {}
}

class Derived extends Base {
  greet() {} // Error! 方法應該有override關鍵字來標記重寫
  override greet() {} // Correct
}

使用 tsc 編譯

{
  "compilerOptions": {
    "module": "NodeNext",
    "outDir": "dist"
  }
}

爲庫構建

{
  "compilerOptions": {
    "declaration": true
  }
}

對於構建 monorepo 的類庫 (大型複雜項目同樣適用)

{
  "compilerOptions": {
    "declaration": true,
    "composite": true,
    "sourceMap": true,
    "declarationMap": true
  }
}

這是 TypeScript3.0 新增的配置，核心是提供的Project Reference能力，當然，這個不僅僅適用於構建 monorepo 的類庫，對於構建單個項目的類庫也同樣適用。

不適用 tsc 編譯

{
  "compilerOptions": {
    "module": "preserve",
    "noEmit": true
  }
}

在 DOM 中運行

{
  "compilerOptions": {
    "lib": ["es2022", "dom", "dom.iterable"]
  }
}

如果不是在 DOM 中運行，那麼可以將 lib 選項改爲 ["es2022"]即可

常用配置

其他常用配置這裏就不說了，包括 include、exclude、files、baseUrl、rootDir等

關於上述基本配置，可以從 tsconfig.guide4 中 copy 出來

參考文章

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/6MEnHHlsaztp-K5l63xmHA

猜你喜歡