Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 37 additions & 2 deletions website/docs/en/guide/basic/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,44 @@ Create a `src/env.d.ts` file to reference these types:

When transpiling TypeScript code using tools like SWC and Babel, type checking is not performed.

To enable type checking, use the plugin [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check). It runs TypeScript type checking in a separate process and uses [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin) under the hood.
### Type check plugin

Please refer to the [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) for usage instructions.
To enable type checking, you can use the [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) plugin. This plugin runs TypeScript type checking in a separate process and internally integrates [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin).

The plugin supports type checking in both dev and build modes, helping you catch type errors early during development.

Refer to [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) for usage instructions.

### Using tsc

You can also use [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) directly for type checking by adding a `type-check` step to your `build` script. This approach only performs type checking after the build and does not run during dev mode.

```json title="package.json"
{
"scripts": {
"build": "rsbuild build && npm run type-check",
"type-check": "tsc --noEmit"
},
"devDependencies": {
"typescript": "^5.0.0"
}
}
```

For Vue applications, use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) instead of `tsc`. It supports Vue SFCs in addition to TypeScript files.

```json title="package.json"
{
"scripts": {
"build": "rsbuild build && npm run type-check",
"type-check": "vue-tsc --noEmit"
},
"devDependencies": {
"typescript": "^5.0.0",
"vue-tsc": "^3.0.0"
}
}
```

## tsconfig.json Path

Expand Down
37 changes: 36 additions & 1 deletion website/docs/zh/guide/basic/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,45 @@ export type { SomeType } from './types';

在进行 TypeScript 转译时,SWC 和 Babel 等工具不会执行类型检查。

要启用类型检查,请使用 [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) 插件。该插件会在单独的进程中运行 TypeScript 类型检查,并在内部集成了 [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin)。
### 类型检查插件

要启用类型检查,可以使用 [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) 插件。该插件会在单独的进程中运行 TypeScript 类型检查,并在内部集成了 [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin)。

该插件支持在开发模式和构建模式下进行类型检查,帮助你在开发过程中及时发现类型错误。

请参考 [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) 了解用法。

### 使用 tsc

你也可以直接使用 [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) 来进行类型检查,在 `build` 脚本中添加 `type-check` 步骤即可。这种方式仅在构建完成后执行类型检查,在开发模式下不会执行。

```json title="package.json"
{
"scripts": {
"build": "rsbuild build && npm run type-check",
"type-check": "tsc --noEmit"
},
"devDependencies": {
"typescript": "^5.0.0"
}
}
```

对于 Vue 应用,使用 [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) 代替 `tsc`,它除了支持 TypeScript 文件外,还支持 Vue 单文件组件(SFC)。

```json title="package.json"
{
"scripts": {
"build": "rsbuild build && npm run type-check",
"type-check": "vue-tsc --noEmit"
},
"devDependencies": {
"typescript": "^5.0.0",
"vue-tsc": "^3.0.0"
}
}
```

## tsconfig.json 路径

Rsbuild 默认读取根目录的 `tsconfig.json` 文件,你可以使用 [source.tsconfigPath](/config/source/tsconfig-path) 配置自定义的 tsconfig.json 文件路径。
Expand Down
Loading