Use TypeScript#

Rsbuild supports TypeScript by default, allowing you to directly use .ts and .tsx files in your projects.

TypeScript Transpilation#

Rsbuild uses SWC by default for transpiling TypeScript code, and it also supports switching to Babel for transpilation.

isolatedModules#

Unlike the native TypeScript compiler, tools like SWC and Babel compile each file separately and cannot determine whether an imported name is a type or a value. Therefore, when using TypeScript in Rsbuild, you need to enable the isolatedModules option in your tsconfig.json file:

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

This option can help you avoid using certain syntax that cannot be correctly compiled by SWC and Babel, such as cross-file type references. It will guide you to correct the corresponding usage:

// Wrong
export { SomeType } from './types';

// Correct
export type { SomeType } from './types';

See SWC - Migrating from tsc for more details about the differences between SWC and tsc.

Preset types#

@rsbuild/core provides some preset type definitions, including CSS Modules, static assets, import.meta and other types.

You can create a src/env.d.ts file to reference it:

/// <reference types="@rsbuild/core/types" />

Type Checking#

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

Rsbuild provides the Type Check plugin, which runs TypeScript type checking in a separate process. The plugin internally integrates ts-checker-rspack-plugin.

Please refer to the @rsbuild/plugin-type-check for usage instructions.

tsconfig.json Path#

Rsbuild by default reads the tsconfig.json file from the root directory. You can use the source.tsconfigPath to configure a custom tsconfig.json file path.

export default {
  source: {
    tsconfigPath: './tsconfig.custom.json',
  },
};

Path Extensions#

When importing another module in a TypeScript module, TypeScript allows using the .js file extension:

// The actual referenced module could be `./some-module.ts` or `./some-module.tsx`
import { someFn } from './some-module.js';

Rsbuild supports this feature through Rspack's extensionAlias configuration. In TypeScript projects, Rsbuild adds the following configuration by default:

const rspackConfig = {
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.tsx', '.js'],
      '.jsx': ['.tsx', '.jsx'],
    },
  },
};

This means:

• You can use the .js extension to import .ts or .tsx files.
• You can use the .jsx extension to import .tsx files.