How does Rspack support TypeScript?

Rspack provides native support for TypeScript, allowing developers to handle TypeScript files without additional configuration, greatly simplifying the development process. Here's a detailed explanation of Rspack's TypeScript support:

Native TypeScript Support

Rspack has built-in TypeScript support, which means:

1. No Additional Loader Needed:

   • No need to install ts-loader or other TypeScript loaders
   • Simply import .ts and .tsx files directly
   • Automatically handles TypeScript compilation

2. Type Checking:

   • Supports type checking (optional)
   • Can configure whether to perform type checking
   • Provides type error hints

3. Type Declaration Files:

   • Supports .d.ts type declaration files
   • Automatically resolves type declarations
   • Provides complete type support

Basic Configuration

Minimal Configuration

javascript
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'builtin:swc-loader',
        type: 'javascript/auto'
      }
    ]
  }
}

Complete Configuration

javascript
module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              transform: {
                react: {
                  runtime: 'automatic'
                }
              }
            }
          }
        },
        type: 'javascript/auto'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
}

SWC Loader

Rspack uses the built-in SWC Loader to handle TypeScript. SWC is an ultra-fast TypeScript/JavaScript compiler written in Rust:

SWC Advantages

1. Extremely Fast Compilation Speed:

   • 20-70x faster than Babel
   • 10-30x faster than tsc
   • Significantly improves build speed

2. Complete TypeScript Support:

   • Supports all TypeScript syntax
   • Supports latest ECMAScript features
   • Compatible with TypeScript configuration

3. Low Memory Usage:

   • Uses less memory than Babel
   • Suitable for large projects
   • Better resource utilization

SWC Configuration Options

javascript
{
  loader: 'builtin:swc-loader',
  options: {
    jsc: {
      parser: {
        syntax: 'typescript',
        tsx: true,
        decorators: true,
        dynamicImport: true
      },
      transform: {
        react: {
          runtime: 'automatic',
          importSource: '@emotion/react'
        },
        optimizer: {
          globals: {
            vars: {
              'process.env.NODE_ENV': 'production'
            }
          }
        }
      },
      target: 'es2015',
      loose: false,
      externalHelpers: true
    },
    env: {
      targets: 'defaults',
      coreJs: 3
    },
    sourceMaps: true,
    inlineSourcesContent: true
  }
}

tsconfig.json Integration

Rspack can read and use tsconfig.json configuration:

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Type Checking

Type Checking Configuration

Rspack supports two type checking methods:

1. Build-time Type Checking:

   javascript
   module.exports = {
     builtins: {
       pluginImport: [
         {
           libraryName: 'lodash',
           libraryDirectory: '',
           camel2DashComponentName: false
         }
       ]
     },
     plugins: [
       new rspack.ForkTsCheckerWebpackPlugin({
         typescript: {
           configFile: './tsconfig.json',
           memoryLimit: 4096
         }
       })
     ]
   }

2. Independent Type Checking:

   • Run type checking separately using tsc --noEmit
   • Integrate into CI/CD pipeline
   • Separate type checking from build process

Type Checking Best Practices

1. Development Environment:

   • Can disable type checking during development to improve speed
   • Use editor's type checking features
   • Perform quick type checking on save

2. Build Environment:

   • Enable complete type checking in production builds
   • Ensure code quality
   • Block deployment of code with type errors

3. CI/CD:

   • Run type checking in continuous integration
   • Use as code quality gate
   • Combine with other checking tools

React + TypeScript

Rspack provides complete support for React + TypeScript:

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              transform: {
                react: {
                  runtime: 'automatic',
                  importSource: '@emotion/react'
                }
              }
            }
          }
        },
        type: 'javascript/auto'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
}

Performance Optimization

1. Incremental Compilation:

   • Leverage Rspack's incremental build capabilities
   • Only recompile changed TypeScript files
   • Greatly improve development experience

2. Type Caching:

   • Cache type checking results
   • Avoid redundant type checking
   • Improve build speed

3. Parallel Processing:

   • Process multiple TypeScript files in parallel
   • Fully utilize multi-core CPU
   • Shorten build time

Common Issues

1. Type Declaration Files Not Found:

   • Ensure @types packages are installed
   • Check tsconfig.json configuration
   • Verify type declaration file paths

2. Type Checking Errors:

   • Check tsconfig.json configuration
   • Ensure type definitions are correct
   • Use // @ts-ignore or // @ts-expect-error to temporarily ignore

3. Slow Compilation Speed:

   • Ensure SWC Loader is being used
   • Enable incremental builds
   • Optimize tsconfig.json configuration

Rspack's TypeScript support provides developers with a fast and efficient development experience. Through reasonable configuration and optimization, you can fully leverage TypeScript's type safety advantages while maintaining extremely fast build speeds.