儲存庫
文件
單一儲存庫手冊
程式碼檢查
TypeScript

單一儲存庫中的 TypeScript

您可以在單一儲存庫中使用 TypeScript，方法有兩種 - 作為 linter 或作為建置工具。

在本節中，我們將討論 TypeScript 作為 linter 的角色。這是當您防止 TypeScript 發出檔案（使用 noEmit（在新分頁中開啟））而僅使用它來檢查您的原始碼類型。

共用 tsconfig.json

我們可以使用一個聰明的解決方案，在我們的儲存庫中共用 TypeScript 設定檔。我們可以將我們的基礎 tsconfig.json 檔案放在單一工作區中，並從我們的應用程式中的 tsconfig.json 檔案中延伸它們。

讓我們想像一個像這樣的 Workspace

apps
├─ docs
│  ├─ package.json
│  ├─ tsconfig.json
├─ web
│  ├─ package.json
│  ├─ tsconfig.json
packages
├─ tsconfig
│  ├─ base.json
│  ├─ nextjs.json
│  ├─ package.json
│  ├─ react-library.json

我們的 tsconfig 套件

在 packages/tsconfig 中，我們有一些 json 檔案，它們代表了您可能想要設定 TypeScript 的不同方式。它們每個都像這樣

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "noEmit": true,
    "lib": ["es2022", "dom", "dom.iterable"],
  },
  "exclude": ["node_modules"]
}

在 package.json 中，我們僅命名我們的套件

{
  "name": "tsconfig"
}

儲存庫中的其他 json 檔案可以透過一個簡單的匯入來存取

import baseJson from "tsconfig/base.json";
import nextjsJson from "tsconfig/nextjs.json";
import reactLibraryJson from "tsconfig/react-library.json";

這讓我們可以為不同類型的專案匯出不同的設定檔。

如何使用 tsconfig 套件

每個使用我們共用 tsconfig 的應用程式/套件都必須先將其指定為相依性

{
  "dependencies": {
    "tsconfig": "*"
  }
}

然後，他們可以在自己的 tsconfig.json 中延伸它

{
  // We extend it from here!
  "extends": "tsconfig/nextjs.json",
 
  // You can specify your own include/exclude
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

摘要

當您使用 npx create-turbo@latest 建立新的單一儲存庫 時，此設定會預設配送。您也可以查看 我們的基本範例（在新分頁中開啟） 以查看工作版本。

執行工作

我們建議遵循 基礎 區段中的設定。