Skip to content

docs: add more chapters of TypeScript related #1048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 10, 2025
Merged
Show file tree
Hide file tree
Changes from 3 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
2 changes: 1 addition & 1 deletion website/docs/en/config/rsbuild/resolve.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Options for module resolution.

## resolve.aliasStrategy <RsbuildDocBadge path="/config/resolve/alias-strategy" text="resolve.aliasStrategy" />

Control the priority between the `paths` option in `tsconfig.json` and the `resolve.alias` option of Rsbuild.
Control the priority between the `resolve.alias` option and the `paths` option in `tsconfig.json`.

## resolve.alias <RsbuildDocBadge path="/config/resolve/alias" text="resolve.alias" />

Expand Down
8 changes: 7 additions & 1 deletion website/docs/en/config/rsbuild/source.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,10 @@ Transform the import path, which can be used to modularly import the subpath of

## source.tsconfigPath <RsbuildDocBadge path="/config/source/tsconfig-path" text="source.tsconfigPath" />

Configure a custom tsconfig.json file path to use, can be a relative or absolute path.
Configure a custom `tsconfig.json` file path to use, can be a relative or absolute path.

The `tsconfig.json` configuration file affects the following behavior of Rslib:

- The `paths` field is used to configure [Path alias](/config/rsbuild/resolve#resolvealias).
- The `experimentalDecorators` field is used to configure [Decorators version](/config/rsbuild/source#sourcedecorators).
- Used to configure the effective scope, rules, and output directory during [TypeScript declaration file generation](/config/lib/dts).
14 changes: 14 additions & 0 deletions website/docs/en/guide/basic/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@ You can create a `src/env.d.ts` file to reference it:
/// <reference types="@rslib/core/types" />
```

## Type checking

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

Rslib provides the [lib.dts](/config/lib/dts) configuration item for generating TypeScript declaration files, and type checking is performed by default during the generation process.

You can skip type checking by setting the [noCheck](https://www.typescriptlang.org/tsconfig/#noCheck) configuration item to `true` in the `tsconfig.json` file.

## tsconfig.json path

Rslib by default reads the `tsconfig.json` file from the root directory. You can use [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath) to configure a custom `tsconfig.json` file path.
Expand All @@ -54,3 +62,9 @@ export default {
},
};
```

## Decorators version

By default, Rslib uses the [`2022-03`](https://rsbuild.rs/config/source/decorators) version of the decorators.

If [experimentalDecorators](https://www.typescriptlang.org/tsconfig/#experimentalDecorators) is enabled in `tsconfig.json`, Rslib will set [source.decorators.version](/config/rsbuild/source#sourcedecorators) to `legacy` to use the legacy decorators.
67 changes: 67 additions & 0 deletions website/docs/en/guide/faq/features.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,73 @@ export default {

## Declaration files generation

### How to avoid generating declaration files for certain files?

As shown below, Rslib ignores the files under the `src/tests` directory when emitting JavaScript outputs, but these files still generate corresponding declaration files.

```ts title="rslib.config.ts"
export default {
lib: [
source: {
entry: {
index: ['src/**/*', '!src/tests/**/*'],
}
}
],
};
```

The entry set by [source.entry](/config/lib/bundle#bundle-false) can exclude some files that do not generate corresponding JavaScript outputs, but cannot exclude the generation of corresponding declaration files. This needs to be achieved by setting [include](https://www.typescriptlang.org/tsconfig/#include) and [exclude](https://www.typescriptlang.org/tsconfig/#exclude) in `tsconfig.json`, as shown below:

```json title="tsconfig.json"
{
"compilerOptions": {
// ...
},
"include": ["src/**/*"],
"exclude": ["src/tests/**/*"]
}
```

If you want to keep type prompts and checking for these files, but do not generate corresponding declaration files, you can inherit a basic `tsconfig.json` by [extends](https://www.typescriptlang.org/tsconfig/#extends) and then override the `include` and `exclude` options as follows:

```json title="tsconfig.json"
{
"compilerOptions": {
// ...
},
"include": ["src/**/*", "rslib.config.ts"]
}
```

```json title="tsconfig.build.json"
{
"extends": "./tsconfig.json",
"compilerOptions": {
// ...
},
"include": ["src/**/*"],
"exclude": ["src/tests/**/*"]
}
```

The newly added `tsconfig.build.json` needs to be configured in the [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath) option in `rslib.config.ts`:

```ts title="rslib.config.ts"
export default {
lib: [
source: {
entry: {
index: ['src/**/*', '!src/tests/**/*'],
}
}
],
source: {
tsconfigPath: 'tsconfig.build.json',
},
};
```

### How to additionally exclude specified dependencies when `dts.bundle` is `true`?

Rslib uses [rsbuild-plugin-dts](https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md) to generate declaration files, which supports configuration via [output.externals](/config/rsbuild/output#outputtarget) for excluding certain dependencies from bundled declaration files.
Expand Down
2 changes: 1 addition & 1 deletion website/docs/zh/config/rsbuild/resolve.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge';

## resolve.aliasStrategy <RsbuildDocBadge path="/config/resolve/alias-strategy" text="resolve.aliasStrategy" />

控制 `tsconfig.json` 中的 `paths` 选项与 Rsbuild 中的 `resolve.alias` 选项的优先级。
控制 `resolve.alias` 选项与 `tsconfig.json` 中的 `paths` 选项的优先级。

## resolve.alias <RsbuildDocBadge path="/config/resolve/alias" text="resolve.alias" />

Expand Down
8 changes: 7 additions & 1 deletion website/docs/zh/config/rsbuild/source.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,10 @@ const defaultEntry = {

## source.tsconfigPath <RsbuildDocBadge path="/config/source/tsconfig-path" text="source.tsconfigPath" />

配置自定义的 tsconfig.json 文件路径,可以是相对路径或绝对路径。
配置自定义的 `tsconfig.json` 文件路径,可以是相对路径或绝对路径。

`tsconfig.json` 配置文件影响 Rslib 的以下行为:

- `paths` 字段用于配置 [路径别名](/config/rsbuild/resolve#resolvealias)。
- `experimentalDecorators` 字段用于配置 [装饰器语法](/config/rsbuild/source#sourcedecorators)。
- 用于配置 [TypeScript 声明文件生成](/config/lib/dts) 时的生效范围、规则以及输出目录。
14 changes: 14 additions & 0 deletions website/docs/zh/guide/basic/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@ export type { SomeType } from './types';
/// <reference types="@rslib/core/types" />
```

## 类型检查

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

Rslib 提供了 [lib.dts](/config/lib/dts) 配置项用于生成 TypeScript 声明文件,生成过程中默认会进行类型检查。

你可以在 `tsconfig.json` 文件中将 [noCheck](https://www.typescriptlang.org/tsconfig/#noCheck) 配置项设置为 `true` 来跳过类型检查。

## tsconfig.json 路径

Rslib 默认从根目录下读取 `tsconfig.json` 文件。你可以使用 [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath) 配置一个自定义的 `tsconfig.json` 文件路径。
Expand All @@ -54,3 +62,9 @@ export default {
},
};
```

## 装饰器版本

默认情况下,Rslib 会使用 [`2022-03`](https://rsbuild.rs/zh/config/source/decorators) 版本的装饰器。

如果在 `tsconfig.json` 中启用了 [experimentalDecorators](https://www.typescriptlang.org/tsconfig/#experimentalDecorators),Rslib 会默认将 [source.decorators.version](/config/rsbuild/source#sourcedecorators) 设置为 `legacy` 来使用旧版本装饰器。
67 changes: 67 additions & 0 deletions website/docs/zh/guide/faq/features.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,73 @@ export default {

## 类型声明文件生成

### 如何避免生成某些文件的类型声明文件?

如下所示,Rslib 在构建 JavaScript 产物时忽略了 `src/tests` 目录下的文件,但这些文件仍然会生成对应的类型声明文件。

```ts title="rslib.config.ts"
export default {
lib: [
source: {
entry: {
index: ['src/**/*', '!src/tests/**/*'],
}
}
],
};
```

[source.entry](/config/lib/bundle#bundle-false) 设置的入口可以排除一些文件不生成对应的 JavaScript 产物,但无法排除生成对应的类型声明文件,这需要通过在 `tsconfig.json` 中设置 [include](https://www.typescriptlang.org/tsconfig/#include) 和 [exclude](https://www.typescriptlang.org/tsconfig/#exclude) 来实现,如下所示:

```json title="tsconfig.json"
{
"compilerOptions": {
// ...
},
"include": ["src/**/*"],
"exclude": ["src/tests/**/*"]
}
```

如果你想保留对这些文件的类型提示与检查,但不生成对应的类型声明文件,可以通过 [extends](https://www.typescriptlang.org/tsconfig/#extends) 来继承一个基础的 `tsconfig.json`,然后覆盖 `include` 和 `exclude` 选项,如下所示:

```json title="tsconfig.json"
{
"compilerOptions": {
// ...
},
"include": ["src/**/*", "rslib.config.ts"]
}
```

```json title="tsconfig.build.json"
{
"extends": "./tsconfig.json",
"compilerOptions": {
// ...
},
"include": ["src/**/*"],
"exclude": ["src/tests/**/*"]
}
```

新增的 `tsconfig.build.json` 需要配置在 `rslib.config.ts` 中的 [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath) 选项中:

```ts title="rslib.config.ts"
export default {
lib: [
source: {
entry: {
index: ['src/**/*', '!src/tests/**/*'],
}
}
],
source: {
tsconfigPath: 'tsconfig.build.json',
},
};
```

### 如何在 `dts.bundle` 为 `true` 时额外排除指定的依赖?

Rslib 通过 [rsbuild-plugin-dts](https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md) 完成对类型声明文件的生成,该插件支持通过 [output.externals](/config/rsbuild/output#outputtarget) 进行配置,用于从打包后的类型声明文件中排除指定的依赖。
Expand Down
2 changes: 1 addition & 1 deletion website/rspress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export default defineConfig({
dev: {
lazyCompilation: true,
},
source: {
resolve: {
alias: {
'@components': path.join(__dirname, '@components'),
'@en': path.join(__dirname, 'docs/en'),
Expand Down
Loading