> For AI agents: the complete documentation index is available at https://rspack.rs/llms.txt, the full documentation bundle is available at https://rspack.rs/llms-full.txt.

# TypeScript

## How to use

Enabling TypeScript support can be done through [`builtin:swc-loader`](https://rspack.rs/guide/features/builtin-swc-loader.md).

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|ts)$/,
        exclude: [/node_modules/],
        loader: 'builtin:swc-loader',
        options: {
          detectSyntax: 'auto',
        },
      },
    ],
  },
};
```

## Transpile only

For maximum speed, `builtin:swc-loader` transpiles TypeScript source code without performing any type checking. An external tool such as `tsc` must be used for type checking.

## Enable isolatedModules

`builtin:swc-loader` transpiles each module independently. Enable [`isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) in `tsconfig.json` so TypeScript reports code that cannot be safely transpiled in isolation.

```json title="tsconfig.json"
{
  "compilerOptions": {
    "isolatedModules": true
  }
}
```

## Type checking

You can use the [ts-checker-rspack-plugin](https://github.com/rstackjs/ts-checker-rspack-plugin) to perform TypeScript type checking during compilation. However, it's important to note that TypeScript's type checking can be time-consuming, especially for larger projects. This means that the time required for type checking may exceed the build time of Rspack itself.

If you are using the plugin in development mode, it won't block the build and you can continue with the build process. However, in build mode, the plugin will block the build until the type checking is complete which may lead to longer build times.

Based on your actual needs, you should decide whether to enable this plugin. If the type checking process becomes a bottleneck in your build process, we recommend using TypeScript's incremental build feature. This feature can greatly speed up the type checking process by only analyzing the changed files since the last build.

To enable TypeScript's incremental build, you can use `tsc --incremental` independently or [enabling incremental mode](https://github.com/rstackjs/ts-checker-rspack-plugin#enabling-incremental-mode) in the plugin.

Enabling incremental build can help reduce type checking time, especially when only a few files have been modified. This way, you can optimize your build process without sacrificing the benefits of type checking.

Remember to evaluate the trade-off between build speed and the accuracy of type checking in your specific project, and choose the best approach accordingly.

## JSX and TSX

Enabling TSX|JSX support can be done through [`builtin:swc-loader`](https://rspack.rs/guide/features/builtin-swc-loader.md).

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            detectSyntax: 'auto',
            jsc: {
              transform: {
                react: {
                  pragma: 'React.createElement',
                  pragmaFrag: 'React.Fragment',
                  throwIfNamespace: true,
                  development: false,
                },
              },
            },
          },
        },
      },
    ],
  },
};
```

## Alias

See [resolve.tsConfig](https://rspack.rs/config/resolve.md#resolvetsconfig) for details.

## Client types

It's possible to use the type of Rspack specific features in your TypeScript code, such as [import.meta.glob](https://rspack.rs/api/runtime-api/module-variables.md#importmetaglob).

Rspack provides client module types via `@rspack/core/module`, you can declare them in different ways:

1. Add the TypeScript reference directive to declare:

   Add the following content to the global d.ts declarattion file:

   ```ts title="src/index.ts"
   /// <reference types="@rspack/core/module" />
   ```

   It can then be used in any TypeScript file:

   ```ts title="src/index.ts"
   const modules = import.meta.glob('./dir/*.js'); // without reference declared above, TypeScript will throw an error
   ```

2. You can also add `@rspack/core/module` to the `types` field of tsconfig.json. You could refer to the [tsconfig types document](https://www.typescriptlang.org/tsconfig/#types) for more details.

   ```json title="tsconfig.json"
   {
     "compilerOptions": {
       "types": ["@rspack/core/module"]
     }
   }
   ```