Як задати опціональні поля в інтерфейсі або типі?

TypeScriptMiddle~1 хв читання

1. Опціональні поля - це поля, які можуть бути відсутніми в об'єкті

TypeScript дозволяє позначати властивість як необов'язкову, додавши до імені поля знак питання ?.

2. В інтерфейсі

javascript

interface User {
  id: number;
  name: string;
  age?: number; // ← опціональне поле
}

const u1: User = { id: 1, name: "Тим" };           // age можна не вказувати
const u2: User = { id: 2, name: "Макс", age: 30 }; // age можна вказати

Поле age може бути присутнім або відсутнім, але якщо воно є - має бути числом (number).

3. В типі (`type`) - так само

javascript

type User = {
  id: number;
  name: string;
  age?: number;
};

const user: User = { id: 1, name: "Тим" }; // age не обов'язковий

Поведінка повністю ідентична інтерфейсам.

4. Опціональні поля ≠ `undefined`

Коли ти пишеш age?: number, це еквівалентно такому типу:

javascript

age: number | undefined

Тобто значення age може бути або числом, або undefined, або взагалі відсутнім в об'єкті.

Приклад:

javascript

function printUser(user: User) {
  console.log(user.age?.toFixed(1)); // безпечно: ?. перевіряє, чи є age
}

5. Опціональні поля у вкладених структурах

javascript

interface Profile {
  name: string;
  address?: {
    city: string;
    zip?: string;
  };
}

const p1: Profile = { name: "Tim" }; // address відсутній
const p2: Profile = { name: "Tim", address: { city: "LA" } }; // zip відсутній

6. Як зробити всі поля опціональними

Іноді потрібно зробити версію типу, де всі поля стають опціональними. Для цього використовують вбудований утилітний тип Partial<T>:

javascript

interface User {
  id: number;
  name: string;
  age: number;
}

type UserUpdate = Partial<User>;

const patch: UserUpdate = { name: "Нове ім'я" }; // тільки одне поле

Partial<T> робить усі властивості інтерфейсу T необов'язковими. Це часто застосовують для оновлень (updateUser(data)).

7. Опціональні поля та `readonly`

Можна поєднувати обидва модифікатори:

javascript

interface Config {
  readonly host?: string;
}

Тут властивість host:

може бути відсутньою,

але якщо є - її не можна змінювати.

8. Опціональні параметри у функціях (аналогічно)

Якщо потрібно зробити необов'язковий аргумент, використовується той самий знак ?:

javascript

function greet(name?: string) {
  console.log(`Привіт, ${name ?? "гість"}!`);
}

greet();       // Привіт, гість!
greet("Тим");  // Привіт, Тим!

Тут name має тип string | undefined.

Підсумок

Що	Як позначається	Що означає
Опціональна властивість	`age?: number`	Властивість може бути `number` або відсутньою
Еквівалент	`age: number	undefined`
Зробити всі поля опціональними	`Partial<Type>`	Робить кожну властивість `?`
Використовується у функціях	`param?: Type`	Параметр не обов'язковий при виклику

Головна ідея:

Знак ? у TypeScript - це спосіб сказати: "Ця властивість може бути, але не зобов'язана бути".

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.