20 KiB
20 KiB
Les 4: TypeScript Fundamentals (Deel 1)
Lesdetails
| Onderdeel | Details |
|---|---|
| Lessenreeks | Les 4 van 18 |
| Onderwerp | TypeScript Fundamentals |
| Curriculumdeel | Deel 2: Technical Foundations (Les 4-9) |
| Datum | - |
| Duur totaal | 3 uur (180 minuten) |
| Spreektijd | ~55 minuten |
| Hands-on | ~75 minuten |
| Pauze | 15 minuten |
| Niveau | Beginner/Intermediate |
| Docent | - |
Leerdoelen
Na deze les kan de student:
- Uitleggen waarom TypeScript waardevol is voor developers en hoe het zich verhoudt tot JavaScript
- Gebruiken van basic types: string, number, boolean, arrays en tuples
- Begrijpen hoe type inference werkt en wanneer TypeScript types automatisch detecteert
- Schrijven van interfaces en type aliases voor complexe objecten
- Toepassen van union types en literal types in praktische situaties
- Implementeren van optional properties en functies met type safety
- Lezen en oplossen van TypeScript errors met behulp van Cursor
- Onderscheiden tussen interface en type alias en weten wanneer welke te gebruiken
Lesverloop
Blok 1: Welkom & Terugblik (10 min | 09:00-09:10)
Doel: Studenten welkom heten, context schetsen, en vorige les evalueren
Activiteiten:
- Welkomslide tonen
- Korte vraag over huiswerk Les 3: "Wie heeft de Cursor-vraagstukken afgerond? Wat was lastig?"
- Feedback op Les 3 geven (tips voor beter gebruik van Cursor)
- Overgangsmoment: "Vandaag leren we de taal die Cursor schrijft – TypeScript. Dit is wat je nodig hebt om echt met Cursor, React en Next.js te werken."
Spreektijd: ~5 min | Presentatie: ~5 min
Slides/Materiaal:
- Titelbanner Les 4
- Screenshot vorige les (Cursor in actie)
Blok 2: Waarom TypeScript? (15 min | 09:10-09:25)
Doel: Motivatie en context voor TypeScript
Theoretisch onderdeel (~10 min):
-
Het probleem met JavaScript:
- Runtime errors: bugs die pas in productie ontdekt worden
- Voorbeeld:
const user = { name: "Jan" }; console.log(user.emai);(typo, geen fout!) - Geen type safety: functies accepteren willekeurig wat
-
De oplossing: TypeScript:
- Compile-time type checking (errors voorkomen voor je code draait)
- Betere autocomplete in IDE / Cursor
- Self-documenting code
- Beter voor AI (Cursor snapt je code beter)
-
TypeScript in het ecosysteem:
- Next.js: standaard TypeScript setup
- React: de industry standard (95% professionele projecten)
- Cursor: geschreven voor TypeScript developers
Live demo (~5 min):
- Open Cursor
- Toon JavaScript-voorbeeld met bug
- Converteer naar TypeScript
- Toon hoe TypeScript de fout aangeeft voordat je het draait
Spreektijd: ~12 min | Live coding: ~3 min
Slides/Materiaal:
- "JavaScript vs TypeScript" vergelijking
- Live demo Cursor (voorbereid)
- Code snippets JavaScript/TypeScript
Blok 3: Basic Types & Type Inference (15 min | 09:25-09:40)
Doel: Fundamentele types begrijpen
Theoretisch onderdeel (~10 min):
-
Primitieve types:
// Expliciet typen const name: string = "Alice"; const age: number = 25; const isActive: boolean = true; // Type inference (TypeScript raadt het zelf) const city = "Amsterdam"; // TypeScript weet: dit is string -
Arrays:
const numbers: number[] = [1, 2, 3]; const names: string[] = ["Alice", "Bob"]; const mixed: (string | number)[] = ["Alice", 25]; // Union type // Generische notatie const items: Array<number> = [1, 2, 3]; -
Type inference:
- TypeScript detecteert types uit context
- Tip: niet overal types schrijven (onnodig verbose)
- Best practice: inference gebruiken waar duidelijk, types schrijven waar complex
-
Speciale types:
any: "ik weet niet wat dit is" (vermijden!)unknown: "veiligeany"nullenundefined(zelfstandige types in strikt mode)
Live coding (~5 min):
- Toon type inference in Cursor (hover over variabelen)
- Toon fout:
const x: number = "hello"; - Toon hoe Cursor autocomplete helpt
Spreektijd: ~11 min | Live coding: ~4 min
Slides/Materiaal:
- Type-overzicht tabel
- Voorbeeldcode (met hover-screenshots)
- Common mistakes
Blok 4: Interfaces & Type Aliases (15 min | 09:40-09:55)
Doel: Complexe structuren typen
Theoretisch onderdeel (~10 min):
-
Interfaces voor objecten:
interface User { id: number; name: string; email: string; age?: number; // Optional } const user: User = { id: 1, name: "Alice", email: "alice@example.com" // age is optional }; -
Type aliases:
type Status = "pending" | "approved" | "rejected"; // Union type type ID = number | string; interface Request { id: ID; status: Status; } -
Union types & literal types:
type ResponseType = "success" | "error" | "pending"; const response: ResponseType = "success"; // OK // const invalid = "warning"; // Error! -
Interface vs Type:
- Interface: voor objecten, kan extended worden, duidelijk intent
- Type: meer flexibel, ook voor primitives, union types
- In praktijk: gebruik interface voor objecten, type voor unions
Live coding (~5 min):
- Definieer een User interface in Cursor
- Toon error bij foute property
- Toon autocomplete voor interface-properties
- Refactor naar type alias
Spreektijd: ~11 min | Live coding: ~4 min
Slides/Materiaal:
- Interface voorbeeld
- Type alias voorbeeld
- Venn diagram: interface vs type
- Best practices tabel
Blok 5: Functies & Errors (10 min | 09:55-10:05)
Doel: Functies typen en errors lezen
Theoretisch onderdeel (~7 min):
-
Function signatures:
// Parameters typen function greet(name: string): string { return `Hello, ${name}`; } // Arrow function const add = (a: number, b: number): number => a + b; // Optional parameter function sayHi(name?: string): void { console.log(`Hi ${name || "stranger"}`); } // Return type inference const multiply = (x: number, y: number) => x * y; // automatisch number -
Veelvoorkomende TypeScript errors:
Type 'string' is not assignable to type 'number'Property 'xxx' does not exist on type 'yyy'Argument of type 'string' is not assignable to parameter of type 'number'- Hoe te lezen: "TypeScript zegt dat X niet past in Y"
-
Cursor helpt:
- Error messages klikken = instant fix suggestion
- Hover = type info
- Autocomplete voorkomt errors
Live coding (~3 min):
- Definieer functie met foute parameter-types
- Toon error
- Fix met Cursor quick fix
Spreektijd: ~8 min | Live coding: ~2 min
Slides/Materiaal:
- Function type syntax cheatsheet
- Error message breakdown poster
- Quick fix voorbeelden
Blok 6: Hands-On Intro (5 min | 10:05-10:10)
Doel: Studenten klaar zetten voor praktijk
Activiteiten:
-
TypeScript Escaperoom uitleggen:
- Structuur: 5 kamers, elke kamer is een TypeScript-puzzel
- Doel: code correct typen en bugs fixen
- Hint: de "escape code" is een reeks getallen (niet het doel, maar de bewijsvoering)
-
Project setup:
- Git repo klonen / files openen in Cursor
npm installennpm run builduitvoeren- Cursor diagnostics controleren (errors zichtbaar?)
-
Eerste stappen:
- Open kamer 1 (index.ts)
- Volg de comments (wat moet je typen?)
- Cursor helpt met autocomplete
Spreektijd: ~5 min
Materiaal:
- Project folder download link
- Setup instructies (uitgeprint of digitaal)
- Slack/Discord voor vragen
☕ PAUZE (10:10-10:25) | 15 minuten
Docent checkt ondertussen:
- Alle studenten zijn aan het programmeren
- Geen blokkades (technisch of conceptueel)
- Voorbereidingen voor vervolg
Blok 7: Hands-On Deel 2 (75 min | 10:25-11:45)
Doel: Studenten zelfstandig laten programmeren met begeleiding
Structuur:
| Tijd | Checkpoint | Actie |
|---|---|---|
| 10:25-10:45 | Start | Studenten werken, docent loopt rond |
| 10:45 | Check 1 | "Wie zit al bij kamer 3?" – groepsconversatie |
| 11:00 | Check 2 | "Wie heeft de helft?" – snelle feedback |
| 11:30 | Check 3 | "Wie heeft de escape code?" – bijna klaar |
| 11:45 | Einde | Wrap-up + vooruitkijken |
Docent-taken:
- Ronde maken: vragen beantwoorden, hints geven
- Niet zeggen: "Je doet het verkeerd"
- Wel zeggen: "Wat zegt TypeScript? Laat die error eens zien."
- Snelle studenten: bonus challenges geven (zie "Bonus uitdagingen")
- Langzame studenten: stapje terug, vereenvoudigen, samen debuggen
Student-taken:
- Volg de comments in code
- Maak één kamer tegelijk af
- Gebruik Cursor: hover, autocomplete, quick fixes
- Vraag docent of klasgenoten als je vast zit (niet opgeven!)
Mogelijke blokkades & oplossingen:
| Probleem | Oorzaak | Oplossing |
|---|---|---|
| "Cursor geeft geen errors" | TypeScript niet correct geïnstalleerd | npm install -D typescript opnieuw |
| "Ik snap de hints niet" | Comment is te cryptisch | Docent vertaalt de hint in eigen woorden |
| "Ik kom niet verder" | Conceptueel niet begrepen | Teruggaan naar een eerder concept (Blok 3/4) |
| "Ik ben klaar" | Student is snel | Bonus challenges geven (zie onder) |
Bonus uitdagingen (voor snelle studenten):
-
Generics:
- Schrijf een
Container<T>interface - Gebruik het met verschillende types
- Schrijf een
-
Advanced unions:
- Maak een discriminated union:
type Result = { status: "success", data: string } | { status: "error", message: string } - Schrijf een functie die dit handlert
- Maak een discriminated union:
-
Recursive types:
- Definieer een boomstructuur type
- Maak een (eenvoudige) boomconstructor
-
Type narrowing:
- Schrijf functie die
string | numberhandlert - Gebruik
typeofchecks
- Schrijf functie die
Spreektijd: Afhankelijk van vragen (~20 min rond voor hulp) | Student work: ~55 min
Materiaal:
- TypeScript Escaperoom project (voorbereid)
- Hint card voor docent
- Bonus challenges (optioneel handout)
Blok 8: Afsluiting (15 min | 11:45-12:00)
Doel: Reflectie, evaluatie, voorbereiding volgende les
Activiteiten:
-
Escape codes vergelijken (~3 min):
- Wie heeft de code afgerond? Welk nummer?
- Toon 2-3 juiste oplossingen op het scherm
- Complimenteer creativiteit / alternatieve approaches
-
Samenvatting lesinhoud (~5 min):
- Recap: "Wat hebben we vandaag geleerd?"
- Studenten noemen 3 dingen (whiteboard of verbal)
- Benadrukt: TypeScript = Cursors taal, nodig voor React/Next.js
-
Huiswerk uitleggen (~4 min):
- Huiswerk Les 4:
- Afmaken TypeScript Escaperoom (kamer 5 als niet afgerond)
- Lezen: [TypeScript Handbook] Sectie "Everyday Types" + "Narrowing"
- Voorbereidingsvraag: "Hoe zou je een type schrijven voor een functie die ALLES als input kan nemen?"
- Inleveren: screenshot escape code + reflectie (100 woorden): "Wat vond je van TypeScript? Welk concept was moeilijk?"
- Huiswerk Les 4:
-
Preview Les 5 (~3 min):
- "Volgende les: TypeScript in React"
- Teasers: "Props typen", "State management", "Custom hooks"
- "Alles wat je vandaag hebt geleerd, gebruiken we volgende week in echte React-componenten"
Spreektijd: ~15 min | Presentatie: ~12 min
Slides/Materiaal:
- Samenvatting slide
- Huiswerk slide (duidelijk, ook digitaal beschikbaar)
- Les 5 teasers
Materialen & Resources
Bestanden in /Les04-TypeScript-Fundamentals/
Les04-TypeScript-Fundamentals/
├── Les04-Lesplan.md (dit bestand)
├── Les04-Slides.pptx
│ ├── Titelbanner
│ ├── JavaScript vs TypeScript
│ ├── Type overzicht
│ ├── Interface voorbeelden
│ ├── Function signatures
│ └── Samenvatting
├── Les04-Handout.pdf
│ ├── Type cheatsheet
│ ├── Common errors
│ └── Quick reference
├── Escaperoom-Project/
│ ├── README.md (setup instructies)
│ ├── package.json
│ ├── tsconfig.json
│ ├── src/
│ │ ├── kamer-1.ts (string, number, boolean)
│ │ ├── kamer-2.ts (arrays)
│ │ ├── kamer-3.ts (interfaces)
│ │ ├── kamer-4.ts (union types)
│ │ └── kamer-5.ts (functions)
│ ├── solutions/
│ │ ├── kamer-1.solution.ts
│ │ ├── kamer-2.solution.ts
│ │ ├── kamer-3.solution.ts
│ │ ├── kamer-4.solution.ts
│ │ └── kamer-5.solution.ts
│ └── escape-codes.txt
├── Les04-QuickStart.md (koppelingen naar externe resources)
├── Les04-References.md
│ ├── TypeScript Handbook links
│ ├── Video tutorials
│ └── Community resources
└── Les04-Homework.md
├── Leeswerk
├── Codingtaken
└── Reflectievragen
Externe Resources
Officieel:
Interactief:
- TypeScript Playground: https://www.typescriptlang.org/play
- Oefeningen: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
Community:
- Stack Overflow tag
typescript - Reddit: r/typescript
- Discord TypeScript community
Voorbereiding Docent
Checklist (1 week voor les)
- Inhoud: Alle slides af? Voorbeelden getest?
- Demo: Live coding-voorbeelden runnen in Cursor
- Project: Escaperoom project klaar? Alle kamers werkend?
- Solutions: Solutions files af (voor docent-reference)
- Handout: PDF klaar en gedownload op alle student-devices
- Technisch:
- TypeScript geïnstalleerd op eigen machine
- Cursor up-to-date
- Node.js versie recente (14+)
- Communicatie: Huiswerk vorige week teruggebeven?
Checklist (1 dag voor les)
- Slides: Compleet doorgelopen, timing gecheck
- Demo's: Alle live coding-scripts getest
- Project:
- Project kloned/gedownload op eigen machine
npm installsuccesvol- Alle kamers kunnen draaien
- Escape codes gecontroleerd
- Ruimte:
- Projector werkt
- Netwerk stabiel
- Studentenlaptops hebben Cursor/IDE
- Bonus: Bonus challenges voorbereid (notities docent)
Checklist (5 min voor les)
- Slides geopend
- Cursor open met voorbeeld-project
- Chat/Discord open (voor vragen)
- Timer gereed voor Blok 7 checkpoints
- Koffie klaar 😊
Docent-notes & Timing
| Blok | Timing | Spreektijd | Notes |
|---|---|---|---|
| 1 | 10 min | 5 min | Energizer! Studenten voelen zich verwelkomd |
| 2 | 15 min | 12 min | Live demo is cruciaal – studenten moeten begrijpen WAAROM |
| 3 | 15 min | 11 min | Type inference is abstract – veel voorbeelden! |
| 4 | 15 min | 11 min | Interfaces/types zijn powerful – dit is A-ha moment |
| 5 | 10 min | 8 min | Errors lezen is vaardigheid – docent modeleert dit |
| 6 | 5 min | 5 min | Korte instructies, snel starten |
| Pauze | 15 min | — | Docent checkt techniek |
| 7 | 75 min | 20 min | Geduld! Niet alle studenten gaan gelijkelijk |
| 8 | 15 min | 15 min | Celebrate wins! Huiswerk duidelijk maken |
Timing-tips:
- Blok 2 loopt soms uit → voorkomen met gerepeteerde demo
- Blok 3-4 zijn dicht → kunnen samengetrokken naar 25 min als nodig
- Blok 7 is flexibel → als studenten sneller gaan, langer doorgaan
- Blok 8 altijd uitvoeren (motivatie!)
Veelvoorkomende Problemen & Oplossingen
| Probleem | Oorzaak | Symptoom | Oplossing |
|---|---|---|---|
| TypeScript errors zichtbaar | Configuratie fout | Cursor toont geen rode underlines | npm install -D typescript + Cursor reload |
| "Type 'any' is not assignable" | Student begrijpt union types niet | Code werkt niet | Terug naar Blok 4, voorbeeld doen |
| Interface vs Type verwarring | Conceptueel niet verschil begrepen | Student wil type gebruiken voor objects | Venn diagram tonen, herhaald zeggen: "Interface = objects, Type = unions" |
| "Ik snap type inference niet" | Abstract concept | Student schrijft overal types | Laten zien dat Cursor het weet (hover) – types zijn optioneel |
| Functions niet getyped | Syntax vergeten | Parameters hebben geen types | Toon : type syntax, laat repeteren |
| Escaperoom kamer 3 (interfaces) | Huiswerk niet gedaan | Student weet niet hoe interfaces werken | Docent doet voorbeeld samen, step-by-step |
| Escaperoom kamer 5 (functions) | Callback functions verwarrend | Student weet niet hoe functies als type te schrijven | Toon (arg: Type) => ReturnType syntax, veel oefenen |
| Student verder willen | Te makkelijk | Verliest interesse | Bonus challenges geven (zie Blok 7) |
| Student achterblijven | Te moeilijk | Frustratie, geeft op | Pair programming: docent/klasgenoot helpt |
| Netwerk/technisch probleem | WiFi down, npm install hangt | Nothing works | Fallback: offline Cursor examples, of pair programming |
Leerresultaten & Evaluatie
Hoe weet je dat studenten het snappen?
Groen (begrepen):
- ✅ Kan interface schrijven met optionele properties
- ✅ Ziet TypeScript error en weet wat het betekent
- ✅ Kan union type gebruiken in functie parameter
- ✅ Snapt verschil tussen type inference en expliciete types
Oranje (deels):
- ⚠️ Interfaces kan, union types nog niet
- ⚠️ Begrijpt errors, weet niet hoe op te lossen
- ⚠️ Haalt kamer 3-4 niet (maar 1-2 wel)
Rood (niet begrepen):
- ❌ Alles voelt "magie", begrijpt voordeel TS niet
- ❌ Hangt vast bij eerste kamers
- ❌ Huiswerk Les 3 niet gedaan (prerequisite gemist)
Huiswerk Evaluatie
Inleveringseisen:
- Screenshot van escape code (bewijs afronding)
- Reflectie (100 woorden): "Wat vond je van TypeScript? Welk concept was moeilijk?"
Rubric:
- 5: Alle kamers af + thoughtful reflectie
- 4: Kamers 1-4 af + redelijke reflectie
- 3: Kamers 1-3 af of onvolledig werk
- 2: Kamers 1-2 af, reflectie te kort
- 1: Niet ingeleverd of onvoldoende
Volgende Stap: Les 5 Preview
Les 5: TypeScript for React/Next.js
In Les 5 gebruiken studenten TypeScript in echte React-componenten:
- Props typen met interfaces
- State types
- Event handlers typen
- Custom hooks typen
- Nextjs pagina's en API routes
Huiswerk Les 4 voorbereidt op Les 5:
- Kunnen lezen wat types betekenen → begrijpen React props
- Union types kennen → discriminated unions in Redux/Zustand
- Optional properties kennen → optional React props
Advies docent:
- Veel les 5 oefenen met props-typen (meest praktisch)
- React errors (TypeScript gerelateerd) is groot probleem
- Early preparation (zeker van React basis vooraf)
Notities Docent (vrijruimte)
Notities voor eigen voorbereiding:
- Welke voorbeelden zelf toevoegen?
- Welke students extra aandacht nodig?
- Timing aanpassingen van vorig jaar?
- Lokale resources (Slack, Discord)?
- Volgende keer: ...
[Ruimte voor docent-notities]
Bijlage: Keyboard Shortcuts & Tools
Cursor Shortcuts (essentieel)
| Actie | Shortcut |
|---|---|
| Command Palette | Ctrl+Shift+P (Win/Linux) / Cmd+Shift+P (Mac) |
| Go to Definition | F12 of Ctrl+Click |
| Rename Symbol | F2 |
| Quick Fix | Ctrl+. |
| Format Document | Shift+Alt+F |
| Terminal | `Ctrl+`` |
TypeScript Commands
# Project setup
npm init -y
npm install -D typescript
# TypeScript compiler
npx tsc --version
npx tsc --init # tsconfig.json genereren
npx tsc # compileren
npx tsc --watch # auto-compileren
Handige Extensions (voor Cursor)
- TypeScript Vue Plugin
- Error Lens (errors inline tonen)
- Peacock (editor herkennen per workspace)
Reflectie & Verbeteringen
Van vorig jaar (indien van toepassing)
- Wat werkte goed?
- Wat moet beter?
- Welke voorbeelden updaten?
- Timing aanpassingen?
Voor volgende jaar
- Meer live debugging van TypeScript errors?
- Minder of meer Blok 7 challenges?
- Escaperoom moeilijkheidsgraad OK?
- Student feedback ingebouwd?
Laatst bijgewerkt: 27 februari 2026 Versie: 1.0 Docent: — Cursuscoördinatoren: —
Veel succes met Les 4! TypeScript is een game-changer voor student-developers. Zorg dat ze voelen dat ze iets magisch leren. ✨