Files

2026-03-03 10:46:45 +01:00

34 KiB

Raw Blame History

Les 4: TypeScript Fundamentals

Docenttekst (Spreektekst voor Tim)

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)

BLOK 1: WELKOM & TERUGBLIK (10 min)

Slide 1: Titel - Les 4: TypeScript Fundamentals

[09:00 - 09:02]

"Goedemorgen! Goed om jullie weer te zien. We gaan vandaag het allerbelangrijkste ding leren die elke moderne JavaScript developer moet weten."

[Energiek, maak oogcontact, glimlach. Kijk rond de zaal.]

"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.]

"Was het lastig? Ja? Precies. Dat is waarom we vandaag TypeScript gaan leren. TypeScript helpt dit probleem op te lossen."

Slide 2: Planning Vandaag

[09:02 - 09:05]

"Dit is de planning voor vandaag. Luister goed."

[Wijs naar elke blok op het scherm.]

"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:15-10:30)

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"

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

[Oogcontact.]

Slide 3: Terugblik Les 3 - Cursor & Debugging

[09:05 - 09:10]

"Oké, vorige week: Cursor. We zetten breakpoints, we keken naar variabelen, we snapten wat er misgaat. Super belangrijk."

[Wacht even, laat dit bezinken.]

"Maar: dat was reactive debugging. We zoeken NADAT er al iets fout is gegaan."

[Pauzeer. Maak oogcontact.]

"TypeScript is anders. TypeScript is preventief. We stoppen fouten VOORDAT ze ontstaan — nog voor je code runt."

"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.]

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"

"Ik roep calculateTotal aan met een string in plaats van een getal. Wat zegt JavaScript?"

[Pauzeer. Wacht op reacties.]

"Niks. Geen fout. Cursor denkt: alles oké."

[Voer het uit.]

"Maar als je het draait? Kijk naar het output. Compleet verkeerd! JavaScript voert het uit en geeft je het verkeerde antwoord."

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

[Maak oogcontact.]

"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."

Slide 5: De Oplossing: TypeScript

[09:13 - 09:16]

"Nu met TypeScript. Zelfde functie."

[Maak een nieuw bestand demo.ts. Schrijf dezelfde code, maar met types.]

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

const total = calculateTotal("25.99", 3);

[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.]

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

"String — tekst. Easy. Number — getallen, zowel integers als floats. Boolean — true of false. Dit zijn de drie basis types."

[Toon wat er gebeurt als je verkeerd type toewijst.]

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."

[Hover over de error.]

"Nu arrays. Een array is een collection. TypeScript wil weten WELK TYPE in de array zit."

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

"Je zegt: 'Dit is een array van numbers.' Of 'Dit is een array van strings.'"

[Demo het omgekeerde:]

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

"Probeer een string in een number array te stoppen? TypeScript ziet het meteen."

[Toon de error message.]

"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."

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

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

// Beide zijn hetzelfde

"De eerste notatie is populairder. Sneller om te typen."

[Demo arrays van objecten.]

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."

let message = "Hello";

"Geen type annotering. Maar kijk..."

[Hover over message in je editor. Tooltip verschijnt.]

"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."

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

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

[Maak oogcontact.]

"Regel: Bij variabelen: let TypeScript infer. Bij functies: je MOET typen."

// 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: Redundant
const result: number = add(5, 3);

"Functies zijn waar types het meest helpen. Daar moet je explicit zijn. Variables? Let TypeScript denken."

BLOK 4: INTERFACES & TYPE ALIASES (15 min)

Slide 11: Interfaces - Object Vormen Definiëren

[09:40 - 09:47]

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

[Live coding in Cursor.]

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 autocomplete.]

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

"Cursor weet: User heeft deze velden. Alleen deze. Als je iets vergeet..."

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.]

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?"

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"
};

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

"Zo maak je flexible interfaces. Sommige dingen zijn altijd nodig (naam, email), andere zijn nice-to-have (telefoon)."

[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."

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

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."

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

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

"Type is ook voor object shapes:"

type Address = {
  street: string;
  city: string;
  zipCode: string;
};

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.'"

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:]

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."

// 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: interface voor objects, type voor alles. Maar beide zijn oké."

[Maak oogcontact.]

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

BLOK 5: FUNCTIES & ERRORS (10 min)

Slide 16: Functies Typen - Parameters & Return

[10:05 - 10:10]

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

// 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."

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

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

"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'

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 je types overeenstemmen."

Error 2: Property 'X' does not exist on type 'Y'

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."

Error 3: Object is possibly 'undefined'

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."

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

[Maak oogcontact.]

"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: ESCAPEROOM INTRO (10 min)

Slide 18: Cursor + TypeScript - Superkrachten

[10:15 - 10:17]

[Toon Slide 18.]

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

"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."

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)

"Als je een kamer goed solved, krijg je een escape code fragment. Alle 8 fragments bij elkaar? Je hebt het complete escape code."

[Toon een voorbeeld van een TODO-comment:]

// 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

"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."

Slide 20: Escaperoom Rules & Structuur

[10:20 - 10:25]

