TypeScript

TypeScript 是 JavaScript 的类型化超集，可编译为 JavaScript。Parcel 开箱即用地支持 TypeScript，无需任何额外配置。

¥TypeScript is a typed superset of JavaScript that compiles to JavaScript. Parcel supports TypeScript out of the box without any additional configuration.

转译

¥Transpilation

每当你使用 .ts 或 .tsx 文件时，Parcel 都会自动转译 TypeScript。除了剥离类型以将 TypeScript 转换为 JavaScript 之外，Parcel 还根据需要编译现代语言功能，例如类和异步等待，根据你的浏览器目标。它还会自动转译 JSX。有关更多详细信息，请参阅 JavaScript 文档的 转译 部分。

¥Parcel automatically transpiles TypeScript whenever you use a .ts or .tsx file. In addition to stripping the types to convert TypeScript to JavaScript, Parcel also compiles modern language features like classes and async await as necessary, according to your browser targets. It also transpiles JSX automatically. See the Transpilation section of the JavaScript docs for more details.

tsconfig.json 文件可用于配置转译的某些方面。目前，支持 JSX 选项以及 experimentalDecorators 和 useDefineForClassFields 选项。详细信息请参见 TS 配置参考。

¥A tsconfig.json file can be used to configure some aspects of the transpilation. Currently, JSX options are supported, as well as the experimentalDecorators and useDefineForClassFields options. See the TSConfig reference for details.

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

isolatedModules

由于 Parcel 单独处理每个文件，因此它隐式启用 isolatedModules 选项。这意味着一些需要跨文件类型信息进行编译的 TypeScript 功能（例如 const enum）将无法工作。要在 IDE 中和类型检查期间收到关于这些功能的使用的警告，你应该在 tsconfig.json 中启用此选项。

¥Because Parcel processes each file individually, it implicitly enables the isolatedModules option. This means that some TypeScript features like const enum that require cross-file type information to compile will not work. To be warned about usages of these features in your IDE and during type checking, you should enable this option in your tsconfig.json.

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

TSC

TSC 是 Microsoft 的官方 TypeScript 编译器。虽然 Parcel 的默认 TypeScript 转译器比 TSC 快得多，但如果你在 tsconfig.json 中使用 Parcel 不支持的某些配置，则可能需要使用 TSC。在这些情况下，你可以通过将 @parcel/transformer-typescript-tsc 插件添加到 .parcelrc 来使用它。

¥TSC is the official TypeScript compiler from Microsoft. While Parcel’s default transpiler for TypeScript is much faster than TSC, you may need to use TSC if you are using some configuration in tsconfig.json that Parcel doesn't support. In these cases, you can use the @parcel/transformer-typescript-tsc plugin by adding it to your .parcelrc.

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

即使使用 TSC，Parcel 仍然单独处理每个 TypeScript 文件，因此有关 isolatedModules 的注释仍然适用。此外，Parcel 目前不支持某些解析功能，例如 paths。TSC 转换器也不执行任何类型检查 (见下文)。

¥Even when using TSC, Parcel still processes each TypeScript file individually, so the note about isolatedModules still applies. In addition, some resolution features such as paths are not currently supported by Parcel. The TSC transformer also does not perform any type checking (see below).

Babel

你还可以选择使用 Babel 来编译 TypeScript。如果找到包含 @babel/preset-typescript 的 Babel 配置，Parcel 将使用它来编译 .ts 和 .tsx 文件。请注意，这与上面关于隔离模块的 caveats 相同。有关更多详细信息，请参阅 JavaScript 文档中的 Babel。

¥You can also choose to use Babel to compile TypeScript. If a Babel config containing @babel/preset-typescript is found, Parcel will use it to compile .ts and .tsx files. Note that this has the same caveats about isolated modules as above. See Babel in the JavaScript docs for more details.

解决

¥Resolution

Parcel 目前不支持 tsconfig.json 中的 baseUrl 或 paths 选项，它们是 TypeScript 特定的解析扩展。相反，你可以使用 Parcel 的 tilde 或 absolute 说明符来实现类似的目标。有关如何配置 TypeScript 以支持这些的信息，请参阅依赖解析文档中的 配置其他工具。

¥Parcel does not currently support the baseUrl or paths options in tsconfig.json, which are TypeScript specific resolution extensions. Instead, you may be able to use Parcel's tilde or absolute specifiers to accomplish a similar goal. See Configuring other tools in the dependency resolution docs for information about how to configure TypeScript to support these.

生成类型

¥Generating typings

构建库时，Parcel 可以从入口点提取类型并生成 .d.ts 文件。使用 package.json 中的 types 字段以及 main 或 module 等目标来启用此功能。

¥When building a library, Parcel can extract the types from your entry point and generate a .d.ts file. Use the types field in package.json alongside a target such as main or module to enable this.

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

详细信息请参见 使用 Parcel 构建库。

¥See Building a library with Parcel for more details.

类型检查

¥Type checking

默认情况下，Parcel 不执行任何类型检查。推荐的类型检查方法是使用支持 TypeScript 的编辑器（例如 VSCode），并使用 tsc 在 CI 中对代码进行类型检查。你可以使用 npm 脚本对其进行配置，以便与构建、测试和 linting 一起运行。

¥By default, Parcel does not perform any type checking. The recommended way to type check is by using an editor with TypeScript support (such as VSCode), and using tsc to type check your code in CI. You can configure this using npm scripts to run alongside your build, tests, and linting.

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

实验验证器插件

¥Experimental validator plugin

@parcel/validator-typescript 插件是一种在 Parcel 构建中进行类型检查的实验性方法。生成打包包后，它在后台运行。确保 tsconfig.json 中的 include 选项包含所有源文件。

¥The @parcel/validator-typescript plugin is an experimental way to type check within your Parcel build. It runs in the background after bundles are generated. Make sure the include option in tsconfig.json includes all of your source files.

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

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