94 lines
2.8 KiB
Markdown
94 lines
2.8 KiB
Markdown
# 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 `any` toegestaan
|
|
- 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
|