TypeScript

TypeScript は、JavaScript にコンパイルされる JavaScript の型付きスーパーセットです。Parcel は追加の設定なしで TypeScript をすぐにサポートします。

トランスパイル

Parcel は、.ts または .tsx ファイルを使用するたびに TypeScript を自動的にトランスパイルします。TypeScript を JavaScript に変換するために型を取り除くことに加えて、Parcel は、ブラウザのターゲットに応じて、クラスや async await などの最新の言語機能も必要に応じてコンパイルします。また、JSX も自動的にトランスパイルします。詳細は、JavaScript ドキュメントの トランスパイル セクションを参照してください。

tsconfig.json ファイルを使用して、トランスパイルのいくつかの側面を設定できます。現在、JSX オプションに加えて、experimentalDecorators および useDefineForClassFields オプションがサポートされています。詳細は、TSConfig リファレンス を参照してください。

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

isolatedModules

Parcel は各ファイルを個別に処理するため、暗黙的に isolatedModules オプションが有効になります。これは、コンパイルにファイル間の型情報が必要な const enum など、一部の TypeScript 機能が動作しないことを意味します。IDE と型チェック中にこれらの機能の使用について警告を受けるには、tsconfig.json でこのオプションを有効にする必要があります。

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

TSC

TSC は、Microsoft 製の公式 TypeScript コンパイラです。TypeScript 用の Parcel のデフォルトのトランスパイラは TSC よりもはるかに高速ですが、Parcel がサポートしていない tsconfig.json の設定を使用している場合は、TSC を使用する必要がある場合があります。このような場合は、@parcel/transformer-typescript-tsc プラグインを .parcelrc に追加して使用できます。

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

TSC を使用する場合でも、Parcel は引き続き各 TypeScript ファイルを個別に処理するため、isolatedModules に関する注意は引き続き適用されます。さらに、paths などの一部の解決機能は、現在 Parcel ではサポートされていません。TSC トランスフォーマーは、型チェックも実行しません（下記参照）。

Babel

Babel を使用して TypeScript をコンパイルすることもできます。@babel/preset-typescript を含む Babel 設定が見つかった場合、Parcel はそれを使用して .ts および .tsx ファイルをコンパイルします。これは、上記の分離モジュールに関する注意事項と同じです。詳細は、JavaScript ドキュメントの Babel を参照してください。

解決

Parcel は現在、TypeScript 固有の解決拡張である tsconfig.json の baseUrl または paths オプションをサポートしていません。代わりに、Parcel の チルダ または 絶対 指定子を使用して同様の目標を達成できる場合があります。TypeScript がこれらをサポートするように設定する方法については、依存関係解決ドキュメントの 他のツールの設定 を参照してください。

型定義の生成

ライブラリをビルドする場合、Parcel はエントリポイントから型を抽出して .d.ts ファイルを生成できます。これを有効にするには、package.json の types フィールドを main や module などのターゲットと一緒に使用します。

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

詳細は、Parcel でライブラリをビルドする を参照してください。

型チェック

デフォルトでは、Parcel は型チェックを実行しません。型チェックを行うための推奨される方法は、TypeScript をサポートするエディター（VSCode など）を使用し、CI で tsc を使用してコードの型チェックを行うことです。ビルド、テスト、リンティングと並行して実行するように npm スクリプトを使用してこれを設定できます。

{
  "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  
  }
}