# Les 4: TypeScript Fundamentals - Docenttekst

## Lesgegevens

| Aspect | Details |
|--------|---------|
| **Lesserie** | AI Developer Curriculum (NOVI Hogeschool) |
| **Lesnummer** | 4 van 18 |
| **Onderwerp** | TypeScript Fundamentals - Part 1 |
| **Duur** | 120 minuten (incl. pauze van 10 min) |
| **Doelgroep** | Beginners JavaScript/React, ervaring met Cursor |
| **Learning Outcomes** | Basis TypeScript begrip; types annoteren; interfaces/types definiëren; fouten lezen en begrijpen |
| **Voorgaande Les** | Les 3: Cursor als AI Code Editor (met debug challenges) |
| **Volgende Les** | Les 5: TypeScript + React (props, useState, event handlers) |

---

## Context & Voorbereiding

### Waarom Dit Moment in de Curriculum?

In Les 3 hebben studenten **Cursor** leren kennen en hebben gezien hoe een AI-assistent code schrijft en debugt. Heel cruciaal: ze hebben gezien dat Cursor code in **TypeScript** schrijft, niet in gewone JavaScript. Dit is het perfecte moment om drie dingen duidelijk te maken:

1. **TypeScript is standaard** — Niet iets exotisch. Next.js? TypeScript. React in 2026? TypeScript. Alle moderne web development? TypeScript.
2. **Types zijn geen luxury** — In Les 3 hebben ze AI-gegenereerde code debuggen. Types helpen daar massaal mee.
3. **De pijn voorkomen** — Runtime errors zijn heel pijnlijk. TypeScript vangt fouten VOORDAT je code runt.

### Wat Weten de Studenten Al?

Na Les 1-3 hebben studenten:
- Basiskennis **JavaScript** (variabelen, functies, arrays, objecten)
- Ervaring met **Cursor** en hoe het code genereert
- Inzicht in **debugging** (Les 3 hard challenge: bugs vinden in spaghetti code)
- Basis begrip van **React** (components, state, events)
- Gewend aan **code lezen en verstaan**

Dit is een sterke basis. Ze snappen al hoe code werkt; nu leren ze hoe je **voorkómt** dat het fout gaat.

### Lesdoel in Eén Zin

"Begrijpen dat TypeScript fouten vroeg vangt, en kunnen basis types, interfaces en functies typen."

### Praktische Setup

Studenten hebben nodig:
- **Cursor** (al geïnstalleerd van Les 3)
- **Node.js** geïnstalleerd
- De **TypeScript Escaperoom** zip-file (zie Blok 6)

Zelf als docent:
- Cursor open met een .js en .ts bestand side-by-side (voor live demo in Blok 2)
- TypeScript Escaperoom project klaar op je scherm
- Koppelingen naar moodle/Canvas voor huiswerk (Les 5)

---

## Blok 1: Welkom & Terugblik (10 minuten)

**Doel:** Energie creëren, Les 3 verbinden aan Les 4, het "why" instellen.

### Openen (2 min)

Kom de zaal in met energie.

> "Goedemorgen! Goed om jullie weer te zien. Vorige week: debug challenge. Wie had de hard versie gedaan? Kom eens van je stoel!"

Laat studenten die de hard versie hebben gedaan opstaan. Applaudisseer. Stel een paar korte vragen:

- "Was het lastig? Ja? Precies. Hoe voelde het om die bugs te vinden?"
- "Hoeveel tijd hebben jullie eraan besteed?"

Dit doet twee dingen:
1. Maakt duidelijk dat debugging work is (en TypeScript helpt daar tegen)
2. Bouwt community — iedereen snapt dat Les 3 pittig was

### Terugblik: Van Cursor Naar TypeScript (5 min)

> "Oké, vorige week jullie gezien hoe Cursor code schrijft. Cursor genereert code, jullie fixen bugs, alles werkt. Maar hier is de vraag: in welke TAAL schrijft Cursor? JavaScript?"

Laat ze antwoorden. (Waarschijnlijk weten ze het niet zeker.)

> "TypeScript! Alles wat Cursor schrijft — het is TypeScript. En jullie hebben heel soms `interface` gezien, `type` gezien, punt-punt-punt. Vandaag gaan we dát ontcijferen. Vandaag leren jullie TypeScript."

Schrijf op het bord (of deel-screen):

```
Les 3: Cursor schrijft code (TypeScript)
Les 4: We begrijpen TypeScript (waarom? hoe?)
Les 5: We combineren TypeScript + React
```

### Vandaag's Plan (3 min)

Deel het plan:

**Eerste helft (tot 10:30):**
- Waarom TypeScript? (live demo!)
- Basic types
- Interfaces & Type Aliases
- Functies typen
- Intro TypeScript Escaperoom

**Pauze (10 minuten)**

