TypeScript

TypeScript 是 JavaScript 的型別超集，編譯成 JavaScript。Parcel 預設支援 TypeScript，無需任何額外組態。

轉譯

只要您使用 .ts 或 .tsx 檔案，Parcel 會自動轉譯 TypeScript。除了移除型別以將 TypeScript 轉換為 JavaScript 之外，Parcel 也會根據您的瀏覽器目標編譯現代語言功能，例如類別和非同步等待，依據您的瀏覽器目標。它也會自動轉譯 JSX。請參閱 JavaScript 文件中的 轉譯 部分，以取得更多詳細資訊。

可以使用 tsconfig.json 檔案來組態轉譯的某些面向。目前支援 JSX 選項，以及 experimentalDecorators 和 useDefineForClassFields 選項。請參閱 TSConfig 參考 以取得詳細資訊。

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "jsxImportSource": "preact"
  }
}

isolatedModules

由於 Parcel 個別處理每個檔案，因此它會隱式啟用 isolatedModules 選項。這表示某些 TypeScript 功能（例如需要跨檔案型別資訊才能編譯的 const enum）將無法運作。若要在您的 IDE 和型別檢查期間收到這些功能使用情況的警告，您應該在您的 tsconfig.json 中啟用此選項。

{
  "compilerOptions": {
    "isolatedModules": true
  }
}

TSC

TSC 是 Microsoft 的官方 TypeScript 編譯器。儘管 Parcel 的 TypeScript 預設轉譯器比 TSC 快很多，但如果你在 tsconfig.json 中使用 Parcel 不支援的某些組態，你可能需要使用 TSC。在這些情況下，你可以透過將 @parcel/transformer-typescript-tsc 外掛程式新增到 .parcelrc 來使用它。

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  }
}

即使在使用 TSC 時，Parcel 仍會個別處理每個 TypeScript 檔案，因此有關 isolatedModules 的注意事項仍然適用。此外，Parcel 目前不支援某些解析功能，例如 paths。TSC 轉譯器也不會執行任何類型檢查（請參閱下方）。

Babel

你也可以選擇使用 Babel 來編譯 TypeScript。如果找到包含 @babel/preset-typescript 的 Babel 組態，Parcel 會使用它來編譯 .ts 和 .tsx 檔案。請注意，這與上述有關孤立模組的 注意事項 相同。請參閱 JavaScript 文件中的 Babel 以取得更多詳細資訊。

解析

Parcel 目前不支援 tsconfig.json 中的 baseUrl 或 paths 選項，它們是 TypeScript 特有的解析擴充功能。你可以改用 Parcel 的 波浪號 或 絕對 規範子來達成類似的目標。請參閱相依性解析文件中的 組態其他工具，以取得如何組態 TypeScript 來支援這些規範子的資訊。

產生類型

在建置函式庫時，Parcel 可以從你的進入點中萃取類型，並產生 .d.ts 檔案。請搭配目標（例如 main 或 module）在 package.json 中使用 types 欄位來啟用此功能。

{
  "source": "src/index.ts",
  "module": "dist/index.js",
  "types": "dist/index.d.ts"
}

請參閱 使用 Parcel 建立函式庫 以取得更多詳細資訊。

類型檢查

Parcel 預設不會執行任何類型檢查。建議使用支援 TypeScript 的編輯器（例如 VSCode）來進行類型檢查，並在 CI 中使用 tsc 來類型檢查您的程式碼。您可以使用 npm 腳本設定，讓它與您的建置、測試和 linting 一起執行。

{
  "scripts": {
    "build": "parcel build src/index.ts",
    "test": "jest",
    "lint": "eslint",
    "check": "tsc --noEmit",
    "ci": "yarn build && yarn test && yarn lint && yarn check"
  }
}

實驗性驗證器外掛

@parcel/validator-typescript 外掛是一種在 Parcel 建置中進行類型檢查的實驗性方法。它會在套件產生後在背景中執行。請確定 tsconfig.json 中的 include 選項包含了所有您的原始檔。

{
  "extends": "@parcel/config-default",
  "validators": {
    "*.{ts,tsx}": ["@parcel/validator-typescript"]
  }
}

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "target": "es2021",
    "strict": true  
  }
}