rubberducky/novi-lessons

Fork 0

Files

Tim Rijkse 9ffdecf2c4 fix: les 6

2026-03-11 14:07:00 +01:00

28 KiB

Raw Permalink Blame History

Les 04: TypeScript Fundamentals - Docenttekst

NOVI Hogeschool | Instructeur: Tim | Duur: 180 minuten

BLOK 1: HET PROBLEEM & DE OPLOSSING (0:00-0:20)

Slide 1: Titel

Tijd: 0:00-0:02

Tim staat enthousiast op, handen in de lucht

"Yo! Welkom in les 4! Wie hier heeft al gehoord van TypeScript? Of eigenlijk... wie denkt dat JavaScript gewoon super is en er niks aan mankeert?"

Tim loopt langs de eerste rij, maakt oogcontact, grijnst

"Ja ja, we gaan die illusie vandaag helemaal doorprikken. Want TypeScript? Dat gaat je leven redden. Serieus. Laten we beginnen!"

Tim geeft een enthousiaste thumbs-up

Slide 2: Planning Vandaag

Tijd: 0:02-0:04

Tim wijst naar het scherm met een pointer

"Oké, hier's het plan voor vandaag. We beginnen met: waarom TypeScript eigenlijk? Waar los je mee op? Dan gaan we de basis door – types, interfaces, allemaal die leuke dingen. Daarna wat geavanceerdere spullen. EN – en dit is het leukste deel – we gaan een escaperoom doen. Ja echt. Jullie moeten codeerpuzzels oplosten in TypeScript. Is wel gemotiveerd."

Tim knipoogt

"En op het einde: huiswerk. Helaas. Maar niet eng, je krijgt files, je converteert ze. Zien we na de pauze."

Tim slaat handen in elkaar

Slide 3: Terugblik Les 3

Tijd: 0:04-0:07

Tim loopt naar het whiteboard, pakt een marker

"Vorige week: debugging. We hadden het over proactieve debugging versus reactieve debugging, remember? Je zoekt niet na je code kapot gaat, je bouwt het op zodat het nóóit kapot kan gaan."

Tim schrijft op het bord: "PROACTIVE > REACTIVE"

"TypeScript is de ultieme proactieve debugging tool. Jullie zullen zien. Voordat je code draait, zegt TypeScript al: 'Yo, dit gaat niet goed aflopen, hier's waarom.' Die is je bodyguard."

Tim zet de marker terug

Slide 4: Het Probleem met JavaScript

Tijd: 0:07-0:12

Tim opent Cursor, navigeert naar een nieuw bestand

"Oké, stel: je hebt een functie. Een super simpele functie. Berekent totale prijs. Volgt mij?"

Tim typt langzaam in Cursor

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

// Iemand roept aan:
calculateTotal("29.99", 5);

Tim voert het uit in de Node REPL (als beschikbaar) of toont de output

"Zien wat er gebeurt? String keer getal? JavaScript zegt: 'Sure thing bro!' En je krijgt... NaN. Not a Number. En jij zoekt een uur naar wat je fout hebt gedaan."

Tim richt zich rechtstreeks tot de klas, voert ernstig

"In echt code? Dit gebeurt VEEL. Soms ziet je het meteen, soms niet. En dan zit je client in productie en die zegt: 'Waarom berekent je site niet goed?' Oeps."

Tim slaat tegen het bureaublad voor effect

Slide 5: De Oplossing: TypeScript

Tijd: 0:12-0:16

Tim opent een nieuw TypeScript-bestand in Cursor

"Nu... we doen hetzelfde. Maar met TypeScript."

Tim typt

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

// Iemand probeert:
calculateTotal("29.99", 5);

Tim hoort op het scherm de rode squiggle onder de "29.99" – dit is live in Cursor

"BOOM. Voordat je code draait, zegt TypeScript al: 'Nee. Dit parameter? Dit moet een number zijn. Je geeft een string. Ga weg.' En jij denkt: 'Oh jee, thank God!'"

Tim wijst naar de error

"Dit is het genie van TypeScript. Je bugs gaan weg. Niet in productie. HIER. In development. Terwijl jij nog aan het typen bent."