**Tweede helft:**
- Jullie gaan aan de slag met de Escaperoom (75 minuten)
- Ik loop rond en help
- Afsluiting: recap, huiswerk, preview Les 5

> "Deze les is 50-50: theorie en praxis. Niet veel slides. Veel live coding, veel doen."

**Energietip:** Dit moment lijkt klein, maar bepaalt de sfeer van de hele les. Je bent enthousiast, betrokken, duidelijk. Studenten volgen.

---

## Blok 2: Waarom TypeScript? (15 minuten)

**Doel:** Het "aha!" moment creëren. Studenten moeten voelen waarom TypeScript nodig is.

### Setup: Live Demo in Cursor (5 min)

Zorg dat je scherm zichtbaar is (beamer/Zoom share). Open Cursor.

**Stap 1: Maak een .js bestand**

```bash
touch demo.js
```

Open het en schrijf:

```javascript
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("tim"));
console.log(greet(42));
```

> "Zie je dat? Een simpele functie. Twee keer aanroepen. Eén keer met een string, eén keer met het getal 42."

Wacht, maak oogcontact.

> "Vraag: ziet de editor een probleem?"

(Waarschijnlijk niet — laat ze zien dat er geen rode squiggles zijn.)

> "Nope. Geen error. Cursor denkt: alles oké."

**Stap 2: Run het**

```bash
node demo.js
```

Output:

```
Hello, TIM
TypeError: name.toUpperCase is not a function
```

> "KABOOM. Runtime error. Het werkt tot regel 7... dan crash. Waarom? Omdat 42 geen string is. 42 heeft geen `.toUpperCase()`."

Maak weer oogcontact.

> "Dat is het probleem met JavaScript. De editor ziet het niet aankomen. Pas TIJDENS het runnen snapt het: oh nee, fout."

**Stap 3: Hetzelfde in TypeScript**

```bash
mv demo.js demo.ts
```

(Of maak een nieuwe demo.ts.)

Schrijf hetzelfde:

```typescript
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("tim"));
console.log(greet(42));
```

> "Zelfde code. Nu TypeScript."

Wacht. Kijk naar regel 5.

> "Zie je dat? Rode squiggles onder 42. TypeScript zegt: nope, hier klopt iets niet."

Click op de error:

> "TypeScript zegt: 'Argument of type number is not assignable to parameter of type any.' Vertaald: je geeft een getal waar een string hoort."

Nu fix het:

```typescript
function greet(name: string) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("tim"));
console.log(greet(42)); // RODE SQUIGGLE — METEEN ZICHTBAAR
```

> "Nu TypeScript ziet het DIRECT. Regel 5? Fout. Niet 'later als je runt'. NU AL. Dat is het superkracht van TypeScript."

Run het:

```bash
npx ts-node demo.ts
```

Output:

```
Hello, TIM
Error: Argument of type 'number' is not assignable to parameter of type 'string'.
```

Of beter: laat Cursor het fixen met Cmd+K:

> "Kijk, ik klik op regel 5 met de error, ik druk Cmd+K, ik zeg 'fix this TypeScript error'..."

Cursor suggereert:

```typescript
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("tim"));
// console.log(greet(42)); // removed this problematic call
```

> "Cursor snapt het probleem en fixes het. Maar het belangrijke: TypeScript vangt het VOORDAT je code runt."

### De 4 Voordelen van TypeScript (8 min)

Nu de theorie. Schrijf dit op (of deel-screen):

```
1. Fouten VROEG vangen
2. Betere autocomplete & IDE ondersteuning
3. Code wordt zelf-documenterend
4. AI tools snappen het beter
```

#### 1. Fouten VROEG Vangen

> "Zoals je net zag. In JavaScript: fouten in runtime. In TypeScript: fouten in je editor. Veel sneller feedback loop."

**Voorbeeld:**

```typescript
const user = { name: "Anna", age: 25 };
console.log(user.emali); // RODE SQUIGGLE — typo in 'email'
```

TypeScript ziet meteen: `Property 'emali' does not exist on type '{ name: string; age: number; }'`.

> "Stel je voor: je hebt een functie met 100 regels. Ergens zit een typo. In JavaScript: je runt het en het breekt 3 uur later in productie. In TypeScript: je ziet het meteen in je editor."

#### 2. Betere Autocomplete

Demo in Cursor. Maak een user object:

```typescript
const user = {
  name: "Tim",
  email: "tim@novi.nl",
  isStudent: true,
  courses: ["TypeScript", "React"]
};

// Nu typ: user.
```

Laat ze zien dat als je `user.` typt, Cursor METEEN alle properties suggereert:

```
name
email
isStudent
courses
```

> "Zien? TypeScript weet EXACT welke properties `user` heeft. Cursor autocomplete? Ongelofelijk. Geen typos, geen raden."

In JavaScript zou Cursor veel minder weten.

#### 3. Code Wordt Zelf-Documenterend

