DEV Community

Cover image for What is a transpiler (with examples)?
Arika O
Arika O

Posted on

What is a transpiler (with examples)?

Transpilation means taking source code written in a high-level programming language and convert it into code written in another high-level programming language. We need special programs (softwares) to do that and these programs are called transpilers (or transcompilers).

Many times compilation and transpilation are used interchangeably. Technically they mean the same thing, except for the fact that the target language has a similar abstraction level like the source language (e.g. not machine code, but another high-level programming language).

But why do we need code transpilation to begin with? Usually, there are two main reasons for this process:

Migration between different versions of the same language. Programming languages evolve over time, aquiring new features which are more convenient or advanced than the ones in a previous version. Unfortunately, these changes can't be adopted all at once, so the problem of backwards compatibility arises. One way to deal with this is by using transpilers that convert code written using the new features into code that follows the rules of an older version of the same programming language.

Babel is an example of a transpiler which converts ECMAScript 2015+ (ES6+) code into a backwards compatible version of Javascript that can be run by older Javascript engines.

Transpilation can also be used in the opposite direction. 2to3 is a program that converts Python 2 into Python 3 code. Programs like 2to3 can help when we need to update an entire codebase but they usually need a certain amount of manual error fixing after the code conversion has been completed.

Translation from one programming language into another
Besides HTML and CSS, browsers can only read Javascript. But we can decide that, based on our requirements, we would be better off writing our code using another programming language. The problem is that now the browser won't be able to read our code anymore, so we need to translate it into Javascript.

Typescript (TS) is a JavaScript superset (sometimes called syntactic sugar) that supports types, a feature that Javascript does not have. There are other languages that do the same thing as Typescript, Coffescript or Elm for example, but TS is the most popular as of today. Typescript needs to be converted into Javascript and the transpiler used for that is called tsc.

Depending on the transpiler, the newly generated code can be kept as close as possible to the old source code or it can look completely different from it.

Image source: รrpรกd Czapp/ @czapp_arpad on Unsplash

Top comments (0)