Skip to content

Commit c952080

Browse files
docs: add more chapters of TypeScript related (#1048)
Co-authored-by: Wei <[email protected]>
1 parent f966dc1 commit c952080

File tree

9 files changed

+179
-5
lines changed

9 files changed

+179
-5
lines changed

website/docs/en/config/rsbuild/resolve.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Options for module resolution.
66

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

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

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

website/docs/en/config/rsbuild/source.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,10 @@ Transform the import path, which can be used to modularly import the subpath of
7575

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

78-
Configure a custom tsconfig.json file path to use, can be a relative or absolute path.
78+
Configure a custom `tsconfig.json` file path to use, can be a relative or absolute path.
79+
80+
The `tsconfig.json` configuration file affects the following behavior of Rslib:
81+
82+
- The `paths` field is used to configure [Path alias](/config/rsbuild/resolve#resolvealias).
83+
- The `experimentalDecorators` field is used to configure [Decorators version](/config/rsbuild/source#sourcedecorators).
84+
- Used to configure the effective scope, rules, and output directory during [TypeScript declaration file generation](/config/lib/dts).

website/docs/en/guide/basic/typescript.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,14 @@ You can create a `src/env.d.ts` file to reference it:
4040
/// <reference types="@rslib/core/types" />
4141
```
4242

43+
## Type checking
44+
45+
When transpiling TypeScript code using tools like SWC and Babel, type checking is not performed.
46+
47+
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.
48+
49+
You can skip type checking by setting the [noCheck](https://www.typescriptlang.org/tsconfig/#noCheck) configuration item to `true` in the `tsconfig.json` file.
50+
4351
## tsconfig.json path
4452

4553
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.
@@ -54,3 +62,9 @@ export default {
5462
},
5563
};
5664
```
65+
66+
## Decorators version
67+
68+
By default, Rslib uses the [`2022-03`](https://rsbuild.rs/config/source/decorators#2022-03) version of the decorators.
69+
70+
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.

website/docs/en/guide/faq/features.mdx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,73 @@ export default {
9595

9696
## Declaration files generation
9797

98+
### How to avoid generating declaration files for certain files?
99+
100+
As shown below, Rslib ignores the files under the `src/tests` directory when emitting JavaScript outputs, but these files still generate corresponding declaration files.
101+
102+
```ts title="rslib.config.ts"
103+
export default {
104+
lib: [
105+
source: {
106+
entry: {
107+
index: ['src/**/*', '!src/tests/**/*'],
108+
}
109+
}
110+
],
111+
};
112+
```
113+
114+
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:
115+
116+
```json title="tsconfig.json"
117+
{
118+
"compilerOptions": {
119+
// ...
120+
},
121+
"include": ["src/**/*"],
122+
"exclude": ["src/tests/**/*"]
123+
}
124+
```
125+
126+
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:
127+
128+
```json title="tsconfig.json"
129+
{
130+
"compilerOptions": {
131+
// ...
132+
},
133+
"include": ["src/**/*", "rslib.config.ts"]
134+
}
135+
```
136+
137+
```json title="tsconfig.build.json"
138+
{
139+
"extends": "./tsconfig.json",
140+
"compilerOptions": {
141+
// ...
142+
},
143+
"include": ["src/**/*"],
144+
"exclude": ["src/tests/**/*"]
145+
}
146+
```
147+
148+
The newly added `tsconfig.build.json` needs to be configured in the [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath) option in `rslib.config.ts`:
149+
150+
```ts title="rslib.config.ts"
151+
export default {
152+
lib: [
153+
source: {
154+
entry: {
155+
index: ['src/**/*', '!src/tests/**/*'],
156+
}
157+
}
158+
],
159+
source: {
160+
tsconfigPath: 'tsconfig.build.json',
161+
},
162+
};
163+
```
164+
98165
### How to additionally exclude specified dependencies when `dts.bundle` is `true`?
99166

100167
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.

website/docs/zh/config/rsbuild/resolve.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
66

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

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

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

website/docs/zh/config/rsbuild/source.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,10 @@ const defaultEntry = {
7070

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

73-
配置自定义的 tsconfig.json 文件路径,可以是相对路径或绝对路径。
73+
配置自定义的 `tsconfig.json` 文件路径,可以是相对路径或绝对路径。
74+
75+
`tsconfig.json` 配置文件影响 Rslib 的以下行为:
76+
77+
- `paths` 字段用于配置 [路径别名](/config/rsbuild/resolve#resolvealias)
78+
- `experimentalDecorators` 字段用于配置 [装饰器语法](/config/rsbuild/source#sourcedecorators)
79+
- 用于配置 [TypeScript 声明文件生成](/config/lib/dts) 时的生效范围、规则以及输出目录。

website/docs/zh/guide/basic/typescript.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,14 @@ export type { SomeType } from './types';
4040
/// <reference types="@rslib/core/types" />
4141
```
4242

43+
## 类型检查
44+
45+
在进行 TypeScript 转译时,SWC 和 Babel 等工具不会执行类型检查。
46+
47+
Rslib 提供了 [lib.dts](/config/lib/dts) 配置项用于生成 TypeScript 声明文件,生成过程中默认会进行类型检查。
48+
49+
你可以在 `tsconfig.json` 文件中将 [noCheck](https://www.typescriptlang.org/tsconfig/#noCheck) 配置项设置为 `true` 来跳过类型检查。
50+
4351
## tsconfig.json 路径
4452

4553
Rslib 默认从根目录下读取 `tsconfig.json` 文件。你可以使用 [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath) 配置一个自定义的 `tsconfig.json` 文件路径。
@@ -54,3 +62,9 @@ export default {
5462
},
5563
};
5664
```
65+
66+
## 装饰器版本
67+
68+
默认情况下,Rslib 会使用 [`2022-03`](https://rsbuild.rs/zh/config/source/decorators#2022-03) 版本的装饰器。
69+
70+
如果在 `tsconfig.json` 中启用了 [experimentalDecorators](https://www.typescriptlang.org/tsconfig/#experimentalDecorators),Rslib 会默认将 [source.decorators.version](/config/rsbuild/source#sourcedecorators) 设置为 `legacy` 来使用旧版本装饰器。

website/docs/zh/guide/faq/features.mdx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,73 @@ export default {
9595

9696
## 类型声明文件生成
9797

98+
### 如何避免生成某些文件的类型声明文件?
99+
100+
如下所示,Rslib 在构建 JavaScript 产物时忽略了 `src/tests` 目录下的文件,但这些文件仍然会生成对应的类型声明文件。
101+
102+
```ts title="rslib.config.ts"
103+
export default {
104+
lib: [
105+
source: {
106+
entry: {
107+
index: ['src/**/*', '!src/tests/**/*'],
108+
}
109+
}
110+
],
111+
};
112+
```
113+
114+
[source.entry](/config/lib/bundle#bundle-false) 设置的入口可以排除一些文件不生成对应的 JavaScript 产物,但无法排除生成对应的类型声明文件,这需要通过在 `tsconfig.json` 中设置 [include](https://www.typescriptlang.org/tsconfig/#include)[exclude](https://www.typescriptlang.org/tsconfig/#exclude) 来实现,如下所示:
115+
116+
```json title="tsconfig.json"
117+
{
118+
"compilerOptions": {
119+
// ...
120+
},
121+
"include": ["src/**/*"],
122+
"exclude": ["src/tests/**/*"]
123+
}
124+
```
125+
126+
如果你想保留对这些文件的类型提示与检查,但不生成对应的类型声明文件,可以通过 [extends](https://www.typescriptlang.org/tsconfig/#extends) 来继承一个基础的 `tsconfig.json`,然后覆盖 `include``exclude` 选项,如下所示:
127+
128+
```json title="tsconfig.json"
129+
{
130+
"compilerOptions": {
131+
// ...
132+
},
133+
"include": ["src/**/*", "rslib.config.ts"]
134+
}
135+
```
136+
137+
```json title="tsconfig.build.json"
138+
{
139+
"extends": "./tsconfig.json",
140+
"compilerOptions": {
141+
// ...
142+
},
143+
"include": ["src/**/*"],
144+
"exclude": ["src/tests/**/*"]
145+
}
146+
```
147+
148+
新增的 `tsconfig.build.json` 需要配置在 `rslib.config.ts` 中的 [source.tsconfigPath](/config/rsbuild/source#sourcetsconfigpath) 选项中:
149+
150+
```ts title="rslib.config.ts"
151+
export default {
152+
lib: [
153+
source: {
154+
entry: {
155+
index: ['src/**/*', '!src/tests/**/*'],
156+
}
157+
}
158+
],
159+
source: {
160+
tsconfigPath: 'tsconfig.build.json',
161+
},
162+
};
163+
```
164+
98165
### 如何在 `dts.bundle``true` 时额外排除指定的依赖?
99166

100167
Rslib 通过 [rsbuild-plugin-dts](https://github.com/web-infra-dev/rslib/blob/main/packages/plugin-dts/README.md) 完成对类型声明文件的生成,该插件支持通过 [output.externals](/config/rsbuild/output#outputtarget) 进行配置,用于从打包后的类型声明文件中排除指定的依赖。

website/rspress.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export default defineConfig({
138138
dev: {
139139
lazyCompilation: true,
140140
},
141-
source: {
141+
resolve: {
142142
alias: {
143143
'@components': path.join(__dirname, '@components'),
144144
'@en': path.join(__dirname, 'docs/en'),

0 commit comments

Comments
 (0)