```typescript
// Slechts JavaScript:
function createUser(id, name, email) {
  return { id, name, email };
}

// TypeScript:
interface User {
  id: number;
  name: string;
  email: string;
}

function createUser(id: number, name: string, email: string): User {
  return { id, name, email };
}
```

> "Zie je? De TypeScript versie: meteen duidelijk. Welke types gaan erin? Wat komt eruit? Geen giswerk. Je leest het."

#### 4. AI Tools Snappen het Veel Beter

Dit is belangrijk voor hun toekomst.

> "Jullie gaan Cursor gebruiken. ChatGPT gebruiken. En die tools? Die snappen TypeScript VEEL beter dan plain JavaScript. Als je Cursor zegt 'maak een React component', en je hebt types, Cursor genereert meteen beter code. Minder bugs, betere structuur."

### Context: Dit is de Standaard (2 min)

> "Quick reality check. Werken jullie straks bij een bedrijf dat niet TypeScript gebruikt? Nee. Nou ja, misschien als het heel erg legacy is. Maar alles moderne? Next.js, React, Angular, Vue — standaard TypeScript. Niet optioneel. Standaard."

Rondkijken.

> "Dus: dit is niet iets grappigs wat we vandaag leren. Dit is wat je GAAT gebruiken. Elk project. Elk jaar. Goed om het nu al begrepen te hebben."

---

## Blok 3: Basic Types & Type Inference (15 minuten)

**Doel:** Studenten kunnen basis types annoteren en begrijpen type inference.

### Live Coding: Basis Types (8 min)

Open Cursor. Nieuw bestand: `types-demo.ts`.

> "Oké, eerst basics. Wat zijn types?"

Schrijf:

```typescript
let name: string = "Tim";
let age: number = 25;
let isStudent: boolean = true;
```

> "Dit zijn de drie basis types: string, number, boolean. Super eenvoudig. Je zegt: 'Deze variable, het is een string.' TypeScript zegt: 'Oké, onthouden.'"

Laat zien:

```typescript
let name: string = "Tim";
name = 42; // RODE SQUIGGLE
```

> "Als je later probeert 42 in `name` te stoppen, TypeScript zegt: nope, name is string, geen number."

Nu arrays:

```typescript
let scores: number[] = [90, 85, 88];
let tags: string[] = ["typescript", "react", "javascript"];
```

> "Arrays zijn hetzelfde. `number[]` betekent: een array van numbers. Alleen nummers erin."

Demo:

```typescript
let scores: number[] = [90, 85, 88];
scores.push("oops"); // RODE SQUIGGLE
```

Laat zien wat TypeScript zegt: `Argument of type 'string' is not assignable to parameter of type 'number'`.

### Type Inference: TypeScript is Slim (5 min)

Nu het interessante deel.

```typescript
let message = "Hello";
```

> "Geen type annotering. Maar kijk..."

Hover over `message` in je editor. Tooltip verschijnt:

```
(let) message: string
```

> "TypeScript weet het al! Zonder dat ik het zei. Omdat ik "Hello" toewijzig — een string — TypeScript snapt: oh, dit is een string variable."

Dit heet **type inference**.

```typescript
let count = 5; // TypeScript: number
let active = true; // TypeScript: boolean
let items = [1, 2, 3]; // TypeScript: number[]
```

> "Dit is geniaal. Je hoeft niet ALLES te typen. TypeScript is slim genoeg om het zelf uit te vogelen."

### Rule of Thumb: Wanneer Annoteren? (2 min)

> "Dus: moet je alles typen?"

Antwoord:

**Ja typen:**
- **Function parameters** — altijd
- **Function return types** — altijd (of laat TypeScript infer als het duidelijk is)

**Nee typen:**
- **Variable assignments** — let TypeScript infer, tenzij het onduidelijk is

```typescript
// GUT:
function add(a: number, b: number): number {
  return a + b;
}

const result = add(5, 3); // TypeScript weet: result is number

// SLECHT:
const result: number = add(5, 3); // Redundant
```

> "Onthoud: functies typen is verplicht. Variables? Let TypeScript denken."

---

## Blok 4: Interfaces & Type Aliases (15 minuten)

**Doel:** Studenten kunnen objecten beschrijven met interfaces en type aliases.

### Interfaces: De SHAPE van Objecten (7 min)

> "Wat als je een object hebt? Hoe beschrijf je dat?"

Live demo:

```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Anna",
  email: "anna@novi.nl"
};
```

> "Interface zeggen: 'Een User object heeft PRECIES deze properties, met DEZE types.' Niks meer, niks minder."

Demo de autocomplete:

```typescript
const user: User = {
  // Typ hier...
  // Cursor suggereert: id, name, email
};

// Later:
user.id; // number
user.name; // string
user.email; // string
user.phone; // RODE SQUIGGLE — bestaat niet
```