[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, 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"

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

[Pauzeer.]

"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. 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. Lees fouten — de TODOs zijn heel precies. Lees goed wat je moet doen."

[Kijk rond de zaal.]

"Vragen? Ik loop rond. Steek je hand op. We doen dit samen."

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
Controleer je eigen laptop/connectie
Heb de Escaperoom zip klaar
Bereid je voor op rondlopen (notieblok, pen)

BLOK 7: HANDS-ON PRAKTIJK (75 minuten)

[10:40 - 11:55]

Setup en Start

[10:40 - 10:45]

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

[Controleer dat iedereen de eerste room open heeft.]

"Oké, we starten met Room 1 op hetzelfde moment. 3... 2... 1... GO!"

[Start hen allemaal op hetzelfde moment. Dit creëert momentum.]

Rondlopen & Helpen

[10:45 - 11:45]

Je rol is drievoudig: Observeren, Helpen (zonder antwoord), Stimuleren.

A. Observeren

Loop door de zaal. Kijk naar schermen. Wie zit vast? Wie is snel klaar? Noteer mentaal waar de bottlenecks zijn.

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."

✓ 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:

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 11:00: "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:

// 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. Niet alles tegelijk.

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."

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.

E. Check-in Momenten

Plan drie korte check-ins:

11:00 — Eerste Check (halveway)

Iedereen op Room 2 of 3?
Wie has probleem en waar?
Energieniveau OK?

"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:20 — Tweede Check

Iedereen voortgang?
Zijn studenten "stuck in a loop" (dezelfde error, keer op keer)?

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."

F. Bonus Challenges (voor Snelle Studenten)

Voor studenten die alle 8 kamers hebben gedaan:

Bonus 1: Generics

function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

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

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

Bonus 3: Type Guards

function processInput(input: string | number) {
  if (typeof input === "string") {
    console.log(input.toUpperCase());
  } else {
    console.log(input + 10);
  }
}

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:45: "Laatste 10 minuten! Zet ineens aan!"

BLOK 8: AFSLUITING (15 minuten)

[11:55 - 12:00]

Slide 21: Samenvatting - Key Takeaways

[11:55 - 11:58]

"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."

[Zet dit op het bord of deel-screen.]

3 Key Takeaways:

"1. Types voorkomen RUNTIME ERRORS

Onthouden: je JavaScript code kan 3 uur later breken in productie. TypeScript zegt: 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."

[Pauzeer. Maak oogcontact.]

"Dit is jullie basis. Volgende les bouwen we hierop."

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:

Finish all 8 TypeScript Escaperoom rooms (if not done today)
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
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 (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

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. 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

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 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.
Zeg: "Room 7-8 is bonus. Finish 1-6, je bent golden."

CODE SNIPPETS KLAAR

Blok 2 Demo: JavaScript vs TypeScript

JavaScript (demo.js):

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

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

Output: Runtime error na eerste call succeeds.

TypeScript (demo.ts):

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

console.log(greet("tim"));
// console.log(greet(42)); // TypeScript error - caught in editor

Output: 0 errors.

Blok 3 Types

// 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"];

// 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); // number (inferred)

Blok 4 Interfaces & Types

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

// 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
}

// 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

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
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 (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!

34 KiB Raw Blame History

Les 4: TypeScript Fundamentals

Docenttekst (Spreektekst voor Tim)

BLOK 1: WELKOM & TERUGBLIK (10 min)

Slide 1: Titel - Les 4: TypeScript Fundamentals

Slide 2: Planning Vandaag

Slide 3: Terugblik Les 3 - Cursor & Debugging

BLOK 2: WAAROM TYPESCRIPT? (15 min)

Slide 4: Het Probleem met JavaScript

Slide 5: De Oplossing: TypeScript

Slide 6: Waarom TypeScript? - 4 Voordelen

Slide 7: TypeScript in het Ecosysteem

BLOK 3: BASIC TYPES & INFERENCE (15 min)

Slide 8: Basic Types - De Fundamenten

Slide 9: Arrays - Collecties Typen

Slide 10: Type Inference - TypeScript Raadt

BLOK 4: INTERFACES & TYPE ALIASES (15 min)

Slide 11: Interfaces - Object Vormen Definiëren

Slide 12: Optional Properties - De ? Syntax

Slide 13: Type Aliases - De type Keyword

Slide 14: Union Types - Multiple Mogelijkheden

Slide 15: Interface vs Type - Wanneer Welke?

BLOK 5: FUNCTIES & ERRORS (10 min)

Slide 16: Functies Typen - Parameters & Return

Slide 17: Veelvoorkomende Errors - Top 3

BLOK 6: ESCAPEROOM INTRO (10 min)

Slide 18: Cursor + TypeScript - Superkrachten

Slide 19: Hands-On - TypeScript Escaperoom Introductie

Slide 20: Escaperoom Rules & Structuur

PAUZE (15 minuten)

BLOK 7: HANDS-ON PRAKTIJK (75 minuten)

Setup en Start

Rondlopen & Helpen

A. Observeren

B. Helpen (zonder antwoord geven!)

C. Stimuleren

D. Veelvoorkomende Problemen & Oplossingen

E. Check-in Momenten

F. Bonus Challenges (voor Snelle Studenten)

Energy Management

BLOK 8: AFSLUITING (15 minuten)

Slide 21: Samenvatting - Key Takeaways

Slide 22: Huiswerk & Preview Les 5

PRAKTISCHE TIPS VOOR DE DOCENT

Setup Checklist (Voor Jezelf)

Energie en Ritme

Veelgestelde Studentenvragen

Troubleshooting

CODE SNIPPETS KLAAR

Blok 2 Demo: JavaScript vs TypeScript

Blok 3 Types

Blok 4 Interfaces & Types

Blok 5 Functions & Errors

POST-LES CHECKLIST

SAMENVATTING LESDOELEN

EINDE DOCENTTEKST

34 KiB

Raw Blame History

Slide 13: Type Aliases - De `type` Keyword