You write TypeScript, yet no browser reads TypeScript. You write JSX, yet no engine knows that syntax. Between the two, a step translates what you type into what the machine accepts.
That step has a name, and understanding exactly what it does stops you from crediting it with powers it does not have.
Definition
Transpilation is the translation of source code into other source code at a comparable level, still readable by a human. It differs from classic compilation, which produces machine code or an intermediate format nobody reads back.
// Source, written today
const lines = cart.map(({ price, quantity }) => price * quantity);
const total = lines.reduce((sum, value) => sum + value, 0);
// Transpiled result for an older engine
var lines = cart.map(function (line) {
return line.price * line.quantity;
});
var total = lines.reduce(function (sum, value) {
return sum + value;
}, 0);The behavior is identical, the spelling is not. That is the whole promise of the operation: write in the version of the language that suits you, ship the one your audience can run.
Not to be confused with its neighbors
| Operation | What it changes |
|---|---|
| Transpilation | The syntax, not the behavior |
| Minification | The file size, not the syntax allowed |
| Polyfill | Adds a missing function at run time |
| Bundling | The number of files served |
All four often run in the same build, which is why they get mixed up. They answer four different problems, though, and a bug is only fixed in the right box.
Transpilation never makes up for a method missing from the engine. Translating a Arrow function into a classic function, yes; conjuring Object.groupBy into a browser that has never heard of it, no. That limit explains half the errors seen in production on older devices.
What it costs
The shipped code is no longer the code you wrote. An error reported by a visitor therefore points at an unknown line, and only a Source map file leads back to the original source.
Weight goes up too: the older the target, the more verbose the rewrites. Tuning the list of targeted browsers as tightly as possible is the move that pays best, well before optimizing your own code.
Frequently asked questions
Transpilation or compilation, which word should I use?
Both circulate, and usage has settled on the second in many tools, which simply speak of a compiler. The word transpilation keeps the advantage of being precise: it says that input and output are two source codes meant for the same kind of machine.
Should dependencies be transpiled?
Usually not, since published packages already ship in a compatible form, and processing them again slows the build enormously. That is exactly why configurations exclude the node_modules folder. The opposite case does exist, for a library published in very recent syntax.
How do I know whether my code needs transpiling?
By starting from the real audience rather than a hunch: your site analytics show which browsers are in use, and a target list follows from that. Writing TypeScript imposes the step in any case. Our TypeScript course shows how the chain fits together, from the type annotation to the file finally served.