> "Zien? Cursor weet: User heeft deze velden. Alleen deze. Geen typos."

### Optional Properties (2 min)

```typescript
interface User {
  id: number;
  name: string;
  email: string;
  phone?: string; // OPTIONEEL
}

const user1: User = {
  id: 1,
  name: "Anna",
  email: "anna@novi.nl"
  // phone niet nodig
};

const user2: User = {
  id: 2,
  name: "Bob",
  email: "bob@novi.nl",
  phone: "+31612345678"
};
```

> "Het `?` betekent optional. Misschien heb je een phone, misschien niet. TypeScript accepteert beide."

### Type Aliases: Union Types (4 min)

Interfaces zijn voor objecten. Maar wat als je iets anders wilt typen?

```typescript
type Status = "pending" | "approved" | "rejected";

const order: Status = "pending"; // ✓ oké
const order: Status = "shipped"; // RODE SQUIGGLE
```

> "Type aliases: je definieert een naam voor iets. Hier: Status kan ALLEEN deze drie strings zijn. Niet willekeurig. DEZE drie."

Dit heet **union type** — een waarde kan ÉÉN van verschillende opties zijn.

```typescript
type Response = string | number | boolean;

const answer: Response = "yes"; // ✓
const answer: Response = 42; // ✓
const answer: Response = true; // ✓
const answer: Response = {}; // RODE SQUIGGLE — object mag niet
```

### Interface vs Type: Wat is het Verschil? (2 min)

Dit is een veel gestelde vraag. Hou het simpel:

> "Interface of Type? Goeie vraag. Praktisch antwoord: **Interface voor objecten. Type voor alles anders.**"

```typescript
// Interface
interface User {
  id: number;
  name: string;
}

// Type — alles ander
type Status = "pending" | "approved" | "rejected";
type ID = number | string;
type Config = { host: string; port: number };
```

> "Eerlijk? Voor 90% van wat jullie gaan doen, is het niet superkritiek. Kies er één en wees consistent. Ik zeg: interview voor objects, type voor alles. Maar je docent volgende week zegt: altijd type. Both zijn oké."

**Key insight:**

> "Belangrijk: beide zijn TypeScript. Allebei geven TypeScript dezelfde informatie. Het is 'preference'."

---

## Blok 5: Functies & Fouten (10 minuten)

**Doel:** Studenten kunnen functies typen en herkennen veel voorkomende TypeScript fouten.

### Functies Typen (4 min)

```typescript
// Regular function
function add(a: number, b: number): number {
  return a + b;
}

// Arrow function
const multiply = (a: number, b: number): number => a * b;

// With console.log (return type: void)
function logUser(user: User): void {
  console.log(user.name);
}

// Optional parameters
function greet(name: string, greeting?: string): string {
  return greeting ? greeting + ", " + name : "Hello, " + name;
}
```

> "Pattern: types IN (parameters), type OUT (return type). Altijd. Functies zijn waar types het meest helpen."

### Veel Voorkomende TypeScript Fouten (6 min)

Studenten zullen deze zien. Laat ze kennen:

#### Fout 1: Type 'X' is not assignable to type 'Y'

```typescript
let count: number = "hello"; // RODE SQUIGGLE
// Type 'string' is not assignable to type 'number'
```

> "Vertaald: je probeert een string in iets te stoppen dat number moet zijn. Mismatch."

Fix: zorg dat het type klopt.

```typescript
let count: number = 5; // ✓
```

#### Fout 2: Property 'X' does not exist on type 'Y'

```typescript
const user = { name: "Tim", age: 25 };
console.log(user.emali); // RODE SQUIGGLE
// Property 'emali' does not exist
```

> "Typo. Je schreef 'emali' maar het property heet 'email'."

Fix: spel het goed.

```typescript
console.log(user.email); // ✓ (als het property bestaat)
```

#### Fout 3: Object is possibly 'undefined'

```typescript
function getUser(): User | undefined {
  // misschien geeft dit undefined terug
}

const user = getUser();
console.log(user.name); // RODE SQUIGGLE
// Object is possibly 'undefined'
```

> "TypeScript zegt: dit kan undefined zijn. Je mag niet zomaar `.name` eroppen. Wat als het undefined is?"

Fix: check eerst:

```typescript
const user = getUser();
if (user) {
  console.log(user.name); // ✓ nu weet TypeScript: user is niet undefined
}
```

### Cursor Helpt (1 min)

> "Deze fouten gaan jullie VEEL tegenkomen. Dat is GOED! TypeScript beschermt je."

En Cursor helpt ook:

> "Als je een rode squiggle ziet, plaats je cursor erop, druk Cmd+K (Command+K op Mac), en zeg: 'fix this error' of 'explain this error'. Cursor geeft uitleg en suggesties."

---

## Blok 6: Hands-On Intro — TypeScript Escaperoom (5 minuten)

