La transpilation
Traduire du code source vers un autre code source de même niveau (TypeScript vers JavaScript, JSX vers JS) : ce qu'est un transpileur, à quoi ça sert, et pourquoi c'est une forme de compilation.
La transpilation
Le terme revient dès qu'on parle de TypeScript ou de React : le code est « transpilé ». C'est un cousin proche de la compilation, mais avec une différence de niveau importante.
# Traduire vers un langage de même niveau
La compilation classique traduit vers le bas : d'un langage de haut niveau vers du code machine (ou du bytecode).
La transpilation, elle, traduit à l'horizontale : d'un langage source vers un autre langage source, de niveau équivalent, tout aussi lisible par un humain.
Compilation : C# ──► bytecode / code machine (haut ──► bas)
Transpilation : TS ──► JS (haut ──► haut)Compilation : C# ──► bytecode / code machine (haut ──► bas)Transpilation : TS ──► JS (haut ──► haut)Quelques exemples courants :
| De | Vers | Outil |
|---|---|---|
| TypeScript | JavaScript | tsc |
| JSX / TSX | JavaScript | Babel, SWC |
| JavaScript récent | JavaScript ancien | Babel |
| Sass / SCSS | CSS | le compilateur Sass |
# L'exemple TypeScript → JavaScript
Le navigateur ne comprend pas TypeScript. Avant d'être exécuté, ton code TS est donc transpilé en JavaScript ordinaire - et au passage, les types disparaissent :
// Ce que tu écris (TypeScript)
function saluer(nom: string): string {
return `Bonjour ${nom}`;
}// Ce que tu écris (TypeScript)function saluer(nom: string): string { return `Bonjour ${nom}`;}// Ce qui est réellement exécuté (JavaScript transpilé)
function saluer(nom) {
return `Bonjour ${nom}`;
}// Ce qui est réellement exécuté (JavaScript transpilé)function saluer(nom) { return `Bonjour ${nom}`;}Les annotations de type n'ont servi qu'à la vérification, avant la transpilation. Une fois le JS produit, elles n'existent plus. (Voir TypeScript : Pourquoi et comment.)
# Pourquoi transpiler ?
Trois raisons principales :
- Compatibilité : écrire du JavaScript moderne et le transpiler en une version comprise par les vieux navigateurs.
- Ajouter ce que le langage cible n'a pas : les types (TS), le balisage JSX - des choses que le navigateur ne sait pas lire directement.
- Un seul code source, plusieurs cibles : on écrit une fois, on génère la version adaptée à chaque environnement.
Cette étape de traduction fait partie du build : l'ensemble des transformations appliquées à ton code avant qu'il ne parte en production.
# Transpilation ou compilation ?
Les deux mots se chevauchent, et c'est normal : la transpilation est un cas particulier de compilation (on parle de compilation source-à-source). D'ailleurs, l'outil de TypeScript s'appelle officiellement le compilateur TypeScript (tsc), même s'il ne fait « que » de la transpilation vers JS.
Retiens la nuance de niveau : on dit compilation quand on descend vers du code machine/bytecode, et transpilation quand on reste entre langages de haut niveau.
# À retenir
- Transpiler = traduire d'un code source vers un autre code source de niveau équivalent (TS → JS, JSX → JS).
- Ça sert à la compatibilité et à ajouter des fonctionnalités que le langage cible n'a pas (types, JSX).
- C'est une forme de compilation (source-à-source) : le « compilateur TypeScript » est en réalité un transpileur.