Transpiler

A tool that converts source code from one programming language to another programming language at a similar level of abstraction, such as converting modern JavaScript to older JavaScript.

Overview

A transpiler (source-to-source compiler) translates code from one version of a language to another. In frontend development, transpilers like Babel convert modern JavaScript (ES6+) to ES5 for browser compatibility, and TypeScript to JavaScript. Unlike traditional compilers that convert to machine code, transpilers output human-readable code.

Example

javascript
// Input: Modern JavaScript with classes
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

// Output: Transpiled to ES5
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return "Hello, I'm " + this.name;
};

// TypeScript to JavaScript
// Input:
interface User {
  name: string;
  age: number;
}

// Output (types removed):
// (empty - interfaces don't exist at runtime)

Key Points

  • Converts between similar-level languages
  • Different from compiler (which produces machine code)
  • Examples: Babel, TypeScript compiler
  • Enables use of modern features today
  • Outputs readable source code

Learn More