**Doel:** Context voor de praktijkles. Studenten snappen wat ze gaan doen.

### Wat is de Escaperoom?

> "Oké, theorie klaar. Nu gaan jullie zelf TypeScript leren door TE DOEN."

Toon op je scherm (of deel-screen) een preview van het project:

```
TypeScript Escaperoom
├── Room 1: Basic Types
├── Room 2: Interfaces
├── Room 3: Type Inference
├── Room 4: Functions
├── Room 5: Union Types
├── Room 6: Optional Properties
├── Room 7: Function Overloading
└── Room 8: Challenge Room

GOAL: Solve all 8 rooms, collect the escape code
```

> "Het concept: 8 kamers. Elke kamer heeft TypeScript puzzels. Jij lost ze op. Als je een kamer good solved, krijg je een escape code fragment. Alle 8 fragments bij elkaar? Je hebt het escape code."

### Hoe Werkt het?

> "Je opent een TypeScript bestand. Er staan 'take mee comment' in. Jij vult aan wat ontbreekt. Je runt het. TypeScript compiler zegt: 'Fout!' of 'Oké!' Als het oké is, je krijgt een code. Die codes samelen naar het einde toe."

Voorbeeld tonen:

```typescript
// Room 1: Basic Types
// TODO: Create a variable 'age' of type number and assign it the value 25
// TODO: Create a variable 'name' of type string and assign it "Alice"
// TODO: Create a variable 'isActive' of type boolean and assign it true

// Solution:
let age: number = 25;
let name: string = "Alice";
let isActive: boolean = true;

// If correct, you'll see: ESCAPE_CODE_1: ABC123XYZ
```

### Setup Instructions (2 min)

> "Stappen om aan de slag te gaan:"

Schrijf dit op (of deel-screen):

1. **Download de zip**: [link naar moodle/Canvas]
2. **Extract het**: `unzip typescript-escaperoom.zip`
3. **Open in Cursor**: `cursor .` (in de folder)
4. **Install packages**: `npm install`
5. **Begin met kamer 1**: Open `room-1.ts`
6. **Lees de TODOs**, vul aan, spaar op (Ctrl+S of Cmd+S)
7. **Run**: `npm run room:1` (of wat de instructie zegt)
8. **Escape code?** Als je het goed hebt: je krijgt een code te zien

> "Alle 8 kamers doen? Einde van de les heb je het master escape code."

### Tips & Tricks (2 min)

> "Paar tips terwijl je aan het werk bent:"

1. **Hover over errors** — plaats je cursor op een rode squiggle, en je ziet uitleg
2. **Autocomplete is je vriend** — als je iets typt, Cursor suggereert. Gebruik het!
3. **Cursor Cmd+K** — als je echt vast zit, plaats cursor op error, druk Cmd+K, zeg: "explain this TypeScript error" of "fix this"
4. **Denk eerst zelf** — probeer EERST zelf uit te vogelen. Pas dan vragen stellen of Cursor om hulp vragen.
5. **Leesfouten** — de TODOs zijn heel precies. Lees goed wat je moet doen.

> "Vragen? Ik loop rond. Steek je hand op."

---

## PAUZE (10 minuten)

Studenten gaan naar buiten / hebben een break. Jij:
- Zorg dat je scherm klaar is voor de volgende ronde
- Controleer je eigen laptop/connectie
- Heb de Escaperoom zip klaar
- Bereid je voor op rondlopen (notieblok, pen)

---

## Blok 7: Hands-On Praktijk (75 minuten)

**Doel:** Studenten werken aan de TypeScript Escaperoom. Jij helpt, observeert, stimuleert.

### Opzet (0-5 min)

> "Welkom terug. Iedereen klaar? Download de zip, extract, `npm install`, open in Cursor?"

Zorg dat iedereen de eerste room open heeft. Start hen allemaal op hetzelfde moment:

> "We starten met Room 1 op hetzelfde moment. 3... 2... 1... GO!"

### Rondlopen & Helpen (5-70 min)

Nu is het jouw taak om:

#### A. Observeren
Walk door de zaal. Kijk naar schermen. Wie zit vast? Wie is snel klaar?

#### B. Helpen (zonder ant te geven!)

Dit is BELANGRIJK. Je helpt, maar je geeft niet de antwoord.

**Voorbeeld — student zit vast op Room 3:**

❌ FOUT:
> "Oké, je schrijft `let age: string = 25;` — nee, dit is fout. Je moet `number` schrijven, niet `string`."

✓ GOED:
> "Oké, laten we kijken. De TODO zegt: 'Create age of type number.' Wat zegt TypeScript nu? Kijk op je scherm... ah, zie je dat: 'Type string is not assignable to type number.' Wat denk jij: is 25 een string of een number?"

Student: "Oh, 25 is een number!"

> "Precies. Dus welk type moet age zijn?"

Student: "Number!"

> "Yes! Probeer het."

