Transpilation: What It Is, Process, and Code Transformation Tools

What Is Transpilation?

Transpilation (source-to-source compilation) is the process of translating a program from one programming language to another while preserving the same level of abstraction. A transpiler takes source code in language A and generates equivalent code in language B that can run in the target environment. Typical examples: TypeScript to JavaScript, SASS to CSS, Haxe to multiple target languages.

Transpilation differs from compilation in that the output code remains at a high level and can be read by humans (though not intended for that purpose). A compiler (GCC, LLVM, javac) translates code to machine code or bytecode — an unreadable format. A transpiler generates code that can be further compiled or minified.

Why transpilation is needed. The main reason is compatibility. Developers want to use modern languages (TypeScript with types, Kotlin with null safety), but the target platform only supports JavaScript or Java. Transpilation allows writing in a modern language while deploying code understandable to the target environment.

Popular Transpilers

Transpilation vs Compilation: Key Differences

Abstraction level is the main difference. A transpiler translates code between languages of the same level (high-level → high-level). A compiler translates from a high level to a low level (machine code, bytecode). LLVM IR is an intermediate representation but still lower level than the original C++ or Rust.

Result readability is the second difference. The result of transpilation (JavaScript from TypeScript) is readable and can be debugged in the browser. The result of compilation (machine code from C++) is not meant for reading — analyzing it requires a disassembler. Source maps help debug transpiled code by linking it to the original source.

Transpilation in the CI/CD Context

In CI/CD pipelines, transpilation is performed at the build stage. For TypeScript projects, tsc or Babel runs in a Docker container, generates JavaScript and source maps, which are then minified and deployed to a server or app store. It is important to configure caching of transpilation results — tsc --incremental saves the dependency graph between runs, reducing build time by 30–50%.

For mobile projects (React Native), transpilation via Metro Bundler runs on the CI server with each release. Cache directories (tmp/metro-cache) and parallel builds via --workers speed up the process. GitHub Actions and GitLab CI support caching node_modules and .cache directories between runs, which is critical for reducing pipeline time.

Execution speed also differs. Compilation to machine code yields maximum performance. Transpilation preserves the overhead of the abstraction level: JavaScript from TypeScript runs at the same speed as regular JavaScript. Optimizations (TypeScript —strict) work at the analysis stage, not at runtime.

Popular Transpilation Scenarios

Scenario 1: TypeScript → JavaScript — the most common scenario. The developer writes TypeScript with types, the tsc compiler or Babel removes type annotations and generates pure JavaScript. All Angular projects and most React projects (2026) use TypeScript transpilation. According to State of JS 2025, 79% of surveyed developers use TypeScript in their primary projects.

Scenario 2: Kotlin → JavaScript — used in Kotlin/JS for full-stack development. Kotlin code compiles to JavaScript via the Kotlin Compiler with IR (Intermediate Representation). Kotlin/JS supports TypeScript-typed declarations (.d.ts) for integration with external JS libraries. JetBrains uses Kotlin/JS in its own products for web interfaces.

Scenario 3: SASS/SCSS → CSS — transpilation of CSS preprocessors. Dart Sass (the recommended implementation) transpiles .scss to .css, expanding mixins, variables, nested rules, and functions. This is not compilation (CSS remains CSS), but transpilation with syntactic extension.

Comparison: Transpilation vs Compilation vs Interpretation

Babel: Transpiling Modern JavaScript

Babel is the most popular JavaScript transpiler, converting ES6+/ESNext code to ES5-compatible JavaScript. Babel works through a plugin and preset system: each plugin handles one transformation (arrow functions, async/await, optional chaining). @babel/preset-env automatically determines the necessary plugins based on target browsers (browserslist).

The Babel architecture consists of three stages: parsing → transformation → generation. The parser (Babylon/@babel/parser) converts source code into an AST (Abstract Syntax Tree). Transformers (plugins) modify the AST. The generator (@babel/generator) produces output code from the modified AST.

Example: Transpilation with Babel

// Original ES6+ code
const greet = (name = "World") => {
  return `Hello, ${name}!`;
};

class User {
  constructor(name) {
    this.name = name;
  }
}

const data = { user: { address: { city: "Moscow" } } };
const city = data?.user?.address?.city;

// After Babel (target: > 0.25%, not dead)
"use strict";

var greet = function (name) {
  if (name === void 0) { name = "World"; }
  return "Hello, " + name + "!";
};

var User = function (name) {
  this.name = name;
};

var data = { user: { address: { city: "Moscow" } } };
var city = data != null
  ? data.user != null
    ? data.user.address != null
      ? data.user.address.city
      : void 0
    : void 0
  : void 0;

Babel transformed: the arrow function into a function expression, the default parameter (name = "World") into a void 0 check, the template string into concatenation, the class into a constructor function, and optional chaining (?.) into a chain of ternary operators. const was replaced with var for ES5 compatibility.

TypeScript: Transpilation with a Type System

TypeScript is a strongly typed language that transpiles to JavaScript. The tsc compiler (TypeScript Compiler) performs two tasks: type checking and transpilation (emit). It is important to understand: type checking and transpilation are independent stages. You can run transpilation without type checking (--noEmitOnError false) or check types without generating code (--noEmit true).

TypeScript transpilation removes all type annotations, interfaces, type aliases, and generic parameters — they do not exist in JavaScript. Enums are converted to objects, decorators to function calls, async/await to generators (if target is below ES2017). tsconfig.json controls target (JavaScript version), module (module system), strict (type checking rigor), and outDir (output folder).

TypeScript Configuration for Transpilation

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2015", "dom"],
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

target: "es2015" instructs tsc to generate JavaScript with ES6 syntax (arrow functions, classes, let/const). module: "esnext" preserves ES modules (import/export) for subsequent Tree Shaking in Webpack. strict: true enables all type checks (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true generates .d.ts files for TypeScript consumers of the library.

Transpilation in Mobile Development

React Native uses Babel and Metro to transpile JavaScript/TypeScript into code executable by JavaScriptCore (iOS) or Hermes (Android). Babel plugins add JSX transformation, Flow/TypeScript annotations, and React Native-specific optimizations. Metro Bundler additionally bundles modules and performs Hot Module Replacement for development.

Flutter uses Dart transpilation. For Flutter Web, dart2js transpiles Dart into optimized JavaScript. For Flutter Mobile, dart2native compiles Dart to native ARM code. Flutter also supports the Dart DevCompiler (dartdevc) for development — it transpiles Dart to JavaScript faster but with less optimization.

Example: Babel Configuration for React Native

// babel.config.js — React Native transpilation
module.exports = {
  presets: [
    ["module:metro-react-native-babel-preset"],
  ],
  plugins: [
    ["module-resolver", {
      root: ["."],
      alias: {
        "@": "./src",
        "@components": "./src/components",
      },
    }],
    "react-native-reanimated/plugin",
  ],
  env: {
    production: {
      plugins: ["transform-remove-console"],
    },
  },
};

metro-react-native-babel-preset includes all necessary plugins for React Native: JSX, Flow/TypeScript, the Metro module system, async/await, class properties, and decorators. The module-resolver plugin adds aliases for short imports (@/components/Button instead of ../../components/Button). In production mode, transform-remove-console removes all console.log from the code.