Slide 6: Waarom TypeScript? - 4 Voordelen

Tijd: 0:16-0:18

Tim schuift naar een nieuwe slide met 4 bolletjes

"Vier redenen waarom TypeScript je leven beter maakt. Één: Fouten voorkomen. We hebben het zojuist gezien. Twee: Automatische documentatie. Je types vertellen je precies wat een functie verwacht. Drie: Autocomplete. Cursor gaat je helpen, je hoeft niet meer te googlen wat een object kan doen. Vier: Refactoring. Als jij een ding verandert, TypeScript zegt je overal anders waar jij ook moet veranderen."

Tim steekt vier vingers op

"En als ik heel eerlijk ben? TypeScript voelt als hacken met een safety net. Je bent niet bang meer."

Slide 7: TypeScript in het Ecosysteem

Tijd: 0:18-0:20

Tim toont logos op het scherm: Next.js, React, Vue, Deno

"En hé, dit is niet niche. Next.js? TypeScript. React? Iedereen doet het in TypeScript. Vue? Hetzelfde verhaal. Deno – dat is als Node.js 2.0 – voelt zich TypeScript-native. Dit is niet 'ooh TypeScript is hip', dit is: de hele industrie bouwt alles in TypeScript. Als je TypeScript kan, ben je gold."

Tim sluit het scherm

"Dus laten we je goed maken in TypeScript. Kom op!"

BLOK 2: TYPE BASICS (0:20-0:45)

Slide 8: Basic Types

Tijd: 0:20-0:25

Tim opent Cursor en maakt een nieuw TypeScript-bestand

"Types. De basis. Laten we beginnen met het eenvoudigste. String. Number. Boolean."

Tim typt

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

Tim hovert over elk variable

"Zie je? Ik zeg: deze variable is een string. Deze is een number. Deze is een boolean. TypeScript checkt nu dat je niet per ongeluk een number aan de string geeft."

Tim typt verder

name = 42; // ERROR!
age = "not a number"; // ERROR!

Tim toont hoe Cursor rode squiggles geeft

"Bam. TypeScript zegt nee."

Tim haalt adem

"En dan: any. any is als... jij zegt tegen TypeScript: 'Jij gaat mijn type niet controleren.' Dat kan. Maar dat is niet slim. any is de vijand. Vermijd any. Serieus."

Tim schrijft in grote letters op het whiteboard: "ANY = VIJAND"

Slide 9: Arrays

Tijd: 0:25-0:28

Tim gaat terug naar Cursor

"Arrays. Super belangrijk omdat jullie arrays elke dag gebruiken."

Tim typt

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];

"Twee manieren om het te zeggen. number[] met vierkante haken. Of Array met angle brackets. Allebei goed. Eerst is makkelijker."

Tim toont wat er fout gaat

let mixed: number[] = [1, "twee", 3]; // ERROR!

"Als je zegt 'dit is een array van numbers', mag je geen string toevoegen. TypeScript zal je tegenwerken."

Tim voelt een student aarzelen

"En als je écht mixed stuff in je array wilt, dan zeggen we: number | string. Daar komen we later op terug. Maar voor nu: arrays met one type. Keep it clean."

Slide 10: Type Inference

Tijd: 0:28-0:32

Tim opent een nieuw stukje code

"Cool feature: type inference. Dat wil zeggen: TypeScript is slim genoeg om types zelf uit te vinden."

Tim typt

let count = 5;
// TypeScript ZIET: dit is een number
count = "hello"; // ERROR! Jij zei niet number, maar TypeScript WEET het.

Tim hovert over count

"Hover over count. Zie je? Cursor zegt: 'let count: number'. TypeScript wist het. Jij hoefde het niet te zeggen."

Tim toont nog een voorbeeld

function getAge(name: string) {
  // Wat geeft deze functie terug? TypeScript weet het niet...
  return 25;
  // AH! Jij returnt een number. Dus TypeScript: return type is number.
}

"Met functies is het omgekeerd. Jij zegt de parameters explicit. Maar de return type – eh, dat kan TypeScript ook uitvinden. Maar wij willen het explicit. Dat is schoner, beter voor je team."

