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 是来自微软的官方 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 文件。使用 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  
  }
}