Dit is Socratisch onderwijs. Je stelt vragen, student vindt antwoord.

#### C. Stimuleren

**Voor trage studenten:**
- Halveway Room 3 (rond 11:00), check: "Hoe gaat het? Stuck? Laten we naar de error kijken. Wat zegt TypeScript?"
- Rond 11:30: "Je bent op Room 4. Goed! Volgende."

**Voor snelle studenten:**
- Rond 10:45: "Helemaal klaar? Nice! Hier: bonus challenge." (zie hieronder)
- Zorg dat ze niet *wachten* — ze kunnen altijd meer leren.

#### D. Veelvoorkomende Problemen & Oplossingen

**Probleem 1: "Ik snap niet wat de TODO vraagt"**

Lees de TODO samen met de student hardop voor. Zeg in je eigen woorden wat het vraagt. Een TODO als:

```typescript
// TODO: Create an interface User with properties id (number), name (string), email (string)
```

Jij: "Dus: je maakt een interface. Het heet User. Het heeft drie properties: id die een number is, name die string is, email die string is. Wat schrijf je?"

**Probleem 2: "Ik krijg rood overal, ik snap het niet"**

> "Laten we stap voor stap gaan. Wat is de EERSTE rode squiggle?"

Focus op één fout tegelijk.

**Probleem 3: "Kan ik Cursor gebruiken om dit op te lossen?"**

Ja, maar:

> "Je mag Cursor Cmd+K gebruiken om het uit te leggen of te fixen. Maar: probeer EERST zelf. Cursor is je trainer, niet je antwoordboek."

**Probleem 4: "Ik ben in een ander room en ik snap er niks van"**

> "Laten we teruggaan naar Room 5 of 6 (wat je wél snapte). Wat zat daar? Oké, dit room is hetzelfde idee, maar..."

Haak aan bij wat ze al kennen.

### Check-in Momenten

Plan drie korte check-ins:

**10:45 — Eerste Check (halveway)**
- Iedereen op Room 2 of 3?
- Wie has probleem en waar?
- Energieniveau OK?

Bijvoorbeeld:

> "Iedereen, 2 seconden. Hoe ver zijn we? Room 1? 2? Mooi! Wie zit vast? [student steekt hand op] Laten we daar even naar kijken."

**11:00 — Tweede Check**
- Iedereen voortgang?
- Zijn studenten "stuck in a loop" (dezelfde error, keer op keer)?

**11:30 — Laatste Check**
- 15 minuten tot einde. Wie is klaar? Wie heeft nog 1-2 kamers?
- Snelle studenten: "Alle 8 gedaan? Epic! Hier extra challenge."

### Bonus Challenges (voor Snelle Studenten)

Voor studenten die alle 8 kamers hebben gedaan (normaal zijn dit de snelsten):

**Bonus 1: Generics** (gaat verder dan les 4)
```typescript
// Create a generic function that works with any type
function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

const first = getFirstElement([1, 2, 3]); // number
const firstStr = getFirstElement(["a", "b"]); // string
```

**Bonus 2: Advanced Interfaces**
```typescript
// Inheritance & extending
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}
```

**Bonus 3: Type Guards**
```typescript
function processInput(input: string | number) {
  if (typeof input === "string") {
    console.log(input.toUpperCase());
  } else {
    console.log(input + 10);
  }
}
```

Zeg:
> "Dit is Les 5 material. Maar je bent snel. Probeer het. Vraag Cursor!"

### Energy Management

Dit is een lange blok (75 min). Zorg voor energie:

- **Rond 11:15**: "Iedereen, 30 seconden stretchen. Sta op als je zit."
- **Rond 11:35**: "Laatste 10 minuten! Zet ineens aan!"

---

## Blok 8: Afsluiting (15 minuten)

**Doel:** Recap, validatie, huiswerk, toekomst.

### Wie Heeft het Escape Code? (3 min)

> "Oké, allen! Wie heeft het complete escape code? Alle 8 kamers?"

Laat studenten hun code tonen. Applaudisseer.

> "Nice! Goed werk. Wie 6 kamers gedaan? 5? 4? Allemaal goed! Volgende week maken jullie het af, en dan gaan we dieper."

### Snelle Recap: De 3 Key Takeaways (5 min)

Zet dit op het bord (of deel-screen):

```
1. Types voorkomen RUNTIME ERRORS
2. Interfaces beschrijven OBJECTEN
3. Functies ALTIJD typen
```

Ga door elk:

**1. Types voorkomen runtime errors**
> "Onthouden: je JavaScript code kan 3 uur later breken in productie. TypeScript zagt: nope, hier is het fout, FIX het NU. In je editor."

**2. Interfaces beschrijven objecten**
> "Object nodig? Interface. Object zegt: dit object heeft deze form. Dit property, deze type. Cursor gebruikt het om je te helpen."