Tim schrijft op het bord: "Parameters explicit. Return types explicit."

Slide 11: Interfaces

Tijd: 0:32-0:37

Tim maakt een nieuw bestand

"Interfaces. Dit is waar TypeScript echt powerful wordt. Een interface is als een contract. Je zegt: 'Dit object moet deze shape hebben.'"

Tim typt in Cursor

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

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com"
};

Tim hovert over user

"Je zegt: user is van type User. TypeScript checkt nu: has het deze object alle properties? Ja. Zijn ze het juiste type? Ja. Oké!"

Tim breekt het intentioneel

const badUser: User = {
  id: "one",  // ERROR! Dit moet een number zijn
  name: "Bob"
  // ERROR! email is missing!
};

Tim wijst naar de errors

"TypeScript ziet allebei. Wrong type. Missing property. Dit is GOLD. Jij bouwt je object perfect voordat je het zelfs probeert."

Tim gaat verder

"En – let op – als jij een typo maakt in property name, ziet TypeScript dat ook. Je typt 'emial' in plaats van 'email'? TypeScript zegt: 'Yo, dit property bestaat niet in User.' Boom."

Slide 12: Optional Properties

Tijd: 0:37-0:40

Tim voegt toe aan het Cursor-bestand

"Maar soms. Soms is iets optional. Misschien hebben we de email niet altijd."

Tim typt

interface Product {
  id: number;
  title: string;
  description?: string;  // Optional! Met ?
}

const product: Product = {
  id: 1,
  title: "Laptop"
  // description is optional, no error
};

Tim hovert over de ?

"Die vraagteken daar? Dat zegt: dit property mag er zijn, maar hoeft niet. TypeScript is oké met beide."

Tim toont wat er gebeurt als je het probeert te gebruiken

console.log(product.description.toUpperCase()); // ERROR!
// description is undefined, je kan niet .toUpperCase() op undefined doen

"Maar let op – als je het gebruikt, zegt TypeScript: 'Dit kan undefined zijn. Jij moet checken eerst.'"

Tim wijst naar code

"Dus je doet: if (product.description) { ... } Dan ben je safe."

Slide 13: Interface vs Type

Tijd: 0:40-0:43

Tim toont twee code-blokken naast elkaar

"Vraag die iedereen heeft: interface of type? Ze zien er hetzelfde uit."

// Interface
interface User {
  name: string;
}

// Type
type User = {
  name: string;
};

"Ze doen hetzelfde. Maar er zijn subtiele verschillen. Interface kan je 'uitbreiden' – we zien dat later. Type is voor alles – strings, numbers, unions, van alles wat."

Tim schrijft op het bord

"Rule of thumb: interfaces voor objects. Types voor alles. En wat jullie in productiecode zien? Bedrijven hebben hun voorkeur. Soms interface, soms type. Allebei oké."

Tim haalt schouders op

"Voor nu: gebruiken wat aanvoelt goed. Je zal beide zien."

Slide 14: Type Aliases & Union Types

Tijd: 0:43-0:45

Tim opent een nieuwe slide met code

"Type aliases. Ermee kan je een type een naam geven. Super handig voor... dingen die je veel gebruikt."

Tim typt

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

const orderStatus: Status = "pending"; // OK
const badStatus: Status = "shipped";   // ERROR! Dit is niet in de union

Tim wijst naar de | characters

"Die pipe symbols? Die zeggen: OR. Dit kan dit zijn, OF dit, OF dit. Niets anders. En als je iets anders probeert... TypeScript zegt nee."

Tim toont een pratisch voorbeeld

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function makeRequest(method: HttpMethod) {
  // ...
}

makeRequest("GET");     // OK
makeRequest("PATCH");   // ERROR!

"Dit is ook wel literal types heten. Maar ja, types die specifieke waarden zijn. Super powerful voor je code te constrainen. Geen more typo's met strings."

BLOK 3: GEAVANCEERDE TYPES (0:45-1:05)

Slide 15: Literal Types

Tijd: 0:45-0:49

Tim maakt een nieuw bestand met voorbeelden

