# 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