novi-lessons/Les04-TypeScript-Fundamentals/Les04-Slide-Overzicht.md

Les 4: TypeScript Fundamentals - Slide Overzicht

Docentenhandleiding voor Tim

Welkom bij Les 4! Vandaag gaan we TypeScript introduceren - het moment waarop JavaScript echt volwassen wordt. We starten met het probleem dat TypeScript oplost, en daarna duiken we direct in de praktijk.

Timing: 180 minuten (3 uur) — ~55 min theorie, 15 min pauze, ~75 min hands-on, 15 min afsluiting.

---

Slide 1: Titel - "Les 4: TypeScript Fundamentals"

Op de Slide

• Grote titel: "Les 4: TypeScript Fundamentals"
• Subtitel: "Maak JavaScript sterker met types"
• Kleine visual: TypeScript logo (blauw)
• Datum: Les 4 van 18

Docentnotities

Begin energiek! "Jongens, we gaan vandaag het allerbelangrijkste ding leren die elke moderne JavaScript developer moet weten. Jullie hebben gisteren misschien al wat fouten gehad die lastig waren om te vinden - TypeScript lost dat op. We gaan vandaag ontdekken waarom bedrijven als Netflix, Airbnb, en Google TypeScript gebruiken.

Wie van jullie heeft al gehoord van TypeScript? Oké, vandaag gaat dat veranderen!"

---

Slide 2: Planning Vandaag

Op de Slide

• Blok 1 (30 min): Het Probleem & De Oplossing

  • Waarom TypeScript nodig is
  • Hoe het werkt in het ecosysteem

• Blok 2 (40 min): Type Basics

  • Basic types (string, number, boolean)
  • Arrays en Interfaces
  • Union types en Type Aliases

• Blok 3 (30 min): Hands-On Escaperoom

  • 8 kamers om door heen te gaan
  • Type fouten opsporen en fixen

Docentnotities

"Dit is onze agenda voor vandaag. We beginnen met de context - WAAROM gebruiken we TypeScript? Dat is superbelangrijk. Daarna leren we de basisvaardigheden om types te schrijven. En het mooiste: jullie gaan zelf aan de slag met een interactieve escaperoom waar je type fouten moet fixen.

Iedereen klaar? Laten we beginnen!"

---

Slide 3: Terugblik Les 3 - Cursor & Debugging

Op de Slide

• Screenshot van Cursor IDE
• Kleine code snippet met breakpoint
• Vraagsteken: "Hoeveel bugs hebben we voorkomen kunnen worden?"

Docentnotities

"Gisteren hebben we geleerd hoe we bugs opsporen met de debugger in Cursor. We zetten breakpoints, we keken naar variabelen, we snapten wat er misgaat. Super belangrijk, maar... dit was reactive debugging. We zoeken NADAT er al iets fout is gegaan.

TypeScript is iets speciaals: het is PREactive debugging. We stoppen fouten VOORDAT ze ontstaan - nog voor je code runt.

En: hoe ging die debug challenge? Wie heeft het kunnen oplossen? Goed gedaan! Dat was lastig. Maar met TypeScript wordt het veel makkelijker."

---

Slide 4: Het Probleem met JavaScript

Op de Slide

function calculateTotal(price, quantity) {
  return price * quantity;
}

const total = calculateTotal("25.99", 3);
console.log(total); // "25.99" + "25.99" + "25.99" = "25.9925.9925.99"

• Boven de code: rood kruisje "❌ Geaccepteerd door JavaScript"
• Onder: "Bij runtime descobt je een rare bug!"

Docentnotities

"Oké, hier is het probleem. Ik bel calculateTotal aan met een string in plaats van een getal. JavaScript zegt... niks. Geen fout. Maar als je het draait, is het totaal compleet fout!

Waarom? Omdat JavaScript dynamisch getypeerd is. Het zegt: 'Jij bent verantwoordelijk voor types, niet ik. Ik ga gewoon doen wat je zegt.'

En kijk: JavaScript voert dit uit en geeft je het verkeerde antwoord. Je debuggt je code, je kijkt naar je network requests, misschien denk je dat je backend kapot is... maar nee, de bug zit hier.