"Literal types. Het gaat erom: types kunnen niet alleen 'number' zijn, maar ook 'dit specifieke getal.'"

Tim typt voorbeelden

// String literals
type Direction = "north" | "south" | "east" | "west";

// Number literals
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

// Even een praktisch voorbeeld
type HttpMethod = "GET" | "POST" | "DELETE";

function apiCall(url: string, method: HttpMethod) {
  // ...
}

apiCall("/users", "GET");    // OK
apiCall("/users", "PATCH");  // ERROR! PATCH is niet in HttpMethod

Tim wijst naar de errors

"Dit is so powerful. Jij zegt niet 'geef me een string.' Jij zegt 'geef me exáct deze strings.' TypeScript guard je tegen typo's en logische fouten. Geen 'GETT' more, geen rare method names."

Tim gaat terug naar Direction

"En dezen is handig voor game dev. Direction – north, south, oost, west. Gamer gaat niet random toestand intypen. Jij defines precies wat possible is."

Slide 16: Type Narrowing

Tijd: 0:49-0:54

Tim opent een ander Cursor-bestand

"Type narrowing. Dit is een KEY concept. Je hebt een variable die meerdere types kan zijn. Maar als jij een check doet, wordt TypeScript slimmer."

Tim typt

function processInput(input: string | number) {
  // Hier: input kan string OF number zijn
  console.log(input.toUpperCase()); // ERROR! number heeft geen toUpperCase
}

Tim wijst naar de error

"TypeScript ziet: dit kan beide types zijn. Als je .toUpperCase() roept, kan het breken als input een number is. Dus error."

Tim voegt toe

function processInput(input: string | number) {
  if (typeof input === "string") {
    // Hier: TypeScript WEET: dit is een string
    console.log(input.toUpperCase()); // OK!
  } else {
    // Hier: TypeScript WEET: dit is een number
    console.log(input.toFixed(2)); // OK!
  }
}

Tim hovert over input in elk blok en toont hoe het type is 'narrowed'

"Genius! Jij doet een typeof check. TypeScript ziet die check en zegt: 'Ah, jij hebt gechecked. Ik weet nu dat het een string is. Jij mag .toUpperCase() roepen.' TypeScript wordt slimmer samen met jou."

Tim benadrukt dit

"Dit gaat jullie life easier maken. Veel safer code. Minder bugs."

Slide 17: Type Guards

Tijd: 0:54-0:58

Tim gaat verder op het scherm

"Type guards. Gerelateerd aan narrowing. Dit zijn manieren waarop jij TypeScript kunt zeggen: check deze condition, dan weet je meer."

Tim toont verschillende guards

// typeof guard
if (typeof value === "string") { ... }

// "in" operator - check of property bestaat
if ("name" in user) { ... }

// instanceof - check of het een class instance is
if (value instanceof Date) { ... }

// Literal check
if (status === "approved") { ... }

Tim voegt voorbeelden toe

type Animal = { type: "dog"; bark: () => void } | { type: "cat"; meow: () => void };

function makeSound(animal: Animal) {
  if (animal.type === "dog") {
    animal.bark(); // OK! TypeScript weet dit is een dog
  } else {
    animal.meow(); // OK! Dit is een cat
  }
}

"Je ziet? Je definieert types, je doet checks, TypeScript helpt je."

Tim slaat zijn handen in elkaar

Slide 18: Intersection Types

Tijd: 0:58-1:01

Tim toont een nieuwe slide

"Intersection types. Veel minder gebruikt dan unions, maar handig als je 'multiple things tegelijk' nodig hebt."

Tim typt

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface User {
  id: number;
  name: string;
}

type UserWithTimestamp = User & Timestamped;

const user: UserWithTimestamp = {
  id: 1,
  name: "Alice",
  createdAt: new Date(),
  updatedAt: new Date()
};

Tim wijst naar de &

"Die ampersand? Die zegt: Neem User EN Neem Timestamped. Merge dat. Het object moet alles van both hebben."

Tim vergelijkt met union

"Union (|) zegt: dit OR dit. Intersection (&) zegt: dit AND dit. Je hebt alles nodig."

Tim geeft een praktisch voorbeeld

