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

1. **Uitleggen** waarom TypeScript waardevol is voor developers en hoe het zich verhoudt tot JavaScript
2. **Gebruiken** van basic types: string, number, boolean, arrays en tuples
3. **Begrijpen** hoe type inference werkt en wanneer TypeScript types automatisch detecteert
4. **Schrijven** van interfaces en type aliases voor complexe objecten
5. **Toepassen** van union types en literal types in praktische situaties
6. **Implementeren** van optional properties en functies met type safety
7. **Lezen** en **oplossen** van TypeScript errors met behulp van Cursor
8. **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):**

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

2. **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)

3. **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):**

1. **Primitieve types:**
   ```typescript
   // 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
   ```

2. **Arrays:**
   ```typescript
   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];
   ```

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

4. **Speciale types:**
   - `any`: "ik weet niet wat dit is" (vermijden!)
   - `unknown`: "veilige `any`"
   - `null` en `undefined` (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):**

1. **Interfaces voor objecten:**
   ```typescript
   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
   };
   ```

2. **Type aliases:**
   ```typescript
   type Status = "pending" | "approved" | "rejected"; // Union type
   type ID = number | string;

   interface Request {
     id: ID;
     status: Status;
   }
   ```

3. **Union types & literal types:**
   ```typescript
   type ResponseType = "success" | "error" | "pending";

   const response: ResponseType = "success"; // OK
   // const invalid = "warning"; // Error!
   ```

4. **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):**

1. **Function signatures:**
   ```typescript
   // 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
   ```

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

3. **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:**
1. **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)

2. **Project setup:**
   - Git repo klonen / files openen in Cursor
   - `npm install` en `npm run build` uitvoeren
   - Cursor diagnostics controleren (errors zichtbaar?)

3. **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):

1. **Generics:**
   - Schrijf een `Container<T>` interface
   - Gebruik het met verschillende types

2. **Advanced unions:**
   - Maak een discriminated union: `type Result = { status: "success", data: string } | { status: "error", message: string }`
   - Schrijf een functie die dit handlert

3. **Recursive types:**
   - Definieer een boomstructuur type
   - Maak een (eenvoudige) boomconstructor

4. **Type narrowing:**
   - Schrijf functie die `string | number` handlert
   - Gebruik `typeof` checks

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

1. **Escape codes vergelijken (~3 min):**
   - Wie heeft de code afgerond? Welk nummer?
   - Toon 2-3 juiste oplossingen op het scherm
   - Complimenteer creativiteit / alternatieve approaches

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

3. **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?"

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:**
- [TypeScript Handbook - Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
- [TypeScript Handbook - Type Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html)

**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 install` succesvol
  - [ ] 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:**
1. Screenshot van escape code (bewijs afronding)
2. 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

```bash
# 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.* ✨