Dit soort fouten kunnen weken werk kosten. Elke developer in deze kamer heeft dit al eens meegemaakt."

---

Slide 5: De Oplossing: TypeScript

Op de Slide

function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

const total = calculateTotal("25.99", 3);
//                            ^^^^^^^^
// ❌ ERROR: Argument of type 'string' is not assignable to parameter of type 'number'

• Boven: "✅ TypeScript vangt dit bij compile time!"
• Verschil met vorige slide: rode squiggle onder de string

Docentnotities

"Nu met TypeScript. We zeggen: 'Hé, price moet een number zijn. quantity moet een number zijn. En deze functie geeft een number terug.'

Wat gebeurt er? TypeScript ziet deze aanroep en zegt: 'Wacht even... je geeft me een string en ik verwacht een number. Nope!'

Het mooie: dit gebeurt VOORDAT je code draait. Je ziet het rode squiggle in Cursor. Je fix het meteen. Geen runtime bugs, geen mysterieuze errors in je logs.

Dit is waarom TypeScript zo powerful is. Het voelt als een vriend die voortdurend over je schouder meekijkt en zegt: 'Ehm, dit gaat fout...'"

---

Slide 6: Waarom TypeScript? - 4 Voordelen

Op de Slide

Vier vakken met iconen en tekst:

1. 🐛 Fouten Voorkomen

   • Vind fouten VOOR je app draait
   • Spaar debugging tijd

2. 📝 Betere Documentatie

   • Types zijn documentatie
   • "Wat verwacht deze functie?"

3. 🚀 Autocomplete & IntelliSense

   • Cursor weet wat je wilt typen
   • 10x sneller coderen

4. 🛡️ Refactoring Veilig

   • Verander code met vertrouwen
   • TypeScript ziet als je iets breekt

Docentnotities

"Waarom gebruiken we dit eigenlijk? Laten we de vier grote wins opsommen:

Eerst: Fouten voorkomen. Dit hebben we net gezien. Je code runt niet meer met domme type fouten.

Tweede: Betere documentatie. Types zijn eigenlijk documentatie. Kijk naar een functie - je ziet exact wat het verwacht en geeft terug. Geen giswerk meer.

Derde: Autocomplete. Dit is echt magisch. Jullie gaan dit ervaren vandaag. Je typt person. en Cursor weet EXACT welke properties beschikbaar zijn. Veel sneller coderen.

Vierde: Veilig refactoring. Stel je hebt 50 plaatsen in je code die een bepaalde functie aanroepen. Je verandert die functie. TypeScript zegt meteen: 'Hé, je hebt nu 37 plaatsen die breuk zijn'. Je fix ze allemaal op een rij. Zonder TypeScript? Goedemiddag, productie bugs!

Dit is waarom Netflix, Google, Microsoft - allemaal gebruiken TypeScript."

---

Slide 7: TypeScript in het Ecosysteem

Op de Slide

• Grote TypeScript logo in het midden
• Pijlen naar omringende technologieën met logos:
  • Next.js (TypeScript default)
  • React (kan TypeScript)
  • Vue (kan TypeScript)
  • Svelte (TypeScript support)
  • Node.js (TypeScript via ts-node)
  • Deno (TypeScript first)

Tekst onderin: "TypeScript is de standaard, niet de uitzondering"

Docentnotities

"Hier is iets belanrijks: TypeScript is niet meer iets speciaals. Het is de industrie standaard.

Next.js? Maken jullie volgende les. TypeScript is er standaard in gebakken. React? Alle Enterprise React projecten gebruiken TypeScript. Vue? Svelte? Allemaal excellent support.

Zelfs Node.js heeft TypeScript support gebuild. Deno - die is van de maker van Node - is TypeScript first. Geen JavaScript, direct TypeScript.

Dit zegt: als je modern wilt programmeren, moet je TypeScript kennen. Het is niet optional meer, het is expected."

---

Slide 8: Basic Types - De Fundamenten

