Transpilatie: wat het is, proces en hulpmiddelen voor codetransformatie

Wat is transpilatie?

Transpilatie (source-to-source compilatie) — het proces van het vertalen van een programma van de ene programmeertaal naar de andere, met behoud van het abstractieniveau. Een transpilator neemt broncode in taal A en genereert equivalente code in taal B die kan worden uitgevoerd in de doelenvironment. Typische voorbeelden: TypeScript naar JavaScript, SASS naar CSS, Haxe naar meerdere doeltalen.

Transpilatie verschilt van compilatie doordat de uitvoercode op hoog niveau blijft en door een mens kan worden gelezen (hoewel het daar niet voor bedoeld is). Een compiler (GCC, LLVM, javac) vertaalt code naar machinecode of bytecode — een onleesbaar formaat. Een transpilator genereert code die verder kan worden gecompileerd of geminificeerd.

Waarom is transpilatie nodig. De belangrijkste reden is compatibiliteit. Ontwikkelaars willen moderne talen gebruiken (TypeScript met types, Kotlin met null safety), maar het doelplatform ondersteunt alleen JavaScript of Java. Transpilatie maakt het mogelijk om in een moderne taal te schrijven en code te implementeren die begrijpelijk is voor de doelenvironment.

Populaire transpilators

Transpilatie vs compilatie: belangrijkste verschillen

Abstractieniveau — het belangrijkste verschil. Een transpilator vertaalt code tussen talen van hetzelfde niveau (hoog niveau → hoog niveau). Een compiler vertaalt van hoog naar laag niveau (machinecode, bytecode). LLVM IR is een tussenliggende representatie, maar nog steeds van een lager niveau dan bron-C++ of Rust.

Leesbaarheid van het resultaat — het tweede verschil. Het resultaat van transpilatie (JavaScript van TypeScript) is leesbaar en kan in de browser worden gedebugd. Het resultaat van compilatie (machinecode van C++) is niet bedoeld om te lezen — de analyse ervan vereist een disassembler. Source maps helpen bij het debuggen van getranspileerde code door deze te koppelen aan de broncode.

Transpilatie in CI/CD-context

In CI/CD-pijplijnen wordt transpilatie uitgevoerd in de buildfase. Voor TypeScript-projecten worden tsc of Babel gestart in een Docker-container, genereren ze JavaScript en source maps, die vervolgens worden geminificeerd en geïmplementeerd op de server of in de app store. Het is belangrijk om caching van transpilatieresultaten in te stellen — tsc --incremental slaat de afhankelijkheidsgrafiek op tussen runs, waardoor de buildtijd met 30–50% wordt verkort.

Voor mobiele projecten (React Native) wordt transpilatie via Metro Bundler uitgevoerd op de CI-server bij elke publicatie. Voor versnelling worden cache-directories (tmp/metro-cache) en parallelle build via --workers gebruikt. GitHub Actions en GitLab CI ondersteunen caching van node_modules en .cache-directories tussen runs, wat cruciaal is voor het verkorten van de pijplijntijd.

Uitvoeringssnelheid verschilt ook. Compilatie naar machinecode geeft maximale prestaties. Transpilatie behoudt de overhead van het abstractieniveau: JavaScript van TypeScript wordt uitgevoerd met dezelfde snelheid als gewoon JavaScript. Optimalisaties (TypeScript --strict) werken in de analysefase, niet in de uitvoeringsfase.

Populaire transpilatiescenario's

Scenario 1: TypeScript → JavaScript — het meest voorkomende scenario. De ontwikkelaar schrijft in TypeScript met types, de compiler tsc of Babel verwijdert typeannotaties en genereert zuiver JavaScript. Alle Angular-projecten en de meeste React-projecten (2026) gebruiken TypeScript-transpilatie. Volgens State of JS 2025 gebruikt 79% van de ondervraagde ontwikkelaars TypeScript in hun hoofdprojecten.

Scenario 2: Kotlin → JavaScript — gebruikt in Kotlin/JS voor Full-Stack-ontwikkeling. Kotlin-code wordt gecompileerd naar JavaScript via Kotlin Compiler met IR (Intermediate Representation). Kotlin/JS ondersteunt TypeScript-getypeerde declaraties (.d.ts) voor integratie met externe JS-bibliotheken. JetBrains gebruikt Kotlin/JS in zijn producten voor webinterfaces.

Scenario 3: SASS/SCSS → CSS — transpilatie van CSS-preprocessors. Dart Sass (aanbevolen implementatie) transpileert .scss naar .css, waarbij mixins, variabelen, geneste regels en functies worden uitgebreid. Dit is geen compilatie (CSS blijft CSS), maar transpilatie met syntaxuitbreiding.

Vergelijking: Transpilatie vs Compilatie vs Interpretatie

Babel: transpilatie van modern JavaScript

