Wat doen de optionele (?) en readonly modifiers?

Question

Accepted Answer

Deze property modifiers bepalen of een property **verplicht** is en of deze **opnieuw kan worden toegewezen**.

## Optioneel (`?`)

```ts
interface User {
  name: string;
  email?: string; // optional — may be absent
}

const a: User = { name: "Ann" };               // ✅ email omitted
const b: User = { name: "Bo", email: "b@x" };  // ✅ included

function f(u: User) {
  u.email.length;   // ❌ Error: email is possibly 'undefined'
  u.email?.length;  // ✅ optional chaining handles the maybe-undefined
}
```

Een optionele property heeft type `T | undefined`, dus de compiler dwingt je om het ontbrekende geval af te handelen — voorkomen van "cannot read property of undefined" bugs.

## readonly

```ts
interface Point { readonly x: number; readonly y: number; }
const p: Point = { x: 1, y: 2 };
p.x = 5; // ❌ Error: cannot assign to readonly property

// arrays too
const nums: readonly number[] = [1, 2, 3];
nums.push(4); // ❌ push doesn't exist on readonly array
```

`readonly` is alleen compile-time (geen runtime afdwinging), maar het documenteert en dwingt immutabiliteit in het typesysteem af, waardoor onbedoelde mutaties worden onderschept.

## Gecombineerd en op schaal

```ts
interface Config { readonly id: string; tags?: readonly string[]; }
type Frozen = Readonly<User>; // utility type makes ALL props readonly
```

## Waarom het belangrijk is

`?` modelleert echt optionele gegevens en dwingt null-safety af; `readonly` drukt immutabiliteit uit en dwingt het af (geweldig voor config, props en het voorkomen van onbedoelde state mutatie).

Beiden duwen correcheidscontrole naar de compiler.

Optioneel (?)

readonly

Gecombineerd en op schaal

Waarom het belangrijk is

Optioneel (`?`)