Op de Slide

// String
const name: string = "Alice";

// Number
const age: number = 25;

// Boolean
const isActive: boolean = true;

// any (vermijden!)
let anything: any = "whatever";
anything = 123; // Dit gaat altijd door

Tekstbox: "Vier basistypen. any is je vijand!"

Docentnotities

"Oké, de absolute basisvaardigheden. TypeScript heeft standaard types die je krijgt:

String - tekst. Easy. Number - getallen, zowel integers als floats. Boolean - true of false.

Dan is er any. Dit is het laziness keyword. any zegt: 'Ik weet niet wat dit is, doe maar wat je wilt.' Dat is het hele punt van TypeScript verpest. We gaan any zo veel mogelijk vermijden. Als ik any zie in jullie code... ja, we hebben een probleem!

Let op: je HOEFT niet altijd types te schrijven. TypeScript kan ze raden. Maar soms moet je ze expliciet zeggen. Dat zien we straks."

---

Slide 9: Arrays - Collecties Typen

Op de Slide

// Array notation 1: type[]
const numbers: number[] = [1, 2, 3];

// Array notation 2: Array<T>
const names: Array<string> = ["Alice", "Bob"];

// Gemengd - FOUT!
const mixed: number[] = [1, "twee", 3];
//                           ^^^^^^ ERROR!

// Arrays van objecten
const users: User[] = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

Kleurtje: beide notaties zijn equivalent, maar type[] is populairder

Docentnotities

"Arrays zijn collections. TypeScript wil weten WELK TYPE in de array zit.

Je kan zeggen: 'Dit is een array van numbers' met number[]. Of je kan zeggen Array<string> - beide doen hetzelfde. De eerste notatie is sneller om te typen.

Het mooie: als je een string in een number array probeert te stoppen, TypeScript zegt nee. Je ziet meteen het rood.

En ja, je kan arrays van objecten hebben. We zien straks interfaces, dan wordt dit echt nuttig."

---

Slide 10: Type Inference - TypeScript Raadt

Op de Slide

// TypeScript RAADT het type
const age = 25;
// age is nu: number

const userName = "Alice";
// userName is nu: string

// Je hoeft niet altijd expliciet te zijn
function greet(name) {
  //               ^^^^ Hier WIL je wel annotatie
  return `Hello, ${name}!`;
}

// BETER:
function greet(name: string): string {
  return `Hello, ${name}!`;
}

Tekstbox: "TypeScript raadt types. Maar functies? Die moeten explicit!"

Docentnotities

"Dit is cool en belangrijk: TypeScript is slim. Kijk naar age = 25. TypeScript ziet: 'Dit is een 25, dus number'. Ze hoeft niks te zeggen.

Hetzelfde met strings. Dit is type inference - TypeScript RAADT wat je bedoelt.

MAAR - en dit is groot - bij functies moet je explicit zijn. Waarom? Omdat TypeScript je functie niet kan raden. Je moet zeggen: 'Dit parameter is een string, en ik geef een string terug.'

Dit is een best practice: bij variabelen kan TypeScript raden, bij functies moet je explicit zijn. Dat staat duidelijk in je code: dit is het contract van deze functie."

---

Slide 11: Interfaces - Object Vormen Definiëren

Op de Slide

// Een interface is een beschrijving van een object
interface User {
  id: number;
  name: string;
  email: string;
  age?: number; // Optional
}

// Nu kan je dit type gebruiken
const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com"
};

// Vergeten iets essentiëls?
const incomplete: User = {
  id: 2,
  name: "Bob"
  // ❌ ERROR: Property 'email' is missing
};

Docentnotities

"Dit is het hart van TypeScript: interfaces. Een interface zegt: 'Een User ziet er zo uit'.

Kijk naar deze interface. Een User MOET een id hebben (number), een name (string), en email (string). Optioneel is age.

Nu, als je probeerde een User te maken zonder email? TypeScript zegt nee. Red squiggle. Je MOET dit toevoegen.

Dit is super krachtig voor data structuren. Je weet EXACT welke shape je objecten moeten hebben. Je collega's weten het. TypeScript weet het. Geen gissing meer."