"Dit is handig als je, say, een generieke Timestamped mixin hebt die je op alles wil toepassen. Models, users, posts, van alles."

Slide 19: Readonly & Tuples

Tijd: 1:01-1:03

Tim opent twee voorbeelden

"Twee korte dingen. Readonly en tuples. Readonly: je zegt 'dit object mag niet veranderd worden.'"

interface Config {
  readonly apiUrl: string;
  readonly version: string;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  version: "1.0.0"
};

config.apiUrl = "hacked"; // ERROR! Je kan het niet veranderen

Tim wijst

"Protect je data. Iemand gaat accidently de config niet overschrijven."

Tim gaat naar tuples

type Coordinates = [number, number];
const point: Coordinates = [10, 20]; // OK

const badPoint: Coordinates = [10, "20"]; // ERROR!
const tooMany: Coordinates = [10, 20, 30]; // ERROR!

"Tuple: array met vaste lengte en vaste types. [number, number]. Precies twee numbers. Niet meer, niet minder. Super handig."

Tim voegt toe

"Fun fact: useState in React? Dat geeft je een tuple terug. [state, setState]. Dat zien jullie in Les 5."

Slide 20: Functies Typen

Tijd: 1:03-1:06

Tim toont volledige function typing

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

// Optional parameter
function greet(name: string, greeting?: string): string {
  return greeting ? `${greeting}, ${name}!` : `Hello, ${name}!`;
}

// Function as parameter
function executeCallback(callback: (value: number) => void): void {
  callback(42);
}

Tim wijst naar elk stukje

"Parameters – explicit. Return type – explicit. Optional params met ?. En as laatste: functies als parameters – je zegt 'dit moet een function zijn die een number verwacht en niets teruggeeft (void).'"

Tim benadrukt

"Dit klinkt complex, maar het maakt je functie super duidelijk. Wie hem read, weet exact wat je expecteert. Geen surprises."

Slide 21: Generics Preview

Tijd: 1:06-1:08

Tim toont een korte intro

function firstItem<T>(array: T[]): T {
  return array[0];
}

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

"Generics. Dat is de magie van TypeScript. Je schrijft code die met ANY type werkt, maar nog steeds type-safe. Dit is een preview. Les 5 gaat volledige focus op generics gaan. Voor nu: 'ooh, interessant.'"

Tim sluit het af

"Als je denkt 'wow, dat is complex' – ja. Dat is oké. Generics zijn avanceerd. We werken eraan."

PRE-PAUZE WRAP-UP (1:08-1:10)

Slide 22: Veelvoorkomende Errors Top 5

Tijd: 1:08-1:10

Tim toont een slide met de top 5 fouten

"Snelle summary. Top 5 errors die jullie gaan zien. Eén: Type mismatch. Je zegt number, je geeft string. Twee: Missing property. Je hebt een interface, maar je object mist iets. Drie: Possibly undefined. Je probeert een method op iets te roepen dat undefined kan zijn. Vier: Union argument error – je geeft function een type die niet in de union zit. Vijf: Property typo. Je typt 'emial' in plaats van 'email'. TypeScript's got your back op all five."

Tim wijst naar het scherm

"Als je een error ziet, read de error message. TypeScript is pretty descriptive. Het zal je vertellen wat wrong is."

Slide 23: Cursor + TypeScript Superkrachten

Tijd: 1:08-1:10 (snel, ~30 sec)*

Tim opent Cursor

"One last thing: Cursor en TypeScript zijn BFFs. IntelliSense – je typt 'user.' en Cursor zegt 'oh, user heeft id, name, email' en autocomplete voorstellen. Go-to-definition – je CMD+click op een type, je gaat naar de definition. Errors inline. TypeScript errors verschijnen right there in je editor. Dit is super powerful workflow."

Tim sluit af

"Okay. Pauze. 15 minuten. Stroom jezelf voor de escaperoom!"

PAUZE (1:10-1:25)

Tim zit even, drinkt koffie, helpt studenten individueel met vragen

BLOK 4: ESCAPEROOM (1:25-2:25)

Slide 24: Escaperoom Introductie

