TypeScript is in veel Amsterdamse codebases een laag annotaties boven JavaScript dat nog steeds any doorlaat. De TypeScript-track van NLCodeCraft Frontend Academy keert dat om: types zijn het contract, de UI volgt. Mark van Leeuwen traint u om interfaces te schrijven die een API beschrijven, discriminated unions te gebruiken voor UI-staten, en generics te lezen zonder dat u ze als toverspreuk behandelt.
Instroom: u heeft een werkend JavaScript- of React-project. Zonder dat fundament eerst React of het Frontend Lab. Wij converteren geen hele monorepo in vier avonden. Wij leren u het gereedschap waarmee ú de conversie in uw team kunt leiden.
strict is het startpunt, niet de beloning
Wij zetten strict aan op dag één. Wie “eerst any, later wel” zegt, bouwt een tweede JavaScript. U leert noImplicitAny, exactOptionalPropertyTypes waar het team dat aankan, en hoe u third-party types isoleert zodat een kapotte definitie niet uw hele app rood kleurt.
| Thema | Praktijk in de les | Fout die wij uitbannen |
|---|---|---|
| Interfaces vs. types | API-payload als interface, unies als type | Eén type-alias van 200 regels |
| Narrowing | in, discriminant, never-check | as-casts “omdat het compileert” |
| Generics | lijst, resultaat, component-props | Copy-paste van dezelfde functie in drie smaken |
| Modules | publieke exports vs. interne helpers | Importcirkels en barrel-files zonder beleid |
Leermodules TypeScript
Typen wat de server werkelijk stuurt
U modelleert een JSON-endpoint inclusief null, ontbrekende velden en foutobjecten. Optellen van string|undefined is een les, geen voetnoot.
UI-staten als unie
idle/loading/error/success. Switch is uitputtend; default is een compileerfout, geen stille tak.
Component props zonder lekken
children, polymorphic as-prop alleen als het team het nodig heeft. Wij forceren geen fancy API voor een knop.
Refactor met de compiler
Hernoemen van een veld in vijf bestanden is de oefening. Als TypeScript dat niet vangt, was het type te ruim.
Wij koppelen deze track aan React-componenten uit de React cursus, zodat u niet in vacuüm-interfaces oefent. De compiler is een collega die nooit moe wordt; u leert die collega serieus te nemen zonder hem te aanbidden.
type ApiResult<T> =
| { ok: true; data: T }
| { ok: false; error: { code: string; detail: string } };
function unwrap<T>(result: ApiResult<T>): T {
if (!result.ok) {
throw new Error(result.error.detail);
}
return result.data;
}
Huiswerk bevat een bestaande JS-module die u migreert, plus een korte toelichting: welke any’s u weigerde, welke u tijdelijk isoleerde achter een adapter. Mark van Leeuwen kijkt naar die toelichting minstens zo hard als naar de types. Een groene compiler zonder nadenken is geen craft.
Veelgestelde vragen
Is Zod of io-ts verplicht?
Nee. Runtime-validatie behandelen wij als patroon. De les is: vertrouw de netwerkgrens niet, ook niet met TypeScript.
Doen jullie ts-ignore wegwerken?
Ja, als oefening. Elke @ts-expect-error krijgt een vervaldatum en een reden.
Werkt dit voor Vue of Svelte?
De typepatronen wel. De componentvoorbeelden zijn React, omdat dat de academy-stack is.
Hoe streng is de review?
Strenger dan een tutorial, soepeler dan een bank-monorepo. Het doel is dat u in een Amsterdams team kunt landen zonder types te vrezen.
Leslocatie en bereik in Amsterdam
NLCodeCraft geeft klassikale en hybride frontend-opleidingen vanaf de Wibautstraat, op de Knowledge Mile tussen Amstel en Weesperplein. Cursisten komen uit de onderstaande stadsdelen; avondgroepen starten na kantoortijd zodat u vanuit Zuid, Noord of Oud-West kunt aansluiten zonder een extra reisdag in te plannen.
- Centrum
- De Pijp
- Oud-West
- Oost
- Watergraafsmeer
- Amsterdam-Noord
- Zuid
- Westerpark
NLCodeCraft Frontend Academy
Uw aanspreekpunt: Mark van Leeuwen
Wibautstraat 131
1091 GL Amsterdam
Telefoon: +31 20 244 3188
E-mail: [email protected]