---

Slide 12: Optional Properties - De ? Syntax

Op de Slide

interface Product {
  name: string;           // Verplicht
  price: number;          // Verplicht
  description?: string;   // Optional
  discount?: number;      // Optional
}

// Dit gaat goed:
const product: Product = {
  name: "Laptop",
  price: 999
};

// Dit ook:
const productWithDesc: Product = {
  name: "Mouse",
  price: 25,
  description: "Wireless mouse"
};

// Dit gaat FOUT:
const noName: Product = {
  price: 100
  // ❌ ERROR: Property 'name' is missing
};

Boven aan: "Het vraagteken maakt properties optioneel!"

Docentnotities

"Merk je dat vraagteken op? description?: string. Dat zegt: 'Dit property mag er zijn, maar het hoeft niet.'

Zo maak je flexible interfaces. Sommige dingen zijn altijd nodig (naam, prijs), andere zijn nice-to-have (beschrijving, korting).

Dit is realistisch. Je kan niet altijd alles invullen. Dus zeg je tegen TypeScript: deze dingen zijn optioneel. Dit geeft je flexibiliteit zonder je type safety te verliezen."

---

Slide 13: Type Aliases - De type Keyword

Op de Slide

// Type alias met union
type Status = "pending" | "approved" | "rejected";

// Type alias met object shape
type Address = {
  street: string;
  city: string;
  zipCode: string;
};

// Je kan ervan uitbreiden
type Employee = {
  id: number;
  name: string;
  address: Address; // Ander type gebruiken
  status: Status;
};

// In een functie
function updateEmployeeStatus(
  employeeId: number,
  newStatus: Status
): void {
  // ...
}

Docentnotities

"Nu type - dit is eigenlijk meer flexibel dan interface. Een type kan alles zijn.

Met type can je union types maken - meer daarover straks. Je kan object shapes definieren, net als interfaces. Maar je kan ook getallen, strings, unions combineren.

De rule: interfaces voor objecten en klassen, types voor alles. Maar in de praktijk? Veel developers gebruiken type overal. Het werkt beide kanten uit.

Key point: dit zijn twee manieren om dezelfde dingen te doen. Interface is meer traditioneel, type is meer modern. Wij gaan voornamelijk interfaces gebruiken, maar kennen type."

---

Slide 14: Union Types - Multiple Mogelijkheden

Op de Slide

// Een waarde kan EEN van deze types zijn
type Status = "pending" | "approved" | "rejected";

function handleStatus(status: Status) {
  if (status === "pending") {
    console.log("Wachten op review...");
  } else if (status === "approved") {
    console.log("Goedgekeurd!");
  } else if (status === "rejected") {
    console.log("Afgewezen, je kan opnieuw proberen.");
  }
}

// Dit gaat:
handleStatus("approved");

// Dit gaat NIET:
handleStatus("cancelled");
// ❌ ERROR: Argument of type '"cancelled"' is not assignable

// Union van types
type Result = string | number;
const value: Result = 42;      // OK
const text: Result = "hello";  // OK
const arr: Result = [];        // FOUT!

Docentnotities

"Union types zijn heel nuttig. Ze zeggen: 'Dit kan dit type zijn, óf dit type.'

Kijk naar Status. Een status kan pending, approved, of rejected zijn. Niet meer, niet minder. Als je cancelled probeert? Nee, TypeScript blokkeert het.

Dit is super veilig. Je ziet een status, je weet precies welke mogelijkheden er zijn. Geen gegooi met magic strings.

Je kan ook types unionen: string | number betekent 'dit kan een string zijn OF een number'. Handig soms, maar voorzichtig - het maakt je code komplexer."

---

Slide 15: Interface vs Type - Wanneer Welke?

Op de Slide

Twee kolommen:

Interface

• Voor object shapes
• Kan geextend worden (extends)
• Traditioneel OOP approach
• Foutmeldingen: duidelijker

Type

• Voor alles (objects, unions, primitives)
• Meer flexibel
• Modern, functioneel approach
• Kan unioned worden (&, |)

