Wat is TypeScript? De basis en overstap vanaf JavaScript

Als je je afvraagt wat TypeScript is, dan is het korte antwoord dit: het is een opensourcetaal van Microsoft die een statisch typesysteem bovenop JavaScript legt. Elk geldig stuk JavaScript dat je schrijft is ook geldige TypeScript; door types toe te voegen vang je bugs in je editor, nog voordat de code draait. In deze gids leer je de basis van het typesysteem, het gebruik van interface, en hoe je TypeScript stap voor stap aan een bestaand project toevoegt.

Wat TypeScript is en waarom het bestaat

JavaScript is dynamisch getypeerd: een variabele kan op het ene moment tekst zijn en het volgende een getal. In kleine scripts is die flexibiliteit handig, maar naarmate een project groeit, klappen fouten als "undefined is not a function" op runtime, recht voor de neus van je gebruiker. TypeScript vangt die bugs juist tijdens het compileren.

TypeScript zelf draait niet in de browser. De tsc (TypeScript Compiler) transpileert je code naar gewone JavaScript, en de types worden uit die uitvoer gewist. Types horen volledig bij de ontwikkelfase; ze voegen nul overhead toe in productie.

function begroet(naam: string): string {
  return `Hallo, ${naam}`;
}

begroet("Aslain"); // OK
begroet(42);        // Fout: type 'number' is niet toewijsbaar aan 'string'

De basistypes

De primitieve types die je het meest gebruikt zijn dezelfde als in JavaScript: string, number, boolean. Daar komen arrays, null, undefined en het speciale any-type bij.

let titel: string = "Blog";
let leestijd: number = 5;
let gepubliceerd: boolean = true;
let tags: string[] = ["web", "typescript"];

// Tuple: vaste lengte en volgorde
let coordinaat: [number, number] = [41.0, 28.9];

Een belangrijk punt: meestal hoef je het type niet met de hand te schrijven. TypeScript doet aan type-inferentie. Als je let leestijd = 5 schrijft, weet de compiler al dat het een number is. Reserveer expliciete annotaties vooral voor functieparameters en retourwaarden.

Vermijd het any-type zo veel mogelijk; het betekent "zet typecontrole uit" en gooit alles weg wat TypeScript je biedt. Als je het type echt niet kent, gebruik dan het veiligere unknown-type: dat dwingt je tot een controle voordat je de waarde gebruikt.

Objecten vormgeven met interface en type

In echte applicaties beschrijf je vooral de vorm van objecten. Daar zijn twee gereedschappen voor: interface en type. Laten we een gebruiker definiëren:

interface Gebruiker {
  id: number;
  naam: string;
  email: string;
  rol?: "admin" | "lid"; // ? = optioneel veld
}

const u: Gebruiker = {
  id: 1,
  naam: "Aslain",
  email: "hello@aslain.dev",
};

Hier is het veld rol? optioneel, en "admin" | "lid" is een uniontype dat zegt dat de waarde alleen een van die twee strings kan zijn. Schrijf je een andere string, dan waarschuwt de compiler.

interface en type zijn in de meeste situaties uitwisselbaar. Een praktische vuistregel: gebruik interface voor objectvormen en type voor unions en aliassen. Een voordeel van interface is dat je hem via overerving kunt uitbreiden:

interface Auteur extends Gebruiker {
  aantalBerichten: number;
}

Functies en generics

Het annoteren van de parameters en de retourwaarde van een functie maakt dat de code zichzelf documenteert. Wil je dezelfde logica over verschillende types hergebruiken, dan komen generics in beeld:

function eersteItem<T>(arr: T[]): T | undefined {
  return arr[0];
}

const getal = eersteItem([1, 2, 3]);     // type: number
const tekst = eersteItem(["a", "b"]);    // type: string

Hier is T een plaatshouder. Met welk type array je de functie ook aanroept, het retourtype past zich aan. Generics vormen de basis van structuren als Array en Promise<T>, en ze combineren typeveiligheid met flexibiliteit.

TypeScript geleidelijk invoeren in een bestaand project

De grootste kracht van TypeScript is dat je een bestaand JavaScript-project niet in één keer hoeft om te zetten. De migratie kan stap voor stap:

• 1. Installeren en configureren. Voer npm install --save-dev typescript uit, daarna npx tsc --init om een tsconfig.json te maken.
• 2. Begin soepel. Start met "strict": false en "allowJs": true zodat TypeScript naast je bestaande .js-bestanden draait.
• 3. Bestand voor bestand omzetten. Hernoem één bestand naar .ts, los de typefouten op en ga dan naar het volgende.
• 4. Aanscherpen. Naarmate het project stabiliseert, schakel over naar "strict": true; dat zet alle strikte controles aan, inclusief strictNullChecks, die de meeste bugs vangt.

Een goed startpunt voor tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

Voor bibliotheken van derden bieden @types/...-pakketten meestal de typedefinities (bijvoorbeeld npm i -D @types/node). Veel moderne bibliotheken leveren hun typedefinities mee in het pakket zelf, zodat je niets extra's hoeft te installeren.

Veelgestelde vragen

Moet ik JavaScript kennen voordat ik TypeScript leer?

Ja. TypeScript is een laag erbovenop, geen aparte taal. Als je vertrouwd bent met de basis van JavaScript zoals functies, scope, async/await en objecten, valt de typelaag heel snel op zijn plek. Zonder een stevige JavaScript-basis zijn de typefouten lastig te begrijpen.

Maakt TypeScript mijn project trager?

Niet tijdens runtime; de types worden bij het compileren gewist en de productiecode is gewone JavaScript. De enige extra kost is de buildstap, die met moderne tooling seconden duurt en in ruil daarvoor een groot aantal bugs voorkomt.

Is any gebruiken verboden?

Niet verboden, maar het zou een laatste redmiddel moeten zijn. Het is handig om tijdelijk een type te omzeilen, maar permanent gebruik van any zet de typecontrole uit. Ken je het type niet, kies dan voor veiligere alternatieven zoals unknown, of Record<string, T> voor flexibele objecten.

Wil je overstappen naar een typeveilige basis? Om je bestaande JavaScript-project naar TypeScript te migreren of een typeveilige applicatie van de grond af op te bouwen, neem contact op en laten we samen een stevig fundament leggen.