What do the optional (?) and readonly modifiers do?

Question

Accepted Answer

These property modifiers control whether a property is **required** and whether it can be **reassigned**.

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

An optional property has type `T | undefined`, so the compiler forces you to handle the absent case — preventing "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 compile-time only (no runtime enforcement), but it documents and enforces immutability in the type system, catching accidental mutations.

## Combined and at scale

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

## Why it matters

`?` models genuinely optional data and forces null-safety; `readonly` expresses and enforces immutability (great for config, props, and preventing accidental state mutation).

Both push correctness checking into the compiler.

Optional (?)

readonly

Combined and at scale

Why it matters

Optional (`?`)