Onderin: "Regel: Gebruik interface tenzij je een union of conditional nodig hebt. Dan type."

Docentnotities

"Dus wat kies je? Interface of type?

Makkele regel: standaard interface. Interfaces zijn voor objecten. Ze zijn duidelijk, ze zijn traditioneel, ze extensible. Als je een object shape gaat beschrijven, interface.

Type kies je als je iets ingewikkelds nodig hebt. Union types, conditionals, primitieve types. Type is flexibeler.

In jullie code gaan jullie vooral interfaces zien. Dat is goed. Interfaces zijn simpel en duidelijk. Types zijn voor wanneer je echt nodig hebt."

---

Slide 16: Functies Typen - Parameters & Return

Op de Slide

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

// Met optionele parameter
function greet(name: string, greeting?: string): string {
  const msg = greeting || "Hello";
  return `${msg}, ${name}!`;
}

// Arrow function
const multiply = (x: number, y: number): number => x * y;

// Met interface parameters
interface User {
  id: number;
  name: string;
}

function displayUser(user: User): void {
  console.log(`${user.name} (#${user.id})`);
  // void = geen return value
}

// Complex: return een object
function authenticate(username: string, password: string): { success: boolean; token?: string } {
  // ... logica
}

Docentnotities

"Functies typen is makkelijk: zeg wat elk parameter is, en wat je teruggeeft.

add neemt twee numbers, geeft een number terug. Simpel.

greet heeft een optionele parameter - dat greeting?. Die zeggen: 'Dit kan weggelaten worden'.

multiply - arrow function. Zelfde regel: parameters en return type.

displayUser geeft niets terug - void. Dat is belangrijk, void zegt: 'Deze functie returnt niks, het doet alleen iets.'

En die laatste - je kan complexe return types hebben. Dit geeft een object terug met success en optionele token. Handig voor API responses.

Dit is essentieel. Iedere functie die je schrijft moet getypeerd zijn. Geen uitzonderingen."

---

Slide 17: Veelvoorkomende Errors - Top 3

Op de Slide

// ERROR 1: Type Mismatch
const age: number = "25";
// ❌ Type 'string' is not assignable to type 'number'
// FIX: const age: number = 25;

// ERROR 2: Missing Property
interface User {
  id: number;
  name: string;
}
const user: User = { id: 1 };
// ❌ Property 'name' is missing in type '{}'
//    but required in type 'User'
// FIX: const user: User = { id: 1, name: "Alice" };

// ERROR 3: Cannot read property of undefined
const person = { name: "Alice" };
console.log(person.age.toUpperCase());
// ❌ Object is possibly 'undefined'
// FIX: console.log(person.age?.toUpperCase());
//      (optional chaining)

Docentnotities

"Oké, je gaat deze drie errors constant zien. Leer ze kennen:

Error 1: Type mismatch. Je probeert een string aan een number toe te wijzen. TypeScript zegt 'nee'. Fix: zorg dat je types overeenstemmen.

Error 2: Missing property. Je maakt een object van type User, maar je vergeet de naam. TypeScript ziet dat. Fix: vul alles in dat nodig is.

Error 3: Dit is subtiel. person.age bestaat misschien niet, dus het is undefined. Dan probeer je .toUpperCase() op undefined te roepen - crash! Fix: gebruik optional chaining (?.). Dat zeggen we volgende les meer over.

Zie je deze errors? Geen paniek. Ze helpen je eigenlijk. Ze voorkomen echte bugs."

---

Slide 18: Cursor + TypeScript - Superkrachten

Op de Slide

• Screenshot van Cursor met autocomplete dropdown
• Pijlen naar drie features:

1. IntelliSense Autocomplete

   • Type user. → alle properties
   • Sneller coderen, 0 fouten

2. Error Underlines

   • Rood squiggle meteen
   • Fix knop voordat je runt

3. Go to Definition

   • Cmd+Click op type
   • Zie exact wat het is

Docentnotities

"Dit is waarom Cursor zo goed is. Cursor en TypeScript samen zijn echt magisch.

