novi-lessons/Les04-TypeScript-Fundamentals/Les04-Bijlage-B-Huiswerkopdracht.md

Huiswerk Les 4: JavaScript naar TypeScript Converter

Wat ga je doen?

In deze les heb je geleerd hoe TypeScript je code veiliger maakt met types. Nu ga je dat in de praktijk brengen! Je krijgt een JavaScript project met utility functies voor een e-commerce systeem. Jouw taak: alles omzetten naar TypeScript zonder any types te gebruiken.

Dit huiswerk bereidt je voor op Les 5, waar je deze getypeerde functies met React gaat combineren.

---

Setup

1. Download les4-huiswerk-js-converter.zip van Teams
2. Pak uit en open de folder in Cursor/VS Code
3. Installeer dependencies: npm install
4. Bekijk de JavaScript bestanden in src/
5. Begin omzetten!

De folder ziet er zo uit:

les4-huiswerk-js-converter/
├── src/
│   ├── users.js
│   ├── products.js
│   ├── orders.js
│   └── utils.js
├── __tests__/
│   ├── users.test.ts
│   ├── products.test.ts
│   ├── orders.test.ts
│   └── utils.test.ts
├── tsconfig.json
├── package.json
└── README.md

---

De Bestanden

Bestand 1: src/users.ts

Je moet users.js omzetten naar users.ts.

Functies die je zult tegenkomen:

• createUser(name, email, age) — maakt een nieuwe user aan
• findUser(users, id) — zoekt een user op id
• updateUser(users, id, updates) — update user gegevens
• filterActiveUsers(users) — geeft alle actieve users terug

Wat je moet doen:

1. Maak een User interface met: id, name, email, age, isActive (boolean)
2. Zorg dat de createUser functie het juiste type teruggeeft
3. Type alle parameters en return types volledig
4. Geen any!

Hint: Kijk in de tests hoe User wordt gebruikt — dat zegt je veel over de verwachte types.

---

Bestand 2: src/products.ts

Je moet products.js omzetten naar products.ts.

Functies die je zult tegenkomen:

• createProduct(name, price, category) — maakt een nieuw product aan
• applyDiscount(product, discountPercent) — past korting toe
• getExpensiveProducts(products, minPrice) — filtert dure producten
• formatPrice(price) — formatteert prijs als string

Wat je moet doen:

1. Maak een Product interface met: id, name, price, category, discount (optioneel)
2. Maak een union type voor category: "electronics" | "clothing" | "books" | "other"
3. Type alle functies compleet
4. De applyDiscount functie geeft een nieuw object terug (mutation voorkomen)
5. Geen any!

Extra uitdaging: Sommige producten hebben misschien geen discount. Maak dit veld optioneel met ?

---

Bestand 3: src/orders.ts

Je moet orders.js omzetten naar orders.ts.

Functies die je zult tegenkomen:

• createOrder(user, products) — maakt een order aan
• calculateTotal(order) — berekent totale prijs
• getOrderStatus(order) — geeft de status terug
• getOrdersByUser(orders, userId) — filtert orders per user

Wat je moet doen:

1. Maak een Order interface met: id, userId, products (array), total, status, createdAt
2. Maak een union type voor OrderStatus: "pending" | "processing" | "shipped" | "delivered"
3. De userId in Order moet verwijzen naar de User die je in bestand 1 hebt gemaakt
4. products in Order moet een array van Product zijn
5. Type alle functies compleet
6. Geen any!

Samenwerking: Je Orders werken met Users en Products van de vorige bestanden!

---

Bestand 4: src/utils.ts

Je moet utils.js omzetten naar utils.ts. Dit bestand heeft wat moeilijkere type challenges.

Functies die je zult tegenkomen:

• formatDate(date) — formatteert een Date naar "DD-MM-YYYY"
• generateId() — genereert een willekeurige string ID
• validateEmail(email) — checkt of email geldig is (return boolean)
• sortBy(items, key) — sorteert een array op een bepaalde eigenschap

Wat je moet doen:

1. formatDate ontvangt een Date en geeft een string terug
2. generateId geeft altijd een string terug
3. validateEmail geeft een boolean terug
4. sortBy is het lastigste! Dit is waar generics om de hoek komen kijken (voorbereiding Les 5)
   • sortBy moet werken met elk soort array
   • De functie signature zou iets als function sortBy<T>(items: T[], key: keyof T): T[] moeten zijn
   • Dit zeggen we in Les 5 meer over, maar je mag het nu al proberen!