Tijd: 1:25-1:27

Tim staat op, vol energie na pauze

"Oké, moment where the fun starts. Escaperoom. Dit is een serie van 10 TypeScript kamers. Elke kamer is een codeerpuzzel. Jij hebt errors. Jij moet ze fixen. Moeilijkheid loopt op van easy tot heel hard."

Tim toont het scherm met 10 kamers

"Kamers 1 tot 6 zijn getarget op basics die we net geleerd hebben. Kamers 7 tot 10 zijn bonus. Ik zou zeggen: doel is minstens 1 tot 6. Als je 7-10 haalt, legendary."

Tim wijst naar de timer

"We hebben ruwweg 55 minuten. Dat is harde sprint, dus focus. Let's go."

Slide 25: Escaperoom Rules

Tijd: 1:27-1:30

Tim toont de regels groot op het scherm

"Rules. Eén: AI is DISABLED. Dit gaan jullie zien. Jullie doen Cmd+Shift+P, typ 'Disable Cursor Tab', en hit enter. Ik check langs en zorg ervoor dat AI uit is. Dit is practice, niet cheating."

Tim steekt zijn vinger op

"Twee: Geen any. Jullie voelen mij al aankomen – any is de vijand. Als je any typt, ik zie dat. Not cool. Type het goed."

Tim wijst naar de timer

"Drie: Timing. 55 minuten. Daarna sammelen we en bespreken de solutions. Jullie kunnen mij helpen als je stuck bent – ik loop rond. Vraag vragen."

Tim loopt de klas in

"Laten we beginnen. Open de escaperoom. Camera 1."

TIM'S ACTIONS DURING ESCAPEROOM:

Walk around checking Cursor AI is disabled on each laptop
Check progress on the kamer slides
When students are stuck:
- Ask: "What type does this need to be?"
- Ask: "Is this property required?"
- Avoid: giving direct solutions
- Encourage: "You're close. Check the error message."
Keep energy up: "Nice work on kamer 3!" "Kamer 5 is tricky, that's normal!"
Note: Students who finish early can move to bonus kamers 7-10
If someone is really stuck on basics, help them understand the principle, not the code

ESCAPEROOM STRUCTURE (for reference):

Kamer 1: Basic type mismatch (easy)
Kamer 2: Interface missing property (easy)
Kamer 3: Array typing (easy)
Kamer 4: Optional properties (medium)
Kamer 5: Union types (medium)
Kamer 6: Type narrowing (medium)
Kamer 7: Intersection types (hard)
Kamer 8: Type guards (hard)
Kamer 9: Literal types (hard)
Kamer 10: Advanced challenge (very hard)

AFSLUITING (2:25-2:45)

Slide 26: Samenvatting

Tijd: 2:25-2:30

Tim staat vooraan, rustig, reflectief

"Oké. Hoe ging het? Goed? Escaperoom was crazy, ja?"

Tim wacht op antwoorden, grijnst

"Here's het important stuff dat we vandaag covered. Eén: TypeScript catches errors voordat ze in production gaan. Preventie is beter dan debugging. Twee: Types zijn contracts – interfaces en types definieert die contract. Drie: Literal types en union types geven je superkrachten voor je data te constrain. Vier: Type narrowing – check je types, TypeScript wordt slimmer. Vijf: Generics – a preview, we doen dit groter in Les 5. En zes: Cursor + TypeScript = superkrachten. IntelliSense, errors inline, alles."

Tim telt op z'n vingers

"Onthoud: any is je vijand. Types zijn je vriend. Als TypeScript je een error geeft, say thank you. Die saves je van bugs later."

Tim slaat handen in elkaar

Slide 27: Huiswerk & Preview Les 5

Tijd: 2:30-2:40

Tim opent het huiswerk bestand

"Huiswerk. Jullie krijgen vier JavaScript files: users.js, products.js, orders.js, utils.js. Die zijn heel basaal – geen types. Jullie gaan dat converteren naar TypeScript. Toevoegen types. Interfaces. Allemaal wat we today geleerd hebben."

Tim toont de files

