Transpiler

Updated September 30, 20262 min read

In short

A transpiler is a tool that translates source code from one language or language version into another at a similar level, such as TypeScript into JavaScript.

What is a transpiler?

A transpiler, short for source-to-source compiler, reads code written in one language and outputs equivalent code in another language that works at roughly the same level of abstraction. The best-known examples in web development are compiling TypeScript into plain JavaScript and turning modern JavaScript into an older version that more browsers understand.

Like any compiler, a transpiler parses the source into an abstract syntax tree (AST), a structured representation of the code, transforms that tree, and prints new source code from it. Babel converts newer syntax and JSX through plugins, while tools such as esbuild, SWC, and the TypeScript compiler (tsc) strip type annotations and rewrite syntax, the first two very quickly because they are written in Go and Rust. Transpilers can also emit source maps, which let browser developer tools show your original code while you debug the generated output.

A transpiler is like translating a book from British to American English: the meaning and structure stay the same, and only the wording changes. Beyond TypeScript, transpilers compile languages such as Kotlin and Dart to JavaScript and turn Sass into CSS. In a typical web project the transpiler runs inside a bundler or a framework's build step, so you rarely call it directly.

A transpiler is often confused with a compiler and with a polyfill. A traditional compiler usually translates to a lower level, such as C to machine code, while a transpiler stays at the same level; transpiling is really a kind of compiling, so the tools overlap. A transpiler only changes syntax and can't add missing runtime functions like Array.prototype.at, which is the job of a polyfill. Also, stripping TypeScript types is not the same as checking them: fast transpilers remove types without type-checking, so projects still run tsc --noEmit to catch type errors.

Key takeaways

A transpiler converts source code into other source code at a similar level of abstraction.
Common jobs: TypeScript to JavaScript, modern JavaScript to older JavaScript, and JSX to function calls.
It parses code into an AST, transforms the tree, and prints new code.
Source maps link the generated code back to the original for debugging.
Transpilers rewrite syntax; polyfills add missing runtime features.

Example

What a transpiler does with TypeScripttypescript

// Input: TypeScript with types and optional chaining
interface User { name: string; address?: { city: string } }
const city = (user: User): string => user.address?.city ?? "unknown";

// Roughly what comes out when targeting older JavaScript (ES2019):
// const city = (user) => {
//   var _a, _b;
//   return (_b = (_a = user.address) === null || _a === void 0 ? void 0 : _a.city) !== null && _b !== void 0 ? _b : "unknown";
// };

// Typical commands:
// npx tsc --target es2019 src/city.ts
// npx esbuild src/city.ts --target=es2019 --outfile=dist/city.js

Readers ask

What is the difference between a transpiler and a compiler?

A compiler usually translates code into a lower-level form, such as machine code or bytecode. A transpiler translates between languages at a similar level, such as TypeScript to JavaScript; it is a special kind of compiler.

Is Babel a transpiler?

Yes. Babel is a JavaScript transpiler that converts newer syntax and JSX into code that older environments can run, using plugins for each transformation.

Do I need a transpiler for TypeScript?

For code that runs in browsers, yes, because browsers can't run TypeScript directly. Recent Node.js versions can run many TypeScript files by stripping their types on the fly, but they still don't type-check them.

Often compared

Compiler vs TranspilerA compiler turns code into a lower-level form a machine or VM runs, while a transpiler outputs another high-level language, like TypeScript to JavaScript.