Definitie: TypeScript is een open source programmeertaal van Microsoft die bovenop JavaScript is gebouwd en er statische types aan toevoegt. TypeScript-code wordt omgezet naar gewone JavaScript, zodat het overal draait waar JavaScript draait.

In het kort

  • TypeScript verscheen in oktober 2012 als versie 0.8; versie 1.0 volgde in april 2014. Anders Hejlsberg, ook bekend van C#, is een van de ontwerpers.
  • Elke geldige JavaScript-code is ook geldige TypeScript-code; TypeScript voegt alleen extra regels toe.
  • Het grote voordeel is dat veel fouten al tijdens het ontwikkelen worden gevonden in plaats van pas als de gebruiker ermee werkt.
  • TypeScript is gratis en valt onder de Apache 2.0-licentie.

Wat is TypeScript?

JavaScript is de taal van het web. Elke browser voert JavaScript uit, en met Node.js draait het ook op servers. JavaScript is echter dynamisch getypeerd: een variabele kan het ene moment een getal bevatten en het volgende moment een tekst. Dat maakt de taal flexibel, maar ook foutgevoelig. Een fout komt vaak pas aan het licht als de code wordt uitgevoerd.

TypeScript lost dat op met types. Je legt vast welk soort gegeven een variabele bevat, wat een functie verwacht en wat ze teruggeeft, en hoe een object eruitziet. De TypeScript-compiler controleert die afspraken voordat de code draait. Klopt er iets niet, dan krijgt de ontwikkelaar direct een melding in zijn editor.

Volgens Wikipedia is TypeScript ontwikkeld door Microsoft, met Anders Hejlsberg en Luke Hoban als ontwerpers. Hejlsberg is ook de hoofdarchitect van C# en de maker van Turbo Pascal en Delphi.

Hoe werkt TypeScript?

  1. Schrijven. De ontwikkelaar schrijft code in bestanden met de extensie .ts, met types erbij.
  2. Controleren. De compiler (tsc) of de editor controleert of de types kloppen en meldt fouten.
  3. Omzetten. De compiler zet de code om naar gewone JavaScript. De types verdwijnen daarbij.
  4. Uitvoeren. De browser of server voert de JavaScript uit, zonder dat TypeScript daar nog een rol speelt.

Omdat de types bij het omzetten verdwijnen, levert TypeScript geen extra belasting op bij het uitvoeren. Wux noemt dat expliciet: er zit geen runtime-overhead aan vast.

Een eenvoudig voorbeeld:

function totaalPrijs(aantal: number, prijs: number): number {
  return aantal * prijs;
}

Roept iemand deze functie aan met een tekst in plaats van een getal, dan meldt TypeScript dat direct.

TypeScript vs JavaScript: wat is het verschil?

JavaScript TypeScript
Typering Dynamisch, types worden tijdens uitvoering bepaald Statisch, types worden vooraf gecontroleerd
Fouten vinden Vaak pas tijdens uitvoering Grotendeels al tijdens het ontwikkelen
Compileren Niet nodig Omzetten naar JavaScript nodig
Hoeveelheid code Minder, geen typedeclaraties Iets meer, door types
Leercurve Lager Iets hoger, zeker voor beginners
Geschikt voor Kleine projecten, prototypes, scripts Grotere applicaties, teams, langlopende projecten
Editorondersteuning Goed Beter: autocompletion en refactoring op basis van types

Interactivated vat de keuze samen als een afweging tussen flexibiliteit en veiligheid. JavaScript-bestanden kun je grotendeels in een TypeScript-project gebruiken, maar andersom werkt dat niet zonder aanpassing.

Wat zijn de voordelen van TypeScript?

  • Eerder fouten vinden. Typefouten, verkeerd gespelde eigenschappen en ontbrekende parameters komen tijdens het ontwikkelen aan het licht.
  • Betere editorondersteuning. Editors zoals Visual Studio Code tonen suggesties en waarschuwingen op basis van de types.
  • Leesbare code. De types werken als documentatie: je ziet direct wat een functie verwacht.
  • Veilig aanpassen. Bij het hernoemen of herstructureren van code wijst de compiler aan wat er nog meer moet veranderen.
  • Beter samenwerken. In een team zijn de afspraken tussen onderdelen expliciet vastgelegd.
  • Stap voor stap invoeren. Je kunt TypeScript naast bestaande JavaScript-code gebruiken en geleidelijk overstappen.