"Niet moeilijk – het gaat om oefenen. Convert de files, type alles correctly, en TypeScript errors weg. Ik verwacht dat aanstaande week ingeleverd."

Tim gaat naar preview

"Les 5: Generics! We gaan dieper in de magie. Hoe schrijf je code die met multiple types werkt maar nog steeds safe is. React hooks typing – useState, useEffect, alles. Dat is heavy, dus zorg je brain is ready. En we gaan wat React-specific patterns zien."

Tim sluit af

"Doen jullie best met huiswerk, dan Les 5 gaat much smoother."

Vragen & Afsluiting

Tijd: 2:40-2:45

Tim leunt tegen het bureau

"Vragen? Iets wat niet duidelijk is? TypeScript heeft veel moving parts – oké als je heads spinning."

Tim wacht op vragen, beantwoordt ze geduldig

Als geen vragen:

"Cool. Dan think ik het was een solid les. Jullie did good today. Ik'm proud. See you volgende week. Werk dat huiswerk uit, tot ziens!"

Tim geeft een salute

SETUP CHECKLIST VOOR TIM (VOOR DE LES)

Cursor opgestart en TypeScript extension actief
Escaperoom kamers geladen en getest (kamers 1-10)
Node.js REPL beschikbaar (of een way to show console.log output)
Whiteboard markers klaar (voor notes)
Timer gedownload/klaar voor escaperoom (55 minuten)
Huiswerk files gereed om te delen (users.js, products.js, orders.js, utils.js)
Student laptops: iedereen Cursor geïnstalleerd, TypeScript werkt
Backup plan: je telefoon als timer als systeem timer fails

POST-LESSON CHECKLIST

Collect escaperoom progress notes (wie welke kamers haalde)
Share huiswerk files via email/platform
Prep Les 5 slides (Generics + React typing)
Note: Welke students hadden moeite met type narrowing? Extra explain in Les 5.
Feedback geven op escaperoom – "Saw you struggle with kamer 5, we'll revisit unions in L5"

VEELGESTELDE VRAGEN & ANTWOORDEN

V: Waarom TypeScript en niet JavaScript? A: "TypeScript finds bugs BEFORE they reach users. JavaScript is cool, but errors hide. TypeScript is like having a co-pilot checking your code."

V: Is any echt slecht? A: "Ja. Any means 'disable TypeScript.' Soms je perse any nodig (legacy code), but aim to avoid. Als je any used, je misses het hele point."

V: Difference between interface en type? A: "Both work for objects. Interface kan je uitbreiden (inheritance). Type is general – unions, literals, anything. For objects, use interface. For specifieke types (unions, literals), use type."

V: Waarom TypeScript code langer/chattier is dan JavaScript? A: "Ja, more lines. Maar die lines beschermen je. Denk: upfront typing investment >> hours lost debugging. Totally worth it."

V: Generics zien complicated. Ga ik het ooit snappen? A: "Ja. Les 5 dieper erin. Think: 'code that works with any type but stays safe.' Clicks in na een paar examples. Trust the process."

V: Kan ik TypeScript in production gebruiken? A: "Yes! Dat doet iedereen. It compiles to JavaScript. Production runs JavaScript, development checks TypeScript. Best of both worlds."

V: Wat als ik een library use die geen types hebt? A: "Either: DefinitelyTyped (community types), or any as last resort. We see both in industry."

RONDLOPEN TIPS TIJDENS ESCAPEROOM

Start met ronde langs alle stations – check iedereen aan het werk is
Observeren: wie struggles met basic type syntax? Zet mental note.
Timing checks: "Kamers 1-3 moet max 15 minuten zijn."
Encouragement: "Kamer 4 is where it gets interesting!" "You're doing great!"
If someone stuck 5+ minuten op één kamer: "What error does TypeScript give? Read it with me."
Avoid: "Type it like this." Better: "What does the error say? What type does it need?"
Celebrate wins: "Yo! Kamer 6 complete! Nice work!"

ENERGY MANAGEMENT TIPS

