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

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

```typescript
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:
```typescript
type OrderStatus = "pending" | "processing" | "shipped" | "delivered";
```
Is veel beter dan:
```typescript
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:
```typescript
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:

```typescript
/**
 * 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:

```typescript
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! 🚀