Wat zijn de nadelen?

  • Extra stap. De code moet worden omgezet voordat ze draait; browsers voeren TypeScript niet direct uit.
  • Meer code. Typedeclaraties maken bestanden iets langer.
  • Leercurve. Voor beginners zijn de geavanceerde typemogelijkheden even wennen.
  • Weinig winst bij kleine scripts. Tuple en Carmatec noemen TypeScript bij kleine, eenvoudige projecten vaak overbodig.
  • Schijnzekerheid. Types controleren de code, niet de gegevens die van buiten binnenkomen. Invoer van gebruikers of externe systemen moet je nog steeds apart controleren.

Waar wordt TypeScript gebruikt?

TypeScript is breed doorgedrongen in webontwikkeling. Angular werkt standaard met TypeScript, en volgens Wux kiezen ook React-, Vue- en Node.js-projecten er steeds vaker voor. Carmatec noemt daarnaast Next.js als framework dat beide talen ondersteunt. Je komt TypeScript tegen in:

  • de frontend van webapplicaties, met React, Vue of Angular;
  • backends op Node.js;
  • API’s en koppelingen tussen systemen;
  • browserextensies en plugins.

Recente ontwikkelingen

Volgens Wikipedia is de compiler vanaf TypeScript 7.0 herschreven in de programmeertaal Go. Microsoft meldt daarbij een snelheidswinst van gemiddeld acht tot twaalf keer ten opzichte van versie 6.0. Voor grote projecten betekent dat kortere wachttijden bij het controleren en bouwen van code. Daarnaast kan Node.js TypeScript-bestanden tegenwoordig zelf uitvoeren door de types weg te halen, wat de extra stap voor eenvoudige toepassingen kleiner maakt.

Hoe stap je over van JavaScript naar TypeScript?

Een bestaand project hoeft niet in één keer om. Een gebruikelijke route:

  1. Installeer TypeScript via npm en voeg een configuratiebestand toe.
  2. Sta JavaScript toe naast TypeScript, zodat het project blijft werken.
  3. Zet bestanden één voor één om, te beginnen met de onderdelen die het vaakst veranderen of de meeste fouten geven.
  4. Begin soepel en maak de controle strenger naarmate meer code types heeft.
  5. Leg types vast voor gegevens van buiten, zoals antwoorden van een API, zodat de rest van de code erop kan vertrouwen.

Wanneer kies je voor TypeScript?

TypeScript is een logische keuze als:

  • de applicatie langer meegaat en regelmatig wordt uitgebreid;
  • meerdere ontwikkelaars aan dezelfde code werken;
  • er veel gegevens tussen onderdelen of systemen worden uitgewisseld;
  • je wilt dat een andere ontwikkelaar de code later makkelijk kan overnemen.

Voor een klein script, een snelle test of een prototype dat je weer weggooit, is gewone JavaScript vaak voldoende.

Wat betekent dit voor jouw project?

Als opdrachtgever hoef je TypeScript niet te kennen. Wat wel telt, is dat de code van je applicatie leesbaar is en door een andere ontwikkelaar kan worden overgenomen. Types maken afspraken in de code zichtbaar, en dat helpt daarbij.

Belangrijker dan de taal is de vraag wat de applicatie moet doen. Ik wil vooraf duidelijk hebben wat we met een eerste versie bedoelen: wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? Daarna volgt de keuze voor gangbare, goed gedocumenteerde techniek.

Vraag? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook meer over een webapplicatie bouwen.

Veelgestelde vragen over TypeScript

Wat is TypeScript?

TypeScript is een open source programmeertaal van Microsoft die JavaScript uitbreidt met statische types. De code wordt omgezet naar gewone JavaScript en draait daardoor in elke browser en op Node.js.

Wat is het verschil tussen TypeScript en JavaScript?

JavaScript is dynamisch getypeerd, waardoor fouten vaak pas tijdens uitvoering zichtbaar worden. TypeScript voegt statische types toe die vooraf worden gecontroleerd, zodat veel fouten al tijdens het ontwikkelen worden gevonden.

Is TypeScript moeilijk om te leren?

Voor wie JavaScript kent, is de overstap meestal goed te doen, omdat bestaande JavaScript ook geldige TypeScript is. De basis van types leer je snel; de geavanceerde typemogelijkheden vragen meer oefening.

Verwante termen

Vue.js · Backend · Broncode · Technische schuld · Webapplicatie · Laravel

← Terug naar de kennisbank