diff --git a/Les04-TypeScript-Fundamentals/Les04-Docenttekst.md b/Les04-TypeScript-Fundamentals/Les04-Docenttekst.md index 86d45e2..f5f729f 100644 --- a/Les04-TypeScript-Fundamentals/Les04-Docenttekst.md +++ b/Les04-TypeScript-Fundamentals/Les04-Docenttekst.md @@ -1,347 +1,203 @@ -# Les 4: TypeScript Fundamentals - Docenttekst +# Les 4: TypeScript Fundamentals +## Docenttekst (Spreektekst voor Tim) -## 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) | +> **Totale lesduur:** 3 uur (180 minuten) +> **Totale spreektijd:** ~55 minuten (verdeeld over blokken) +> **Hands-on praktijk:** ~75 minuten +> **Pauze:** 15 minuten (10:15-10:30) --- -## Context & Voorbereiding +## BLOK 1: WELKOM & TERUGBLIK (10 min) -### Waarom Dit Moment in de Curriculum? +### Slide 1: Titel - Les 4: TypeScript Fundamentals +**[09:00 - 09:02]** -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: +"Goedemorgen! Goed om jullie weer te zien. We gaan vandaag het allerbelangrijkste ding leren die elke moderne JavaScript developer moet weten." -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. +_[Energiek, maak oogcontact, glimlach. Kijk rond de zaal.]_ -### Wat Weten de Studenten Al? +"Vorige week: debug challenge. Wie had de hard versie gedaan? Kom eens van je stoel!" -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** +_[Laat studenten die de hard versie hebben gedaan opstaan. Applaudisseer.]_ -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) +"Was het lastig? Ja? Precies. Dat is waarom we vandaag TypeScript gaan leren. TypeScript helpt dit probleem op te lossen." --- -## Blok 1: Welkom & Terugblik (10 minuten) +### Slide 2: Planning Vandaag +**[09:02 - 09:05]** -**Doel:** Energie creëren, Les 3 verbinden aan Les 4, het "why" instellen. +"Dit is de planning voor vandaag. Luister goed." -### Openen (2 min) +_[Wijs naar elke blok op het scherm.]_ -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 +"**Eerste helft (tot 10:15):** +- We gaan begrijpen WAAROM TypeScript nodig is (live demo!) +- Basic types leren +- Interfaces en Type Aliases - Functies typen - Intro TypeScript Escaperoom -**Pauze (10 minuten)** +**Pauze (10:15-10:30)** -**Tweede helft:** +**Tweede helft (10:30-12:00):** - Jullie gaan aan de slag met de Escaperoom (75 minuten) - Ik loop rond en help -- Afsluiting: recap, huiswerk, preview Les 5 +- Afsluiting: recap, huiswerk, preview Les 5" -> "Deze les is 50-50: theorie en praxis. Niet veel slides. Veel live coding, veel doen." +"Deze les is 50-50: theorie en praxis. Niet veel slides. Veel live coding. Veel doen. Klaar?" -**Energietip:** Dit moment lijkt klein, maar bepaalt de sfeer van de hele les. Je bent enthousiast, betrokken, duidelijk. Studenten volgen. +_[Oogcontact.]_ --- -## Blok 2: Waarom TypeScript? (15 minuten) +### Slide 3: Terugblik Les 3 - Cursor & Debugging +**[09:05 - 09:10]** -**Doel:** Het "aha!" moment creëren. Studenten moeten voelen waarom TypeScript nodig is. +"Oké, vorige week: Cursor. We zetten breakpoints, we keken naar variabelen, we snapten wat er misgaat. Super belangrijk." -### Setup: Live Demo in Cursor (5 min) +_[Wacht even, laat dit bezinken.]_ -Zorg dat je scherm zichtbaar is (beamer/Zoom share). Open Cursor. +"Maar: dat was reactive debugging. We zoeken NADAT er al iets fout is gegaan." -**Stap 1: Maak een .js bestand** +_[Pauzeer. Maak oogcontact.]_ -```bash -touch demo.js -``` +"TypeScript is anders. TypeScript is **preventief**. We stoppen fouten VOORDAT ze ontstaan — nog voor je code runt." -Open het en schrijf: +"Ik ga je vandaag laten zien hoe dit werkt. En daarna ga JIJ het voelen. Klaar?" + +_[Glimlach.]_ + +--- + +## BLOK 2: WAAROM TYPESCRIPT? (15 min) + +### Slide 4: Het Probleem met JavaScript +**[09:10 - 09:13]** + +"Hier is het probleem. Kijk naar je scherm." + +_[Toon de JavaScript code in Cursor. Zorg dat je beamer werkt.]_ ```javascript -function greet(name) { - return "Hello, " + name.toUpperCase(); +function calculateTotal(price, quantity) { + return price * quantity; } -console.log(greet("tim")); -console.log(greet(42)); +const total = calculateTotal("25.99", 3); +console.log(total); // "25.99" + "25.99" + "25.99" = "25.9925.9925.99" ``` -> "Zie je dat? Een simpele functie. Twee keer aanroepen. Eén keer met een string, eén keer met het getal 42." +"Ik roep `calculateTotal` aan met een string in plaats van een getal. Wat zegt JavaScript?" -Wacht, maak oogcontact. +_[Pauzeer. Wacht op reacties.]_ -> "Vraag: ziet de editor een probleem?" +"Niks. Geen fout. Cursor denkt: alles oké." -(Waarschijnlijk niet — laat ze zien dat er geen rode squiggles zijn.) +_[Voer het uit.]_ -> "Nope. Geen error. Cursor denkt: alles oké." +"Maar als je het draait? Kijk naar het output. Compleet verkeerd! JavaScript voert het uit en geeft je het verkeerde antwoord." -**Stap 2: Run het** +"Waarom? Omdat JavaScript **dynamisch getypeerd** is. Het zegt: 'Jij bent verantwoordelijk voor types, niet ik. Ik ga gewoon doen wat je zegt.'" -```bash -node demo.js -``` +_[Maak oogcontact.]_ -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." +"Dit soort fouten kunnen weken werk kosten. Je debuggt je code, je kijkt naar je network requests, je denkt: backend is kapot. Nee. De bug zat hier." --- -## Blok 3: Basic Types & Type Inference (15 minuten) +### Slide 5: De Oplossing: TypeScript +**[09:13 - 09:16]** -**Doel:** Studenten kunnen basis types annoteren en begrijpen type inference. +"Nu met TypeScript. Zelfde functie." -### Live Coding: Basis Types (8 min) +_[Maak een nieuw bestand demo.ts. Schrijf dezelfde code, maar met types.]_ -Open Cursor. Nieuw bestand: `types-demo.ts`. +```typescript +function calculateTotal(price: number, quantity: number): number { + return price * quantity; +} -> "Oké, eerst basics. Wat zijn types?" +const total = calculateTotal("25.99", 3); +``` -Schrijf: +_[Wacht. Kijk naar het scherm.]_ + +"Kijk. Rode squiggle onder de string. TypeScript ziet het METEEN. VOORDAT je code runt." + +"TypeScript zegt: 'Wacht even... je geeft me een string en ik verwacht een number. Nope!'" + +_[Klik op de error om de boodschap te tonen.]_ + +"The error message: 'Argument of type string is not assignable to parameter of type number.'" + +"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 later." + +_[Maak oogcontact. Glimlach.]_ + +"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 +**[09:16 - 09:20]** + +"Waarom gebruiken we dit eigenlijk? Vier grote wins:" + +_[Toon de slide. Ga door elk voordeel.]_ + +**Voordeel 1: Fouten Voorkomen** + +"Dit hebben we net gezien. Je code runt niet meer met domme type fouten. TypeScript vangt ze in je editor." + +**Voordeel 2: Betere Documentatie** + +"Types zijn eigenlijk documentatie. Kijk naar een functie — je ziet exact wat het verwacht en geeft terug. Geen giswerk meer." + +**Voordeel 3: Autocomplete & IntelliSense** + +"Dit is echt magisch. Jullie gaan dit ervaren vandaag. Je typt `person.` en Cursor weet EXACT welke properties beschikbaar zijn. Veel sneller coderen. Nul typos." + +**Voordeel 4: 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 breken'. Je fix ze allemaal op een rij. Zonder TypeScript? Goedemiddag, productie bugs!" + +_[Pauzeer.]_ + +"Dit is waarom Netflix, Google, Microsoft — allemaal gebruiken TypeScript." + +--- + +### Slide 7: TypeScript in het Ecosysteem +**[09:20 - 09:25]** + +"Hier is iets belangrijk: TypeScript is niet meer iets speciaals. Het is de industrie standaard." + +_[Toon de slide met de logo's.]_ + +"Next.js? Jullie gaan dat volgende les gebruiken. 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." + +_[Maak oogcontact.]_ + +"Dit zegt: als je modern wilt programmeren, moet je TypeScript kennen. Het is niet optional meer. Het is expected. Iedereen bij NOVI, in de industrie, overal — zij gebruiken TypeScript." + +_[Pauzeer.]_ + +"Goed. Nu gaan we het leren." + +--- + +## BLOK 3: BASIC TYPES & INFERENCE (15 min) + +### Slide 8: Basic Types - De Fundamenten +**[09:25 - 09:30]** + +"Oké, de absolute basisvaardigheden. TypeScript heeft standaard types." + +_[Open Cursor. Maak een nieuw bestand types-demo.ts.]_ ```typescript let name: string = "Tim"; @@ -349,101 +205,135 @@ 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.'" +"String — tekst. Easy. Number — getallen, zowel integers als floats. Boolean — true of false. Dit zijn de drie basis types." -Laat zien: +_[Toon wat er gebeurt als je verkeerd type toewijst.]_ ```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." +"Als je later probeert 42 in `name` te stoppen, TypeScript zegt: nope, name is string, geen number." -Nu arrays: +_[Hover over de error.]_ + +"Nu arrays. Een array is een collection. TypeScript wil weten WELK TYPE in de array zit." ```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." +"Je zegt: 'Dit is een array van numbers.' Of 'Dit is een array van strings.'" -Demo: +_[Demo het omgekeerde:]_ ```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'`. +"Probeer een string in een number array te stoppen? TypeScript ziet het meteen." -### Type Inference: TypeScript is Slim (5 min) +_[Toon de error message.]_ -Nu het interessante deel. +"Dit is het patroon: je zegt welk type, TypeScript controleert." + +--- + +### Slide 9: Arrays - Collecties Typen +**[09:30 - 09:33]** + +"Arrays komen in twee notaties. Beide doen hetzelfde." + +```typescript +// Notatie 1: type[] +const numbers: number[] = [1, 2, 3]; + +// Notatie 2: Array +const names: Array = ["Alice", "Bob"]; + +// Beide zijn hetzelfde +``` + +"De eerste notatie is populairder. Sneller om te typen." + +_[Demo arrays van objecten.]_ + +```typescript +interface User { + id: number; + name: string; +} + +const users: User[] = [ + { id: 1, name: "Alice" }, + { id: 2, name: "Bob" } +]; +``` + +"Je kan ook arrays van complexere types hebben. Arrays van User objecten. Handig." + +_[Pauzeer.]_ + +"Onthoud: elke array moet een type hebben. Geen gemengde arrays." + +--- + +### Slide 10: Type Inference - TypeScript Raadt +**[09:33 - 09:40]** + +"Nu het interessante deel. TypeScript is slim." ```typescript let message = "Hello"; ``` -> "Geen type annotering. Maar kijk..." +"Geen type annotering. Maar kijk..." -Hover over `message` in je editor. Tooltip verschijnt: +_[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." -> "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**. +"Dit heet **type inference**." ```typescript -let count = 5; // TypeScript: number -let active = true; // TypeScript: boolean -let items = [1, 2, 3]; // TypeScript: number[] +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." +"Dit is geniaal. Je hoeft niet ALLES expliciet te typen. TypeScript is slim genoeg om het zelf uit te vogelen." -### Rule of Thumb: Wanneer Annoteren? (2 min) +_[Maak oogcontact.]_ -> "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 +"Regel: **Bij variabelen: let TypeScript infer. Bij functies: je MOET typen.**" ```typescript -// GUT: +// GUT: TypeScript raadt het return type 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 +// SLECHT: Redundant +const result: number = add(5, 3); ``` -> "Onthoud: functies typen is verplicht. Variables? Let TypeScript denken." +"Functies zijn waar types het meest helpen. Daar moet je explicit zijn. Variables? Let TypeScript denken." --- -## Blok 4: Interfaces & Type Aliases (15 minuten) +## BLOK 4: INTERFACES & TYPE ALIASES (15 min) -**Doel:** Studenten kunnen objecten beschrijven met interfaces en type aliases. +### Slide 11: Interfaces - Object Vormen Definiëren +**[09:40 - 09:47]** -### Interfaces: De SHAPE van Objecten (7 min) +"Wat als je een object hebt? Hoe beschrijf je dat?" -> "Wat als je een object hebt? Hoe beschrijf je dat?" - -Live demo: +_[Live coding in Cursor.]_ ```typescript interface User { @@ -459,26 +349,56 @@ const user: User = { }; ``` -> "Interface zeggen: 'Een User object heeft PRECIES deze properties, met DEZE types.' Niks meer, niks minder." +"Interface zeggen: 'Een User object heeft PRECIES deze properties, met DEZE types.' Niks meer, niks minder." -Demo de autocomplete: +_[Demo 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." +"Cursor weet: User heeft deze velden. Alleen deze. Als je iets vergeet..." -### Optional Properties (2 min) +```typescript +const user: User = { + id: 1, + name: "Anna" + // ❌ RODE SQUIGGLE — email is missing +}; +``` + +"TypeScript ziet het. Je MOET alles invullen dat nodig is." + +_[Toon een compleet voorbeeld.]_ + +```typescript +const user: User = { + id: 1, + name: "Anna", + email: "anna@novi.nl" +}; + +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." + +_[Maak oogcontact.]_ + +"Dit is het hart van TypeScript: interfaces. Je beschrijft de SHAPE van je objecten. Iedereen snapt het. Geen verwarring meer." + +--- + +### Slide 12: Optional Properties - De ? Syntax +**[09:47 - 09:50]** + +"Wat als niet alles verplicht is?" ```typescript interface User { @@ -503,37 +423,130 @@ const user2: User = { }; ``` -> "Het `?` betekent optional. Misschien heb je een phone, misschien niet. TypeScript accepteert beide." +"Zie je dat vraagteken? `phone?: string`. Dat zegt: 'Dit property mag er zijn, maar het hoeft niet.'" -### Type Aliases: Union Types (4 min) +"Zo maak je flexible interfaces. Sommige dingen zijn altijd nodig (naam, email), andere zijn nice-to-have (telefoon)." -Interfaces zijn voor objecten. Maar wat als je iets anders wilt typen? +_[Pauzeer.]_ + +"Dit is realistisch. Je kan niet altijd alles invullen. Dus zeg je tegen TypeScript: deze dingen zijn optioneel. Je geeft flexibiliteit zonder je type safety te verliezen." + +--- + +### Slide 13: Type Aliases - De `type` Keyword +**[09:50 - 09:55]** + +"Nu `type`. Dit is eigenlijk meer flexibel dan interface." ```typescript type Status = "pending" | "approved" | "rejected"; -const order: Status = "pending"; // ✓ oké -const order: Status = "shipped"; // RODE SQUIGGLE +const orderStatus: Status = "pending"; // ✓ oké +const orderStatus: Status = "shipped"; // ❌ RODE SQUIGGLE ``` -> "Type aliases: je definieert een naam voor iets. Hier: Status kan ALLEEN deze drie strings zijn. Niet willekeurig. DEZE drie." +"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. +"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 +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) +"Type is ook voor object shapes:" -Dit is een veel gestelde vraag. Hou het simpel: +```typescript +type Address = { + street: string; + city: string; + zipCode: string; +}; -> "Interface of Type? Goeie vraag. Praktisch antwoord: **Interface voor objecten. Type voor alles anders.**" +type Employee = { + id: number; + name: string; + address: Address; + status: Status; +}; +``` + +_[Pauzeer.]_ + +"Type is flexibeler dan interface. Je kan unions maken, je kan primitives combineren. Maar: in de praktijk? Interface en type worden vaak door elkaar gebruikt." + +--- + +### Slide 14: Union Types - Multiple Mogelijkheden +**[09:55 - 10:00]** + +"Union types zijn heel nuttig. Ze zeggen: 'Dit kan dit type zijn, óf dit type.'" + +```typescript +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 +``` + +"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." + +_[Demo ook type unions:]_ + +```typescript +type Result = string | number; + +const value: Result = 42; // OK +const text: Result = "hello"; // OK +const arr: Result = []; // ❌ FOUT +``` + +"Je kan ook types unionen: `string | number` betekent 'dit kan een string zijn OF een number.'" + +--- + +### Slide 15: Interface vs Type - Wanneer Welke? +**[10:00 - 10:05]** + +"Dus: interface of type?" + +_[Toon de twee kolommen.]_ + +"**Interface:** +- Voor object shapes +- Kan geextend worden +- Traditioneel OOP approach +- Foutmeldingen zijn duidelijker + +**Type:** +- Voor alles (objects, unions, primitives) +- Meer flexibel +- Modern, functioneel approach +- Kan unioned worden" + +_[Pauzeer.]_ + +"Praktisch antwoord: **Interface voor objecten. Type voor alles anders.**" ```typescript // Interface @@ -548,19 +561,20 @@ 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é." +"Eerlijk? Voor 90% van wat jullie gaan doen, is het niet superkritiek. Kies er één en wees consistent. Ik zeg: interface voor objects, type voor alles. Maar beide zijn oké." -**Key insight:** +_[Maak oogcontact.]_ -> "Belangrijk: beide zijn TypeScript. Allebei geven TypeScript dezelfde informatie. Het is 'preference'." +"Belangrijk: beide zijn TypeScript. Allebei geven TypeScript dezelfde informatie. Het is 'preference'." --- -## Blok 5: Functies & Fouten (10 minuten) +## BLOK 5: FUNCTIES & ERRORS (10 min) -**Doel:** Studenten kunnen functies typen en herkennen veel voorkomende TypeScript fouten. +### Slide 16: Functies Typen - Parameters & Return +**[10:05 - 10:10]** -### Functies Typen (4 min) +"Functies typen is makkelijk: zeg wat elk parameter is, en wat je teruggeeft." ```typescript // Regular function @@ -582,44 +596,47 @@ function greet(name: string, greeting?: string): string { } ``` -> "Pattern: types IN (parameters), type OUT (return type). Altijd. Functies zijn waar types het meest helpen." +"Pattern: types IN (parameters), type OUT (return type). Altijd. Functies zijn waar types het meest helpen." -### Veel Voorkomende TypeScript Fouten (6 min) +"`add` neemt twee numbers, geeft een number terug. Simpel." -Studenten zullen deze zien. Laat ze kennen: +"`greet` heeft een optionele parameter — dat `greeting?`. Die zeggen: 'Dit kan weggelaten worden'." -#### Fout 1: Type 'X' is not assignable to type 'Y' +"`logUser` geeft niets terug — `void`. Dat is belangrijk. `void` zegt: 'Deze functie returnt niks, het doet alleen iets.'" + +_[Pauzeer.]_ + +"Dit is essentieel. Iedere functie die je schrijft moet getypeerd zijn. Geen uitzonderingen." + +--- + +### Slide 17: Veelvoorkomende Errors - Top 3 +**[10:10 - 10:15]** + +"Je gaat deze drie errors constant zien. Leer ze kennen." + +_[Toon Slide 17.]_ + +**Error 1: Type 'X' is not assignable to type 'Y'** ```typescript -let count: number = "hello"; // RODE SQUIGGLE +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." +"Vertaald: je probeert een string in iets te stoppen dat number moet zijn. Mismatch. Fix: zorg dat je types overeenstemmen." -Fix: zorg dat het type klopt. - -```typescript -let count: number = 5; // ✓ -``` - -#### Fout 2: Property 'X' does not exist on type 'Y' +**Error 2: Property 'X' does not exist on type 'Y'** ```typescript const user = { name: "Tim", age: 25 }; -console.log(user.emali); // RODE SQUIGGLE +console.log(user.emali); // ❌ RODE SQUIGGLE // Property 'emali' does not exist ``` -> "Typo. Je schreef 'emali' maar het property heet 'email'." +"Typo. Je schreef 'emali' maar het property heet 'email'. Fix: spel het goed." -Fix: spel het goed. - -```typescript -console.log(user.email); // ✓ (als het property bestaat) -``` - -#### Fout 3: Object is possibly 'undefined' +**Error 3: Object is possibly 'undefined'** ```typescript function getUser(): User | undefined { @@ -627,13 +644,11 @@ function getUser(): User | undefined { } const user = getUser(); -console.log(user.name); // RODE SQUIGGLE +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 zegt: dit kan undefined zijn. Je mag niet zomaar `.name` eroppen. Wat als het undefined is? Fix: check eerst." ```typescript const user = getUser(); @@ -642,47 +657,62 @@ if (user) { } ``` -### Cursor Helpt (1 min) +_[Maak oogcontact.]_ -> "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." +"Deze fouten gaan jullie VEEL tegenkomen. Dat is GOED! TypeScript beschermt je. Elke rode squiggle is TypeScript die zegt: 'Hé, ik help je.' Niet iets wat boos is. Het is helpful." --- -## Blok 6: Hands-On Intro — TypeScript Escaperoom (5 minuten) +## BLOK 6: ESCAPEROOM INTRO (10 min) -**Doel:** Context voor de praktijkles. Studenten snappen wat ze gaan doen. +### Slide 18: Cursor + TypeScript - Superkrachten +**[10:15 - 10:17]** -### Wat is de Escaperoom? +_[Toon Slide 18.]_ -> "Oké, theorie klaar. Nu gaan jullie zelf TypeScript leren door TE DOEN." +"Dit is waarom Cursor zo goed is. Cursor en TypeScript samen zijn echt magisch." -Toon op je scherm (of deel-screen) een preview van het project: +"**Voordeel 1: IntelliSense Autocomplete** + +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. Nul fouten." + +"**Voordeel 2: Error Underlines** + +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." + +"**Voordeel 3: Go to Definition** + +Wil je een type zien? Click je erop met Cmd. Cursor springt je naar die definition. Zo leer je ook dingen — je ziet hoe andere types gebouwd zijn." + +_[Pauzeer.]_ + +"Dit is waarom professionele developers TypeScript gebruiken. Cursor en TypeScript samen zijn een superkracht." + +--- + +### Slide 19: Hands-On - TypeScript Escaperoom Introductie +**[10:17 - 10:20]** + +"Oké, theorie klaar. Nu gaan jullie zelf TypeScript leren door TE DOEN." + +_[Toon Slide 19.]_ + +"Hier is het concept: 8 kamers. Elke kamer heeft TypeScript puzzels. Jij lost ze op." ``` -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 +Room 1: Basic Types (Easy) +Room 2: Arrays & Interfaces (Easy) +Room 3: Optional Properties (Medium) +Room 4: Union Types (Medium) +Room 5: Function Types (Medium-Hard) +Room 6: Complex Interfaces (Hard) +Room 7: Mixed Errors (Very Hard) +Room 8: Real-World Scenario (Very Hard) ``` -> "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." +"Als je een kamer goed solved, krijg je een escape code fragment. Alle 8 fragments bij elkaar? Je hebt het complete 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: +_[Toon een voorbeeld van een TODO-comment:]_ ```typescript // Room 1: Basic Types @@ -698,38 +728,46 @@ let isActive: boolean = true; // If correct, you'll see: ESCAPE_CODE_1: ABC123XYZ ``` -### Setup Instructions (2 min) +"Je opent een TypeScript bestand. Er staan 'TODO' comments in. Jij vult aan wat ontbreekt. Je runt het. TypeScript compiler zegt: 'Fout!' of 'Oké!' Als het oké is, je krijgt een code." -> "Stappen om aan de slag te gaan:" +--- -Schrijf dit op (of deel-screen): +### Slide 20: Escaperoom Rules & Structuur +**[10:20 - 10:25]** -1. **Download de zip**: [link naar moodle/Canvas] +_[Toon Slide 20 met de regels.]_ + +"Stappen om aan de slag te gaan:" + +"1. **Download de zip**: [link naar Canvas/moodle] 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) +6. **Lees de TODOs**, vul aan, sla 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 +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." +"Alle 8 kamers doen? Einde van de les heb je het master escape code." -### Tips & Tricks (2 min) +_[Pauzeer.]_ -> "Paar tips terwijl je aan het werk bent:" +"Paar tips terwijl je aan het werk bent:" -1. **Hover over errors** — plaats je cursor op een rode squiggle, en je ziet uitleg +"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" +3. **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. +5. **Lees fouten** — de TODOs zijn heel precies. Lees goed wat je moet doen." -> "Vragen? Ik loop rond. Steek je hand op." +_[Kijk rond de zaal.]_ + +"Vragen? Ik loop rond. Steek je hand op. We doen dit samen." --- -## PAUZE (10 minuten) +## PAUZE (15 minuten) +**[10:25 - 10:40]** Studenten gaan naar buiten / hebben een break. Jij: - Zorg dat je scherm klaar is voor de volgende ronde @@ -739,55 +777,61 @@ Studenten gaan naar buiten / hebben een break. Jij: --- -## Blok 7: Hands-On Praktijk (75 minuten) +## BLOK 7: HANDS-ON PRAKTIJK (75 minuten) +**[10:40 - 11:55]** -**Doel:** Studenten werken aan de TypeScript Escaperoom. Jij helpt, observeert, stimuleert. +### Setup en Start +**[10:40 - 10:45]** -### Opzet (0-5 min) +"Welkom terug. Iedereen klaar? Download de zip, extract, `npm install`, open in Cursor?" -> "Welkom terug. Iedereen klaar? Download de zip, extract, `npm install`, open in Cursor?" +_[Controleer dat iedereen de eerste room open heeft.]_ -Zorg dat iedereen de eerste room open heeft. Start hen allemaal op hetzelfde moment: +"Oké, we starten met Room 1 op hetzelfde moment. 3... 2... 1... GO!" -> "We starten met Room 1 op hetzelfde moment. 3... 2... 1... GO!" +_[Start hen allemaal op hetzelfde moment. Dit creëert momentum.]_ -### Rondlopen & Helpen (5-70 min) +--- -Nu is het jouw taak om: +### Rondlopen & Helpen +**[10:45 - 11:45]** + +**Je rol is drievoudig: Observeren, Helpen (zonder antwoord), Stimuleren.** #### A. Observeren -Walk door de zaal. Kijk naar schermen. Wie zit vast? Wie is snel klaar? -#### B. Helpen (zonder ant te geven!) +Loop door de zaal. Kijk naar schermen. Wie zit vast? Wie is snel klaar? Noteer mentaal waar de bottlenecks zijn. -Dit is BELANGRIJK. Je helpt, maar je geeft niet de antwoord. +#### B. Helpen (zonder antwoord geven!) + +**Dit is BELANGRIJK. Je helpt, maar je geeft niet het 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`." +"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?" +"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?" +"Precies. Dus welk type moet age zijn?" Student: "Number!" -> "Yes! Probeer het." +"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." +- Rond 11:00, check: "Hoe gaat het? Stuck? Laten we naar de error kijken. Wat zegt TypeScript?" +- Rond 11:20: "Je bent op Room 4. Goed! Volgende." **Voor snelle studenten:** -- Rond 10:45: "Helemaal klaar? Nice! Hier: bonus challenge." (zie hieronder) +- Rond 11:00: "Helemaal klaar? Nice! Hier: bonus challenge." (zie hieronder) - Zorg dat ze niet *wachten* — ze kunnen altijd meer leren. #### D. Veelvoorkomende Problemen & Oplossingen @@ -804,61 +848,61 @@ Jij: "Dus: je maakt een interface. Het heet User. Het heeft drie properties: id **Probleem 2: "Ik krijg rood overal, ik snap het niet"** -> "Laten we stap voor stap gaan. Wat is de EERSTE rode squiggle?" +"Laten we stap voor stap gaan. Wat is de EERSTE rode squiggle?" -Focus op één fout tegelijk. +Focus op één fout tegelijk. Niet alles tegelijk. -**Probleem 3: "Kan ik Cursor gebruiken om dit op te lossen?"** +**Probleem 3: "Kan ik Cursor gebruiken?"** 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." +"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..." +"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 +#### E. Check-in Momenten Plan drie korte check-ins: -**10:45 — Eerste Check (halveway)** +**11:00 — 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." -> "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** +**11:20 — 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? +**11:45 — Laatste Check** +- 10 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) +#### F. Bonus Challenges (voor Snelle Studenten) -Voor studenten die alle 8 kamers hebben gedaan (normaal zijn dit de snelsten): +Voor studenten die alle 8 kamers hebben gedaan: + +**Bonus 1: Generics** -**Bonus 1: Generics** (gaat verder dan les 4) ```typescript -// Create a generic function that works with any type function getFirstElement(arr: T[]): T { return arr[0]; } -const first = getFirstElement([1, 2, 3]); // number +const first = getFirstElement([1, 2, 3]); // number const firstStr = getFirstElement(["a", "b"]); // string ``` +"Dit is Les 5 material. Maar je bent snel. Probeer het. Vraag Cursor!" + **Bonus 2: Advanced Interfaces** + ```typescript -// Inheritance & extending interface Animal { name: string; } @@ -869,6 +913,7 @@ interface Dog extends Animal { ``` **Bonus 3: Type Guards** + ```typescript function processInput(input: string | number) { if (typeof input === "string") { @@ -879,106 +924,96 @@ function processInput(input: string | number) { } ``` -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!" +- **Rond 11:45**: "Laatste 10 minuten! Zet ineens aan!" --- -## Blok 8: Afsluiting (15 minuten) +## BLOK 8: AFSLUITING (15 minuten) +**[11:55 - 12:00]** -**Doel:** Recap, validatie, huiswerk, toekomst. +### Slide 21: Samenvatting - Key Takeaways +**[11:55 - 11:58]** -### Wie Heeft het Escape Code? (3 min) +"Oké, allen! Wie heeft het complete escape code? Alle 8 kamers?" -> "Oké, allen! Wie heeft het complete escape code? Alle 8 kamers?" +_[Laat studenten hun code tonen. Applaudisseer.]_ -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." -> "Nice! Goed werk. Wie 6 kamers gedaan? 5? 4? Allemaal goed! Volgende week maken jullie het af, en dan gaan we dieper." +_[Zet dit op het bord of deel-screen.]_ -### Snelle Recap: De 3 Key Takeaways (5 min) +**3 Key Takeaways:** -Zet dit op het bord (of deel-screen): +"1. **Types voorkomen RUNTIME ERRORS** -``` -1. Types voorkomen RUNTIME ERRORS -2. Interfaces beschrijven OBJECTEN -3. Functies ALTIJD typen -``` +Onthouden: je JavaScript code kan 3 uur later breken in productie. TypeScript zegt: nope, hier is het fout, FIX het NU. In je editor." -Ga door elk: +"2. **Interfaces beschrijven OBJECTEN** -**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." +Object nodig? Interface. Object zegt: dit object heeft deze form. Dit property, deze type. Cursor gebruikt het om je te helpen." -**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** -**3. Functies ALTIJD typen** -> "Rule: functie parameters IN, functie return type OUT. Altijd annoteren. Variables? Let TypeScript infer. Maar functies? Altijd." +Rule: functie parameters IN, functie return type OUT. Altijd annoteren. Variables? Let TypeScript infer. Maar functies? Altijd." -### Huiswerk (4 min) +_[Pauzeer. Maak oogcontact.]_ -> "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. +"Dit is jullie basis. Volgende les bouwen we hierop." --- -## Praktische Tips voor de Docent +### Slide 22: Huiswerk & Preview Les 5 +**[11:58 - 12:00]** + +"Huiswerk voor volgende week:" + +_[Schrijf op en stuur ook via email/Canvas:]_ + +"**Huiswerk Les 4:** + +1. **Finish all 8 TypeScript Escaperoom rooms** (if not done today) +2. **Download de JS→TS Converter zip** van Canvas + - Convert 3-5 JavaScript files to TypeScript + - Voeg types toe aan alle functies en variabelen + - Zorg dat TypeScript compiler 0 errors geeft +3. **Prepare for Les 5** — TypeScript + React + - Denk: hoe zouden je React props getypeerd worden? + +Room 1-8 van de escaperoom moet af. Als je niet klaar bent vandaag, je hebt de week om het af te maken. Volgende week bouw je hierop voort." + +_[Toon Slide 22 preview.]_ + +"**Volgende week: Les 5. TypeScript + React.**" + +"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." + +_[Maak oogcontact, glimlach.]_ + +"Jullie hebben vandaag veel geleerd. TypeScript lijkt misschien veel regels. Maar denk eraan: elke rode squiggle is TypeScript die zegt: 'Hé, ik help je.' Niet iets wat boos is. Het is helpful." + +"Goed gedaan vandaag. Tot volgende keer!" + +_[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) +- [ ] TypeScript Escaperoom zip klaar om te delen (via Canvas) +- [ ] `npm install` gedaan in de escaperoom (opdat je het kan runnen) - [ ] Beamer/screen sharing testen - [ ] Audio testen (voor demos) - [ ] Een backup plan: als iemand's installatie niet werkt, heb jij hem al draaien @@ -1003,20 +1038,29 @@ Applaus. ### 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." + +A: "Nee. Functies: ja. Variables: let TypeScript infer, tenzij onduidelijk. Thumb rule: minder typen = minder code. 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." +**Q: "Hoe fix ik deze error?"** + +A: "Laat ze Cursor's error message lezen. Die zijn eigenlijk heel helpful. Ze zeggen exact wat het probleem is." + ### Troubleshooting **Probleem: Npm install faalt** @@ -1033,7 +1077,7 @@ A: "Ja, TypeScript has veel regels. Maar: elke regel beschermt je. Elke regel vo - 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** +**Probleem: Iemand is ECHT vast en gefrustreerd** - 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. @@ -1041,80 +1085,12 @@ A: "Ja, TypeScript has veel regels. Maar: elke regel beschermt je. Elke regel vo --- -## Post-Les Checklist +## CODE SNIPPETS KLAAR -**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?") +### Blok 2 Demo: JavaScript vs TypeScript -**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(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):** ```javascript -// demo.js function greet(name) { return "Hello, " + name.toUpperCase(); } @@ -1123,36 +1099,46 @@ console.log(greet("tim")); console.log(greet(42)); ``` +Output: Runtime error na eerste call succeeds. + +**TypeScript (demo.ts):** ```typescript -// demo.ts function greet(name: string): string { return "Hello, " + name.toUpperCase(); } console.log(greet("tim")); -// console.log(greet(42)); // TypeScript error +// console.log(greet(42)); // TypeScript error - caught in editor ``` +Output: 0 errors. + ### Blok 3 Types + ```typescript +// Basic types let name: string = "Tim"; let age: number = 25; let isStudent: boolean = true; +// Arrays let scores: number[] = [90, 85, 88]; let tags: string[] = ["typescript", "react"]; -let message = "Hello"; // type inference: string -let count = 5; // type inference: number +// Type inference +let message = "Hello"; // string +let count = 5; // number +// Functions function add(a: number, b: number): number { return a + b; } -const result = add(5, 3); // type inference: number +const result = add(5, 3); // number (inferred) ``` ### Blok 4 Interfaces & Types + ```typescript interface User { id: number; @@ -1175,6 +1161,7 @@ const answer: Response = 42; ``` ### Blok 5 Functions & Errors + ```typescript // Regular function function add(a: number, b: number): number { @@ -1203,34 +1190,91 @@ const user = getUser(); if (user) { console.log(user.name); // ✓ safe } + +// Common errors: +// Error 1: Type mismatch +let count: number = "hello"; // ❌ + +// Error 2: Missing property +interface Person { + id: number; + name: string; +} +const person: Person = { id: 1 }; // ❌ name missing + +// Error 3: Possibly undefined +const obj = { name: "Alice" }; +console.log(obj.age.toUpperCase()); // ❌ age is undefined ``` --- -## Aantekeningen en Reflectie +## POST-LES CHECKLIST -**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? +**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?") -**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?" +**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 --- -## Einde Docenttekst +## 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 +- Optional parameters + +✅ **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 + +--- + +## 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) +- Wat je gaat zeggen (per-slide, met timestamps) +- Hoe je het gaat doen (live demos, interactie) - Code om te gebruiken - Praktische tips - Troubleshooting +- Check-ins om momentum te behouden + +**Totale timing: 180 minuten (3 uur) — afgestemd op Les 3 format.** Veel sterkte! TypeScript is een game changer voor je studenten. Ze zullen het voelen. -**Vragen? Contact me. Goed onderwijzen!** +Vragen? Contact me. Goed onderwijzen! diff --git a/Les04-TypeScript-Fundamentals/Les04-Slide-Overzicht.md b/Les04-TypeScript-Fundamentals/Les04-Slide-Overzicht.md index 2db7081..3387598 100644 --- a/Les04-TypeScript-Fundamentals/Les04-Slide-Overzicht.md +++ b/Les04-TypeScript-Fundamentals/Les04-Slide-Overzicht.md @@ -4,7 +4,7 @@ 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**: Ongeveer 90-120 minuten met hands-on escaperoom aan het eind. +**Timing**: 180 minuten (3 uur) — ~55 min theorie, 15 min pauze, ~75 min hands-on, 15 min afsluiting. ---