**3. Functies ALTIJD typen**
> "Rule: functie parameters IN, functie return type OUT. Altijd annoteren. Variables? Let TypeScript infer. Maar functies? Altijd."

### Huiswerk (4 min)

> "Huiswerk voor volgende week:"

Schrijf op (en stuur ook via email/Canvas):

```
HW Les 4:
1. Finish all 8 TypeScript Escaperoom rooms (if not done today)
2. Document your escape code in a .txt file
3. Prepare for Les 5: we combine TypeScript with React
   - Read: React + TypeScript basics (link in Canvas)
   - Think: How would you type React props?
```

> "Room 1-8 moet af. Als je niet klaar bent vandaag, je hebt de week om het af te maken. Volgende week bouw je hierop voort."

### Preview Les 5: TypeScript + React (3 min)

> "Volgende week: Les 5. Wat gaan we doen?"

Schrijf op:

```
Les 5: TypeScript + React
- Typing React Props
- useState with Types
- Event Handlers
- Building a small React project with TS
```

> "Jullie weten nu: types voorkomen fouten. Functies typen. Interfaces. Volgende week: React components. Props zijn... functies. Dus: props typen. useState? Het returned state EN een setter — beide getypd. Events? Handlers getypd."

> "TypeScript + React = superkracht. Cursor snapt je code beter. Minder bugs. Betere autocomplete."

### Slotwoord (Energie) (1 min)

Oogcontact, glimlach.

> "Jullie hebben vandaag veel geleerd. TypeScript lijkt misschien veel, veel rules. Maar denk eraan: elke rode squiggle is TypeScript die zegt: 'Hé, ik help je.' Not iets what pissed off is. It's helpful."

> "Volgende week nog beter. Vragen? Slack, email, ik ben er. Goed gedaan vandaag."

Applaus.

---

## Praktische Tips voor de Docent

### Setup Checklist (Voor Jezelf)

- [ ] Cursor geïnstalleerd en werkt
- [ ] Twee voorbeeldbestanden klaar: demo.js en demo.ts (voor Blok 2)
- [ ] TypeScript Escaperoom zip klaar om te delen
- [ ] Npm install hebben gedaan in de escaperoom (opdat je het kunt runnen)
- [ ] Beamer/screen sharing testen
- [ ] Audio testen (voor demos)
- [ ] Een backup plan: als iemand's installatie niet werkt, heb jij hem al draaien

### Energie en Ritme

**Sterke openers:**
- "Vorige week: debug challenge. Wie had het super lastig?"
- "TypeScript. Klinkt ingewikkeld. Is het niet."
- "Fout vangen VOORDAT je code runt. Dat is de superpower."

**Momentum behouden:**
- Niet te veel slides. Veel live demo.
- Move rond terwijl je praat. Niet statisch.
- Maak oogcontact. Glimlach. Show enthousiasme.

**Energiedalingen voorkomen:**
- Na live demo (10 min) → iedereen doet iets (hands-on start)
- Pauze op juiste moment (na 55 min)
- Check-ins om focus terug te krijgen

### Veelgestelde Studentenvragen

**Q: "Waarom TypeScript en niet JavaScript?"**
A: "JavaScript is oké voor kleine projecten. TypeScript is oké voor alles, groot en klein. En alle moderne bedrijven gebruiken TypeScript. Future-proofing."

**Q: "Moet ik elk variable typen?"**
A: "Nee. Functies: ja. Variables: let TypeScript infer, tenzij onduidelijk. Thumb rule: minder typen = minder code, zelf TypeScript doet het werk."

**Q: "Interface of Type?"**
A: "90% van het moment: maakt niet uit. Kies er één, wees consistent. Ik zeg: interface voor objects, type voor alles. Maar beide zijn oké."

**Q: "Kan ik Cursor gebruiken?"**
A: "Ja! Zeker! Maar: denk EERST zelf. Cursor is trainer, niet antwoordboek. Denk 5 min, dan Cursor als je vast zit."

**Q: "Dit is heel veel regels..."**
A: "Ja, TypeScript has veel regels. Maar: elke regel beschermt je. Elke regel voorkomt bugs. Waard."

### Troubleshooting

**Probleem: Npm install faalt**
- Check: `node -v` en `npm -v` installed?
- Als niet: snel tutorial of use Cursor terminal
- Als ja: `npm cache clean --force` en retry

**Probleem: Cursor opens niet**
- Reboot?
- Reinstall?
- Fallback: VS Code (gratis, heeft ook TypeScript support)

**Probleem: TypeScript compiler errors maken niemand blij**
- Normalize het: "Dit is GOED. Dit is TypeScript wat je beschermt."
- Laat zien: hetzelfde in JavaScript zou crash zijn in productie.

**Probleem: Iemand is ECHT vast en depressed**
- One-on-one. Lees de TODO samen. Stap voor stap.
- "Dit IS lastig. First time TypeScript. Normal dat je vast zit."
- Geef niet het antwoord; guide ze.
- Zeg: "Room 7-8 is bonus. Finish 1-6, je bent golden."

