\n\n\n\n## Introduction\n\nThis plugin internally integrates with [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin).\n\nThe type checking logic of `ts-checker-rspack-plugin` is similar to the native `tsc` command of TypeScript. It automatically reads the configuration options from `tsconfig.json` and can also be modified via the configuration options provided by the Type Check plugin.\n\nThe behavior of the plugin differs in the development and production builds:\n\n- In development mode, type errors do not block the build process. They are only logged in the terminal.\n- In production mode, type errors cause the build to fail in order to ensure the stability of the production code.\n\n## Usage\n\nInstall:\n\n```bash\nnpm add @rsbuild/plugin-type-check -D\n```\n\nAdd plugin to your `rsbuild.config.ts`:\n\n```ts\n// rsbuild.config.ts\nimport { pluginTypeCheck } from \"@rsbuild/plugin-type-check\";\n\nexport default {\n plugins: [pluginTypeCheck()],\n};\n```\n\n### Configuring tsconfig.json\n\nThe Type Check plugin by default performs checks based on the `tsconfig.json` file in the root directory of the current project. Below is an example of a `tsconfig.json` file, which you can also adjust according to the needs of your project.\n\n```json title=\"tsconfig.json\"\n{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"lib\": [\"DOM\", \"ES2020\"],\n \"module\": \"ESNext\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"isolatedModules\": true,\n \"resolveJsonModule\": true,\n \"moduleResolution\": \"bundler\"\n },\n \"include\": [\"src\"]\n}\n```\n\nPlease note that the fields in `tsconfig.json` will not affect the compilation behavior and output of Rsbuild, but will only affect the results of type checking.\n\n## Options\n\n### enable\n\nWhether to enable TypeScript type checking.\n\n- **Type:** `boolean`\n- **Default:** `true`\n- **Example:**\n\nDisable TypeScript type checking:\n\n```js\npluginTypeCheck({\n enable: false,\n});\n```\n\nEnable type checking only in production mode:\n\n```js\npluginTypeCheck({\n enable: process.env.NODE_ENV === \"production\",\n});\n```\n\nEnable type checking only in development mode (it is not recommended to disable type checking in production mode, as it may reduce the stability of the production code):\n\n```js\npluginTypeCheck({\n enable: process.env.NODE_ENV === \"development\",\n});\n```\n\n### tsCheckerOptions\n\nModify the options of `ts-checker-rspack-plugin`, please refer to [ts-checker-rspack-plugin - README](https://github.com/rspack-contrib/ts-checker-rspack-plugin#readme) to learn about available options.\n\n- **Type:** `Object | Function`\n- **Default:**\n\n```ts\nconst defaultOptions = {\n typescript: {\n // set 'readonly' to avoid emitting tsbuildinfo,\n // as the generated tsbuildinfo will break ts-checker-rspack-plugin\n mode: \"readonly\",\n // enable build when using project reference\n build: useReference,\n // avoid OOM issue\n memoryLimit: 8192,\n // use tsconfig of user project\n configFile: tsconfigPath,\n // use typescript of user project\n typescriptPath: require.resolve(\"typescript\"),\n },\n issue: {\n // ignore types errors from node_modules\n exclude: [({ file = \"\" }) => /[\\\\/]node_modules[\\\\/]/.test(file)],\n },\n logger: {\n log() {\n // do nothing\n // we only want to display error messages\n },\n error(message: string) {\n console.error(message.replace(/ERROR/g, \"Type Error\"));\n },\n },\n};\n```\n\n#### Object Type\n\nWhen the value of `tsCheckerOptions` is an object, it will be deeply merged with the default configuration.\n\n```ts\npluginTypeCheck({\n tsCheckerOptions: {\n issue: {\n exclude: [({ file = \"\" }) => /[\\\\/]some-folder[\\\\/]/.test(file)],\n },\n },\n});\n```\n\n#### Function Type\n\nWhen the value of `tsCheckerOptions` is a function, the default configuration will be passed as the first argument. You can directly modify the configuration object or return an object as the final configuration.\n\n```ts\npluginTypeCheck({\n tsCheckerOptions(options) {\n options.async = false;\n return options;\n },\n});\n```\n\n#### exclude Example\n\nThe `exclude` option can filter based on the `code`, `message`, or `file` from TS errors.\n\nFor example, the type mismatch error can be excluded using `code: 'TS2345'`:\n\n```ts\npluginTypeCheck({\n tsCheckerOptions: {\n issue: {\n // Ignore \"Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)\"\n exclude: [{ code: \"TS2345\" }],\n },\n },\n});\n```\n\nOr exclude files under `/some-folder/` using `file`:\n\n```ts\npluginTypeCheck({\n tsCheckerOptions: {\n issue: {\n exclude: [({ file = \"\" }) => /[\\\\/]some-folder[\\\\/]/.test(file)],\n },\n },\n});\n```\n\n#### Disable type errors from the error overlay\n\nBy default, type errors will be reported to Dev Server and displayed in the Rsbuild error overlay in development mode.\n\nIf you don't want type errors to be displayed in the error overlay, you can disable it by setting `devServer: false`:\n\n```ts\npluginTypeCheck({\n tsCheckerOptions: {\n async: true,\n devServer: false,\n },\n});\n```\n## Notes\n\n- If you have enabled `ts-loader` in your project and manually configured `compileOnly: false`, please disable the Type Check plugin to avoid duplicate type checking.\n- Some errors will be displayed as warnings in IDEs such as VS Code, but they will still be displayed as errors in the `ts-checker-rspack-plugin` check. For details, please refer to: [Why are some errors reported as warnings?](https://code.visualstudio.com/docs/typescript/typescript-compiling#_why-are-some-errors-reported-as-warnings).\n\n## Performance Optimization\n\nType checking has a significant performance overhead. You can refer to the [Performance Guide](https://github.com/microsoft/TypeScript/wiki/Performance) in the official TypeScript documentation for performance optimization.\n\nFor example, properly configuring the `include` and `exclude` scopes in `tsconfig.json` can significantly reduce unnecessary type checking and improve TypeScript performance:\n\n```json title=\"tsconfig.json\"\n{\n \"include\": [\"src\"],\n \"exclude\": [\"**/node_modules\", \"**/.*/\"]\n}\n```\n\n## Vue Components\n\nTo enable typecheck in `.vue` files, use the custom TypeScript wrapper [`@esctn/vue-tsc-api`](https://www.npmjs.com/package/@esctn/vue-tsc-api). It works on top of [`vue-tsc`](https://www.npmjs.com/package/vue-tsc) — a popular CLI tool for type-checking Vue 3 code.\n\n```bash\nnpm add @esctn/vue-tsc-api -D\n```\n\n```js\npluginTypeCheck({\n tsCheckerOptions: {\n typescript: {\n typescriptPath: '@esctn/vue-tsc-api'\n }\n },\n});\n```\n\n## License\n\n[MIT](./LICENSE).\n","_attachments":{},"homepage":"https://github.com/rspack-contrib/rsbuild-plugin-type-check#readme","bugs":{"url":"https://github.com/rspack-contrib/rsbuild-plugin-type-check/issues"},"license":"MIT"}
![\"npm](\"https://img.shields.io/npm/v/@rsbuild/plugin-type-check?style=flat-square&colorA=564341&colorB=EDED91\")
\n \n ![\"license\"](\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91\"){kind=icon}
\n ![\"downloads\"](\"https://img.shields.io/npm/dm/@rsbuild/plugin-type-check.svg?style=flat-square&colorA=564341&colorB=EDED91\")
\n