Geen any!

---

Vereisten

Zorg dat je aan álle punten voldoet:

• ❌ Geen any types — serieus, zelfs niet voor "snel omzetten"
• ❌ Geen // @ts-ignore comments — verstop de problemen niet
• ✅ Alle functies volledig getypt — parameters EN return types
• ✅ Interfaces voor alle objecten — User, Product, Order
• ✅ Union types waar logisch — ProductCategory en OrderStatus
• ✅ Optional properties waar nodig — velden met ?
• ✅ npm run check moet 0 errors geven — TypeScript compiler akkoord

---

Verificatie

Als je klaar bent, run je deze commands:

# Controleer TypeScript errors (moet 0 tonen)
npm run check

# Run de tests (alle tests moeten slagen)
npm test

De tests zijn al geschreven in TypeScript! Ze checken of jouw types correct zijn. Als tests mislukken, kijk dan naar de foutmelding — die zal je helpen.

---

Tips & Tricks

1. Begin met interfaces Definieer eerst de shapes van je data. Dan schrijf je veel makkelijker de functies.

interface User {
  id: string;
  name: string;
  email: string;
  age: number;
  isActive: boolean;
}

2. Kijk naar hoe functies GEBRUIKT worden Open de test files in __tests__/ — die laten zien hoe je types moeten werken. Tests zijn je "spec"!

3. Gebruik Cursor voor hints Cursor geeft je hover-tips. Hover over een functie en zie wat het verwacht. Maar probeer eerst zelf!

4. Union types zijn duidelijker dan strings Dit:

type OrderStatus = "pending" | "processing" | "shipped" | "delivered";

Is veel beter dan:

status: string;

Waarom? TypeScript geeft je autocomplete en warnt je als je een verkeerde status invult.

5. Optional properties met ? Niet alles is verplicht. Producten hebben misschien geen korting:

interface Product {
  id: string;
  name: string;
  price: number;
  discount?: number; // optioneel!
}

6. Ga stap voor stap

• Zet eerst alles om naar .ts files
• Type dan één bestand af
• Zorg dat npm run check nul errors toont
• Ga dan naar volgende bestand

---

Bonus Challenges

Als je voort bent en meer wilt leren:

Bonus 1: JSDoc Comments Voeg JSDoc comments toe aan je interfaces. Dit geeft developers (inclusief jezelf later) hulp:

/**
 * Vertegenwoordigt een gebruiker in het systeem
 * @property id - Unieke identifier
 * @property name - Volledige naam van de gebruiker
 * @property email - E-mailadres (moet uniek zijn)
 * @property age - Leeftijd in jaren
 * @property isActive - Of de account actief is
 */
interface User {
  id: string;
  name: string;
  email: string;
  age: number;
  isActive: boolean;
}

Bonus 2: Barrel Export Maak een src/index.ts die alles exporteert:

export { User, createUser, findUser, updateUser, filterActiveUsers } from './users';
export { Product, createProduct, applyDiscount, getExpensiveProducts, formatPrice } from './products';
export { Order, createOrder, calculateTotal, getOrderStatus, getOrdersByUser } from './orders';
export { formatDate, generateId, validateEmail, sortBy } from './utils';

Bonus 3: Generics in sortBy Probeer sortBy echt generiek te maken. Dit is Les 5 materiaal, maar je mag het nu al proberen! Hint: je hebt <T> nodig en keyof T.

---

Inleveren

1. Push naar GitHub — je repositorywaar je al aan werkt
2. Branch: feature/les4-typescript-converter
3. Commit message: feat: convert JavaScript utilities to TypeScript
4. Deadline: Voor het begin van Les 5

---

Verwachte tijd

Dit huiswerk duurt ongeveer 1,5 tot 2 uur afhankelijk van je snelheid. Niet rennen — begrijpen is belangrijker!

---

Vragen?

• Stuck op een error? Lees het TypeScript error message goed
• Weet je de syntax van een type niet? Kijk in de lesson slides Les 4
• Denk je dat de tests fout zijn? Neem contact op!

Veel succes! 🚀