Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як задати опціональні поля в інтерфейсі або типі?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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 - це спосіб сказати:
> "Ця властивість **може бути**, але **не зобов'язана** бути".

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати482 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.