---

## Post-Les Checklist

**Direct na de les:**
- [ ] Weet jij wie alle 8 kamers gedaan heeft?
- [ ] Noteer eventuele "stuck" punten (welke kamers waren lastig?)
- [ ] Hoe was energie? (1-10?)
- [ ] Feedback verzamelen (ask a few: "Wat was het lastigst vandaag?")

**Voorbereiding Les 5:**
- [ ] Huiswerk controleren (wie heeft Escaperoom afgemaakt?)
- [ ] React + TypeScript slides/demo voorbereiding
- [ ] Props-typing voorbeeld code klaar
- [ ] useState example met types klaar
- [ ] Event handler examples klaar

---

## Samenvatting Lesdoelen

Na deze les kunnen studenten:

✅ **Begrijpen waarom TypeScript nodig is**
- Runtime errors voorkomen
- Betere IDE ondersteuning
- Code zelf-documenterend
- AI tools helpen beter

✅ **Basis types annoteren**
- `string`, `number`, `boolean`
- Arrays: `number[]`, `string[]`
- Type inference snappen

✅ **Interfaces en Types definiëren**
- Interface voor object shapes
- Type voor unions en andere
- Optional properties

✅ **Functies typen**
- Parameters in, return type out
- Arrow functions
- Void return type

✅ **TypeScript errors lezen en begrijpen**
- Type mismatch errors
- Property not exist errors
- Possibly undefined errors

✅ **Cursor gebruiken voor TypeScript hulp**
- Hover over errors
- Cmd+K voor explain/fix

---

## Notes voor Toekomstige Lessen

**Les 5 Building Blocks:**
- Type deze les: studenten kennen `interface`, `type`, basis annoteren
- React Props: `interface Props { name: string; age: number; }` — students get it
- useState: `const [count, setCount] = useState<number>(0)` — students know generics from this prep

**Les 6+ Context:**
- TypeScript is nu het water dat iedereen in zwemt
- Alle code is getypd
- Students expect autocomplete

---

## Appendix: Code Snippets Klaar

Hier zijn alle code snippets voor de les, klaar om te copy-pasten:

### Blok 2 Demo
```javascript
// demo.js
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("tim"));
console.log(greet(42));
```

```typescript
// demo.ts
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("tim"));
// console.log(greet(42)); // TypeScript error
```

### Blok 3 Types
```typescript
let name: string = "Tim";
let age: number = 25;
let isStudent: boolean = true;

let scores: number[] = [90, 85, 88];
let tags: string[] = ["typescript", "react"];

let message = "Hello"; // type inference: string
let count = 5; // type inference: number

function add(a: number, b: number): number {
  return a + b;
}

const result = add(5, 3); // type inference: number
```

### Blok 4 Interfaces & Types
```typescript
interface User {
  id: number;
  name: string;
  email: string;
  phone?: string;
}

const user: User = {
  id: 1,
  name: "Anna",
  email: "anna@novi.nl"
};

type Status = "pending" | "approved" | "rejected";
type Response = string | number | boolean;

const orderStatus: Status = "pending";
const answer: Response = 42;
```

### Blok 5 Functions & Errors
```typescript
// Regular function
function add(a: number, b: number): number {
  return a + b;
}

// Arrow function
const multiply = (a: number, b: number): number => a * b;

// Void return
function logUser(user: User): void {
  console.log(user.name);
}

// Optional parameters
function greet(name: string, greeting?: string): string {
  return greeting ? greeting + ", " + name : "Hello, " + name;
}

// With type guard
function getUser(): User | undefined {
  // ...
}

const user = getUser();
if (user) {
  console.log(user.name); // ✓ safe
}
```

---

## Aantekeningen en Reflectie

**Na de les: Noteer:**
- Welke moment waren studenten het meest engaged?
- Welke kamers/onderdelen waren lastig?
- Wie heeft extra hulp nodig volgende week?
- Wat ging goed? Wat zou je volgende keer anders doen?

**Voorbeeld reflectie:**
- "Room 7 (function overloading) was te moeilijk. Next time: skip dat en zeg 'Les 6'."
- "Live demo in Blok 2 was superkrachtig — 5 min voor runtime error echt wow moment."
- "3 studenten stil achter. 1-op-1 help. Next time: meer pair programming?"

---

## Einde Docenttekst

Dit is je complete guide voor Les 4. Je hebt alles wat je nodig hebt:
- Wat je gaat zeggen (gedetailleerd)
- Hoe je het gaat doen (live demos)
- Code om te gebruiken
- Praktische tips
- Troubleshooting

Veel sterkte! TypeScript is een game changer voor je studenten. Ze zullen het voelen.

**Vragen? Contact me. Goed onderwijzen!**