Que font les modificateurs optional (?) et readonly ?

Question

Accepted Answer

Ces modificateurs de propriété contrôlent si une propriété est **requise** et si elle peut être **réassignée**.

## Optional (`?`)

```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
}
```

Une propriété optionnelle a le type `T | undefined`, le compilateur vous force donc à gérer le cas d'absence — prévenant les erreurs "cannot read property of undefined".

## 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` s'applique uniquement à la compilation (pas d'exécution à l'exécution), mais il documente et applique l'immuabilité dans le système de types, capturant les mutations accidentelles.

## Combiné et à grande échelle

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

## Pourquoi c'est important

`?` modélise les données vraiment optionnelles et applique la sécurité null ; `readonly` exprime et applique l'immuabilité (excellent pour la configuration, les props et pour éviter les mutations d'état accidentelles).

Les deux font passer la vérification de correction dans le compilateur.

Optional (?)

readonly

Combiné et à grande échelle

Pourquoi c'est important

Optional (`?`)