Stel: je hebt een User object. Je typt user. en Cursor weet EXACT welke properties die User heeft. Je hoeft niet te gokken. Je ziet de lijst. Autocomplete. Sneller coderen.

Dan: je maakt een fout. Meteen rode squiggle. Je hoeft niet in tests of bij runtime te wachten. Je ziet het direct. En Cursor kan je sometimes helpen met een fix knop.

En: als je een type wil zien, click je erop met Cmd. Cursor springt je naar die definition. Zo leer je ook dingen - je ziet hoe andere types gebouwd zijn.

Dit is waarom professionele developers TypeScript gebruiken. Cursor en TypeScript samen zijn een superkracht."

---

Slide 19: Hands-On - TypeScript Escaperoom Introductie

Op de Slide

• Titel: "TypeScript Escaperoom: 8 Kamers"
• Grafisch: 8 deuren/kamers visueel weergegeven
• Kleuren: Groen, Geel, Oranje, Rood (difficulty)

Kamers:

1. 🟢 Basic Types (Easy)
2. 🟢 Arrays & Interfaces (Easy)
3. 🟡 Optional Properties (Medium)
4. 🟡 Union Types (Medium)
5. 🟠 Function Types (Medium-Hard)
6. 🟠 Complex Interfaces (Hard)
7. 🔴 Mixed Errors (Very Hard)
8. 🔴 Real-World Scenario (Very Hard)

Docentnotities

"Oké, dit is het leukste deel. Jullie gaan naar een TypeScript escaperoom - acht kamers met type fouten die jullie moeten fixen.

Kamer 1 t/m 2 zijn warm-ups. Basic types, arrays. Makkelijk.

Kamer 3 t/m 5 zijn medium. Je gaat optional properties zien, unions, functies typen. Dit is waar het echt begint.

Kamer 6 t/m 8? Dit is hard. Real-world scenarios. Echt code die je ziet in bedrijven.

Je gaat dit samen doen in teams van twee. Ik loop rond, ik help als je stuck bent. Maar eerst probeer je het zelf! Dat is hoe je leert.

Klaar voor de escaperoom?"

---

Slide 20: Escaperoom Rules & Structuur

Op de Slide

Hoe het werkt:

1. Open de Escaperoom Challenges
2. Lees de beschrijving
3. FIX de TypeScript errors
4. TypeScript moet geen errors meer geven
5. Test in browser als nodig
6. Ga naar volgende kamer!

RULES:
✅ Je mag Cursor foutmeldingen gebruiken
✅ Je mag vorige slides terugbekijken
✅ Je mag je teamgenoot vragen
✅ Je mag mij vragen (als laatste resort!)

❌ Je mag niet 'any' gebruiken om fouten te vermijden
❌ Je mag niet kopieren van anderen
❌ Je mag niet opgeven! 😄

TIMING:
- 40 minuten om zoveel kamers als mogelijk uit te voeren
- Minstens kamer 1-5 halen is succes
- Kamer 6-8 zijn bonus

Docentnotities

"Hier zijn de regels. Dit is serieus, maar ook echt leuk. Jullie gaan bugs fixen en TypeScript mastery opbouwen.

Wat mogen jullie NIET doen? Die fouten niet gewoon oversla met any. any is cheating - het voorbijgaat heel TypeScript. Dat gaat niet gebeuren.

Wat mogen jullie WEL doen? Cursor gebruiken! Terug naar slides kijken! Me vragen!

Ik ga de escaperoom opstarten. Jullie werken in teams. Ik loop rond, ik help. Maar probeer eerst zelf!

Laten we gaan. Wie is nerveus? Goed! Dat betekent dat je gaat leren. Zet op!"

---

Slide 21: Samenvatting - Key Takeaways

Op de Slide

Vijf grote punten:

1. TypeScript vangt fouten VOORDAT je code draait

   • Geen runtime surprises meer

2. Types zijn als documentatie

   • Iedereen weet wat een functie verwacht

3. Vier basisconcepten

   • Basic Types, Arrays, Interfaces, Union Types