Babel — de meest gebruikte JavaScript-transpilator die ES6+/ESNext-code omzet naar ES5-compatibel JavaScript. Babel werkt via een systeem van plug-ins en presets: elke plug-in is verantwoordelijk voor één transformatie (arrow functions, async/await, optional chaining). @babel/preset-env bepaalt automatisch de benodigde plug-ins op basis van de doelbrowsers (browserslist).

De architectuur van Babel bestaat uit drie fasen: parsen (parsing) → transformatie (transformation) → generatie (generation). De parser (Babylon/@babel/parser) zet broncode om in AST (Abstract Syntax Tree). Transformers (plug-ins) wijzigen de AST. De generator (@babel/generator) maakt uitvoercode van de gewijzigde AST.

Voorbeeld: transpilatie via Babel

// Bron ES6+ code
const greet = (name = "World") => {
  return `Hello, ${name}!`;
};

class User {
  constructor(name) {
    this.name = name;
  }
}

const data = { user: { address: { city: "Moscow" } } };
const city = data?.user?.address?.city;

// Na Babel (target: > 0.25%, not dead)
"use strict";

var greet = function (name) {
  if (name === void 0) { name = "World"; }
  return "Hello, " + name + "!";
};

var User = function (name) {
  this.name = name;
};

var data = { user: { address: { city: "Moscow" } } };
var city = data != null
  ? data.user != null
    ? data.user.address != null
      ? data.user.address.city
      : void 0
    : void 0
  : void 0;

Babel heeft omgezet: de pijlfunctie naar function expression, de standaardparameter (name = „World“) naar void 0-controle, de template string naar concatenatie, de klasse naar een constructorfunctie en optional chaining (?.) naar een keten van ternaire operatoren. const werd vervangen door var voor compatibiliteit met ES5-omgevingen.

TypeScript: transpilatie met typesysteem

TypeScript — een sterk getypeerde taal die wordt getranspileerd naar JavaScript. De compiler tsc (TypeScript Compiler) voert twee taken uit: typecontrole (type checking) en transpilatie (emit). Het is belangrijk om te begrijpen: typecontrole en transpilatie zijn onafhankelijke fasen. Men kan transpilatie uitvoeren zonder typecontrole (--noEmitOnError false) of controle zonder codegeneratie (--noEmit true).

TypeScript-transpilatie verwijdert alle typeannotaties, interfaces, typealiassen en generieke parameters — in JavaScript bestaan ze niet. Enums worden omgezet naar objecten, decorators naar functieaanroepen, async/await naar generatoren (als target lager is dan ES2017). tsconfig.json beheert target (JavaScript-versie), module (modulesysteem), strict (mate van typecontrole) en outDir (uitvoermap).

TypeScript-configuratie voor transpilatie

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2015", "dom"],
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

target: „es2015“ geeft tsc de opdracht JavaScript te genereren met ES6-syntax (pijlfuncties, klassen, let/const). module: „esnext“ behoudt ES-modules (import/export) voor latere Tree Shaking in Webpack. strict: true schakelt alle typecontroles in (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true genereert .d.ts-bestanden voor TypeScript-consumenten van de bibliotheek.

Transpilatie in mobiele ontwikkeling

React Native gebruikt Babel en Metro voor transpilatie van JavaScript/TypeScript naar code die wordt uitgevoerd door JavaScriptCore (iOS) of Hermes (Android). Babel-plug-ins voegen JSX-transformatie, Flow/TypeScript-annotaties en React Native-specifieke optimalisaties toe. Metro Bundler combineert bovendien modules en voert Hot Module Replacement uit voor ontwikkeling.

Flutter gebruikt Dart-transpilatie. Voor Flutter Web transpileert dart2js Dart naar geoptimaliseerd JavaScript. Voor Flutter Mobile compileert dart2native Dart naar native ARM-code. Flutter ondersteunt ook Dart DevCompiler (dartdevc) voor ontwikkeling — het transpileert Dart sneller naar JavaScript, maar met minder optimalisatie.

Voorbeeld: Babel-configuratie voor React Native

// babel.config.js — React Native transpilatie
module.exports = {
  presets: [
    ["module:metro-react-native-babel-preset"],
  ],
  plugins: [
    ["module-resolver", {
      root: ["."],
      alias: {
        "@": "./src",
        "@components": "./src/components",
      },
    }],
    "react-native-reanimated/plugin",
  ],
  env: {
    production: {
      plugins: ["transform-remove-console"],
    },
  },
};

metro-react-native-babel-preset bevat alle benodigde plug-ins voor React Native: JSX, Flow/TypeScript, Metro-modulesysteem, async/await, class properties en decorators. De plug-in module-resolver voegt aliassen toe voor korte imports (@/components/Button in plaats van ../../components/Button). In productiemodus verwijdert transform-remove-console alle console.log uit de code.