Typescript Transpiler Setup

To master working with TypeScript-compatible transpilers like Babel, SWC, and Sucrase, follow this step-by-step approach:

1. Understanding the Role of Transpilers

Transpilers convert TypeScript (TS) code into JavaScript (JS) that can run in different environments (browsers, Node.js). The main reasons for using a transpiler instead of tsc (TypeScript compiler) include:

• Faster compilation (SWC and Sucrase are much faster than tsc).
• More flexible configurations (especially Babel for advanced JavaScript transformations).
• Compatibility with build tools like Webpack, Vite, and Esbuild.

2. Setting Up and Using Different Transpilers

A. Using Babel with TypeScript

Babel is widely used for JavaScript transformations and can be configured to work with TypeScript.

Steps to set up Babel for TypeScript

1. Initialize a project

   mkdir babel-ts-project && cd babel-ts-project
   npm init -y

1. Install Babel and TypeScript dependencies

   npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript

1. Create a Babel configuration file (babel.config.json)

   {
     "presets": ["@babel/preset-env", "@babel/preset-typescript"]
   }

1. Create a TypeScript file (index.ts)

   const greet = (name: string): string => {
       return `Hello, ${name}!`;
   };
   console.log(greet("TypeScript with Babel"));

1. Transpile the code using Babel

   npx babel index.ts --out-file index.js

1. Run the transpiled JavaScript

   node index.js

✅ Babel doesn't check types: Unlike tsc, Babel only removes TypeScript syntax but does not enforce type checking. You need to use tsc --noEmit separately for type checking.

B. Using SWC (Speedy Web Compiler)

SWC is a Rust-based transpiler that is significantly faster than Babel.

Steps to set up SWC for TypeScript

1. Install SWC CLI and dependencies

   npm install --save-dev @swc/core @swc/cli

1. Create an SWC configuration file (.swcrc)

   {
     "jsc": {
       "parser": {
         "syntax": "typescript"
       },
       "target": "es2022"
     }
   }

1. Transpile the TypeScript file

   npx swc index.ts -o index.js

1. Run the output

   node index.js

✅ SWC is much faster than Babel and also supports type stripping. However, like Babel, it does not perform type checking.

C. Using Sucrase

Sucrase is a lightweight TypeScript transpiler optimized for development.

Steps to set up Sucrase

1. Install Sucrase

   npm install --save-dev sucrase

1. Transpile TypeScript to JavaScript

   npx sucrase ./index.ts --transform-typescript --out-dir dist

1. Run the output

   node dist/index.js

✅ Sucrase is the fastest among the three but is designed only for development. It lacks many transformation features available in Babel or SWC.

3. Comparing Babel, SWC, and Sucrase

4. Type Checking Strategy

Since none of these transpilers perform type checking, you should use tsc separately:

npx tsc --noEmit

This ensures type safety without slowing down transpilation.

5. Integration with Build Tools

Webpack + Babel

1. Install required packages:

   npm install --save-dev babel-loader webpack webpack-cli @babel/core @babel/preset-env @babel/preset-typescript

1. Configure webpack.config.js:

   module.exports = {
     entry: "./src/index.ts",
     module: {
       rules: [
         {
           test: /\.ts$/,
           use: "babel-loader",
           exclude: /node_modules/,
         },
       ],
     },
     resolve: { extensions: [".ts", ".js"] },
     output: { filename: "bundle.js" },
   };

Vite + SWC

1. Install Vite with SWC:

   npm create vite@latest my-app --template react-ts
   cd my-app
   npm install

1. Vite automatically uses SWC for TypeScript transpilation.

Conclusion

• Use Babel if you need advanced transformations and compatibility with plugins.
• Use SWC if you want fast production-ready builds.
• Use Sucrase if you need the fastest development transpilation.
• Always use tsc --noEmit for type checking since these transpilers do not check types.