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。在这些情况下，您可以通过在 .parcelrc 中添加 @parcel/transformer-typescript-tsc 插件来使用它。

{
  "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 目前不支持 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
  }
}