4. Cursor & TypeScript = Superkrachten

   • Autocomplete, Error detection, Safe refactoring

5. Oefening = Meesterschap

   • Je bent nooit klaar met leren, maar escaperoom is een goeie start

Docentnotities

"Recap. Dit is wat je vandaag hebt geleerd:

TypeScript is preventief. Je ziet fouten voor ze zich voordoen. Dat sparen je uren debuggen.

Types zijn documentatie. Je code zegt wat het verwacht. Niemand hoeft vragen meer te stellen.

De basics: strings, numbers, booleans. Arrays van types. Interfaces voor object shapes. Unions voor multiple mogelijkheden. Dit zijn je fundamenten.

Cursor maakt TypeScript sterker. IntelliSense, error detection, safe refactoring. Deze drie dingen together zijn unstoppable.

En oefening. Je bent nooit klaar met TypeScript. Er is altijd meer om te leren. Maar vandaag hebben jullie een stevige basis gelegd."

---

Slide 22: Huiswerk & Preview Les 5

Op de Slide

Huiswerk (les 4):

• Finaliseer zoveel escaperoom kamers als je kan
• Verzend je TypeScript file naar me (geen any!)
• Lees het TypeScript Handbook intro (5 minuten)

Preview les 5 - Next.js Basics:

• Next.js setup
• File-based routing
• Eerste pagina's maken
• TypeScript in Next.js
• Deploy naar Vercel

Visual: Next.js logo met pijl naar "Les 5"

Docentnotities

"Huiswerk: finaliseer die escaperoom. Verzend je file naar me. Ik wil geen any zien, anders stuur ik het terug!

En lees het TypeScript Handbook intro. Niet heel veel tijd, maar het helpt je context.

Volgende les? NEXT.JS. Dit is waar het echt spannend wordt. Jullie gaan echte web apps bouwen met React, TypeScript, en all the bells and whistles.

Next.js is het framework dat everyone uses. Vercel (de makers) gebruiken het. Jullie gaan het morgen gebruiken.

Dus zorg dat je huiswerk doet. Het volgende is big.

Goed werk vandaag! Ik ben trots op jullie. Tot volgende keer!"

---

Aanvullende Notities voor Tim

Timing-hints

• Slide 1-7 (Context): ~15 minuten
• Slide 8-18 (Learning): ~30-40 minuten (veel code voorbeelden, veel interactie verwacht)
• Slide 19-20 (Escaperoom setup): ~5 minuten
• Escaperoom praktijk: ~40 minuten
• Slide 21-22 (Afsluiting): ~5 minuten

Interactie Suggesties

• Na Slide 5: "Wie ziet hoe dit echt helpt?" - laat ze reageren
• Bij Slide 8-14: Toon elke slide, code voorbeel, dan vraag "Vragen?"
• Bij Slide 16: Laat ze zelf een getypeerde functie schrijven in Cursor (live, samen)
• Bij Escaperoom: Loop rond, help gefocust (niet de hele antwoord geven)

Mogelijke Vragen

• "Waarom niet altijd any gebruiken?" → Antwoord: Dan ben je terug naar JavaScript. Geen voordeel.
• "Wat is het verschil tussen interface en type?" → Antwoord: Interface = objects, type = alles. Maar veel developers gebruiken type overal.
• "Hoe fix ik deze error?" → Antwoord: Laat ze Cursor's error message lezen. Die zijn eigenlijk heel helpful.

Code Examples Best Practices

Zorg dat je:

1. Copy-paste code in je Cursor project
2. Laat TypeScript errors verschijnen (rood squiggle)
3. Fix het LIVE, zodat ze zien hoe het werkt
4. Vraag: "Waarom was dit fout?"

Escaperoom Technicals

• Je hebt een GitHub repo nodig met TypeScript challenges (8 files)
• Elke file has // TODO: Fix the TypeScript errors
• Students moeten npm install doen, dan npx tsc runnen
• Als TypeScript clean is (0 errors), is de kamer completed

Veel succes, Tim! Dit is een sterke les!