Transpilation — Explained with Examples

Transpilation converts source code from one language to another at the same abstraction level, like TypeScript to JavaScript or modern JS to older JS.

Transpilation (transform + compilation) takes source code written in one language and produces equivalent code in another language at similar abstraction. Common examples include TypeScript → JavaScript, Babel (ES2024+ → ES5), SASS → CSS, and JSX → JavaScript. Unlike compilation (high-level to low-level), transpilation stays within similar abstraction layers.

Think of transpilation like translating a book from English to Spanish. The story, characters, and plot remain the same — only the language changes. Similarly, your program’s logic is preserved while adapting syntax to a different target environment.

Babel is the most well-known JavaScript transpiler. It uses plugins to enable specific transformations, presets to bundle related plugins, and polyfills for missing runtime features. TypeScript’s tsc compiler also transpiles TS to JS, optionally with type checking disabled.

// TypeScript input
interface User {
  name: string;
  age: number;
}
const greet = (user: User): string => `Hello ${user.name}`;

// Transpiled JavaScript output
"use strict";
const greet = (user) => `Hello ${user.name}`;

Transpilation enables developers to use cutting-edge language features while supporting older environments. It also allows languages like TypeScript and CoffeeScript to compile to widely-supported JavaScript.

Polyfill, JIT, Bundling, Minification

Bundling with Transpilation