2.8 KiB
2.8 KiB
Les 4: TypeScript Fundamentals
Hoofdstuk
Deel 2: Technical Foundations (Les 4-9)
Beschrijving
Introductie tot TypeScript: waarom het waardevol is, hoe je types schrijft, en de basis die nodig is om straks React/Next.js te typen. Deel 1 van 2 TypeScript-lessen.
Te Behandelen
Waarom TypeScript? (15 min)
- Het probleem met JavaScript: runtime errors die je pas ziet als het te laat is
- Live demo: JS vs TS in Cursor — zelfde code, maar TS vangt fouten vooraf
- Voordelen: compile-time errors, betere autocomplete, zelf-documenterend, AI tools begrijpen getypte code beter
- TypeScript is de standaard: Next.js, React, alles is TypeScript
Basic Types & Type Inference (15 min)
- Primitives:
string,number,boolean - Arrays:
number[],string[],Array<T> - Type inference: TypeScript raadt types vaak zelf
- Regel: annotate function parameters, laat TS de rest inferren
Interfaces & Type Aliases (15 min)
- Interfaces: beschrijven de shape van objecten
- Optional properties met
? - Type aliases:
type Status = "pending" | "approved" | "rejected" - Union types en literal types
- Interface vs Type: wanneer welke?
Functies & Errors (10 min)
- Function parameters en return types typen
- Veelvoorkomende TypeScript errors lezen en oplossen
- Hoe Cursor helpt met TypeScript errors (Cmd+K → fix)
Tools
- Cursor (Student Plan)
- TypeScript
- Node.js / ts-node
Lesopdracht (75 min)
TypeScript Escaperoom 🔐
Gamified TypeScript leerervaring met 8 "kamers" (puzzels):
| Kamer | Concept | Moeilijkheid |
|---|---|---|
| 1 | Basic Types | ⭐ Makkelijk |
| 2 | Type Inference | ⭐ Makkelijk |
| 3 | Interfaces | ⭐⭐ Medium |
| 4 | Optional Properties | ⭐⭐ Medium |
| 5 | Union Types | ⭐⭐ Medium |
| 6 | Type Aliases | ⭐⭐ Medium |
| 7 | Functies Typen | ⭐⭐⭐ Moeilijk |
| 8 | Boss Room (alles samen) | ⭐⭐⭐ Moeilijk |
Studenten fixen TypeScript code in elke kamer. Als alles compiled, krijgen ze de escape code: TYPE-SAFE-CODE-LOCK-OPEN-DOOR-FREE-DOM!
Huiswerk (2 uur)
JS → TypeScript Converter
Studenten krijgen een werkend JavaScript project (4 bestanden: users, products, orders, utils) en moeten alles omzetten naar TypeScript:
- Interfaces schrijven voor alle objecten
- Union types voor statussen en categorieën
- Functies volledig typen
- Geen
anytoegestaan - Tests (al in TypeScript) moeten slagen
Verificatie: npm run check (0 errors) + npm test (alle tests groen)
Leerdoelen
Na deze les kan de student:
- Uitleggen waarom TypeScript waardevol is voor developers
- Basic types gebruiken (string, number, boolean, arrays)
- Type inference begrijpen en toepassen
- Interfaces en type aliases schrijven
- Union types en literal types gebruiken
- Optional properties en functies typen
- TypeScript errors lezen en oplossen met Cursor