Opening (0:00-0:20): HIGH energy. Hype them up. TypeScript solves real problems!
Type Basics (0:20-0:45): Medium energy. Lot of code, keep it engaging with live coding.
Advanced Types (0:45-1:05): Slightly lower – complex concepts. Make sure to pause, check understanding.
Pre-Break (1:05-1:10): Recap energy – build confidence for escaperoom.
Pauze: You rest too. Drink water.
Escaperoom (1:25-2:25): HIGH energy! Walking, encouraging, being present. This is fun!
Afsluiting (2:25-2:45): Wind down. Reflective. Proud of them. Preview excitement for Les 5.

LIVE CODING NOTES

Slide 8 (Basic Types):

Open Cursor, create types.ts
Type examples slowly, let them see the errors
Hover to show inferred types
Make errors intentional – show the red squiggles

Slide 10 (Type Inference):

Show how Cursor reveals inferred types on hover
Emphasize: "TypeScript knows, even if you don't say it"

Slide 11 (Interfaces):

Build interface step-by-step
Create object that matches, then intentionally break it
Show missing property and type mismatch errors

Slide 16 (Type Narrowing):

Start with union type error
Then add if-check and show how error disappears
This is the "aha!" moment – make it clear

Slides 4-5 (JavaScript vs TypeScript):

If running Node available, show actual NaN output in JS
Show TypeScript error in editor

ESCAPEROOM EXPECTED COMPLETION RATES

Based on difficulty:

Kamers 1-3: 90%+ students finish
Kamer 4: 80%+ finish
Kamers 5-6: 60%+ finish
Kamers 7-9: 20-30% finish (bonus)
Kamer 10: <10% finish (ultra-bonus)

If most students stuck on kamer 4+, may need extra support in Les 5 before moving to generics.

CURRICULUM ALIGNMENT

This Lesson (Les 04): Types, interfaces, basic constraints
Next Lesson (Les 05): Generics, React typing (useState, etc), advanced patterns
Later: Advanced types (conditional types, utility types, type helpers)
Real-world skill: Full TypeScript mastery for production React/Next.js apps

END OF DOCENTTEKST

Vragen or opmerkingen? Contact Tim or course coordinator.

28 KiB Raw Permalink Blame History Unescape Escape

Les 04: TypeScript Fundamentals - Docenttekst

BLOK 1: HET PROBLEEM & DE OPLOSSING (0:00-0:20)

Slide 1: Titel

Slide 2: Planning Vandaag

Slide 3: Terugblik Les 3

Slide 4: Het Probleem met JavaScript

Slide 5: De Oplossing: TypeScript

Slide 6: Waarom TypeScript? - 4 Voordelen

Slide 7: TypeScript in het Ecosysteem

BLOK 2: TYPE BASICS (0:20-0:45)

Slide 8: Basic Types

Slide 9: Arrays

Slide 10: Type Inference

Slide 11: Interfaces

Slide 12: Optional Properties

Slide 13: Interface vs Type

Slide 14: Type Aliases & Union Types

BLOK 3: GEAVANCEERDE TYPES (0:45-1:05)

Slide 15: Literal Types

Slide 16: Type Narrowing

Slide 17: Type Guards

Slide 18: Intersection Types

Slide 19: Readonly & Tuples

Slide 20: Functies Typen

Slide 21: Generics Preview

PRE-PAUZE WRAP-UP (1:08-1:10)

Slide 22: Veelvoorkomende Errors Top 5

Slide 23: Cursor + TypeScript Superkrachten

PAUZE (1:10-1:25)

BLOK 4: ESCAPEROOM (1:25-2:25)

Slide 24: Escaperoom Introductie

Slide 25: Escaperoom Rules

AFSLUITING (2:25-2:45)

Slide 26: Samenvatting

Slide 27: Huiswerk & Preview Les 5

Vragen & Afsluiting

SETUP CHECKLIST VOOR TIM (VOOR DE LES)

POST-LESSON CHECKLIST

VEELGESTELDE VRAGEN & ANTWOORDEN

RONDLOPEN TIPS TIJDENS ESCAPEROOM

ENERGY MANAGEMENT TIPS

LIVE CODING NOTES

ESCAPEROOM EXPECTED COMPLETION RATES

CURRICULUM ALIGNMENT

28 KiB

Raw Permalink Blame History