fix: update les 4

This commit is contained in:
2026-03-03 13:33:10 +01:00
parent e8170ec2b4
commit d79449ea52
3 changed files with 198 additions and 363 deletions

View File

@@ -977,31 +977,28 @@ _[Pauzeer. Maak oogcontact.]_
"Huiswerk voor volgende week:"
_[Schrijf op en stuur ook via email/Canvas:]_
_[Schrijf op en stuur ook via email/Teams:]_
"**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?
1. **Download `les4-huiswerk-js-converter.zip`** van Teams
2. Je krijgt 4 JavaScript bestanden: users, products, orders, utils
3. Zet ze allemaal om naar TypeScript — interfaces schrijven, union types, functies typen
4. De tests staan al in TypeScript — die zijn je hints!
5. `npm run check` moet 0 errors geven, `npm test` moet groen zijn
6. **Geen `any`!** Als ik `any` zie, stuur ik het terug.
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."
En als je de escaperoom nog niet af hebt: maak die ook af."
_[Toon Slide 22 preview.]_
"**Volgende week: Les 5. TypeScript + React.**"
"**Volgende week: Les 5. TypeScript voor 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."
"Jullie weten nu de basis: types, interfaces, union types, functies typen. Volgende week pakken we het volgende level: hoe gebruik je TypeScript in React? Props typen, useState met types, event handlers, API calls. Dat is de laatste stap voordat we in Les 6 met Next.js beginnen."
_[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."
"Jullie hebben vandaag veel geleerd. TypeScript lijkt misschien veel regels. Maar denk eraan: elke rode squiggle is TypeScript die zegt: 'Hé, ik help je.' Het is niet boos — het is helpful."
"Goed gedaan vandaag. Tot volgende keer!"

View File

@@ -709,31 +709,28 @@ En oefening. Je bent nooit klaar met TypeScript. Er is altijd meer om te leren.
### Op de Slide
**Huiswerk (les 4):**
- Finaliseer zoveel escaperoom kamers als je kan
- Verzend je TypeScript file naar me (geen `any`!)
- Lees het TypeScript Handbook intro (5 minuten)
- Download `les4-huiswerk-js-converter.zip` van Teams
- Zet 4 JavaScript bestanden om naar TypeScript
- Schrijf interfaces, union types, typed functies
- `npm run check` = 0 errors, `npm test` = groen
- Geen `any` toegestaan!
**Preview les 5 - Next.js Basics:**
- Next.js setup
- File-based routing
- Eerste pagina's maken
- TypeScript in Next.js
- Deploy naar Vercel
**Preview les 5 - TypeScript voor React:**
- Generics & utility types
- Props & state typen in React
- Event handlers & async functies typen
- API responses typen met `Promise<T>`
Visual: Next.js logo met pijl naar "Les 5"
Visual: TypeScript logo → React logo → "Les 5"
### Docentnotities
"Huiswerk: finaliseer die escaperoom. Verzend je file naar me. Ik wil geen `any` zien, anders stuur ik het terug!
"Huiswerk: jullie krijgen een JavaScript project met 4 bestanden — users, products, orders, utils. Alles moet omgezet worden naar TypeScript. Interfaces schrijven, union types gebruiken, functies typen. De tests staan al in TypeScript, die vertellen je wat de verwachte types zijn. `npm run check` moet 0 errors geven en `npm test` moet groen zijn. Geen `any`!
En lees het TypeScript Handbook intro. Niet heel veel tijd, maar het helpt je context.
Volgende les gaan we verder met TypeScript, maar dan voor React. Hoe type je props? Hoe werkt useState met types? Hoe type je een API call? Dat is de brug naar Les 6, waar we beginnen met Next.js.
Volgende les? NEXT.JS. Dit is waar het echt spannend wordt. Jullie gaan echte web apps bouwen met React, TypeScript, en all the bells and whistles.
Dus zorg dat je huiswerk doet — je hebt die basis nodig.
Next.js is het framework dat everyone uses. Vercel (de makers) gebruiken het. Jullie gaan het morgen gebruiken.
Dus zorg dat je huiswerk doet. Het volgende is big.
Goed werk vandaag! Ik ben trots op jullie. Tot volgende keer!"
Goed werk vandaag! Tot volgende keer!"
---