Пошук уроків, статей та іншого контенту
Додайте необов'язкові властивості та забороніть зміну окремих полів за допомогою модифікаторів.
У TypeScript властивість можна зробити необов’язковою за допомогою символу ? після її назви:
type User = {
name: string;
age?: number;
};У цьому прикладі:
name обов’язково має бути присутнім;
age може бути відсутньою.
Тому обидва об’єкти є коректними:
const firstUser: User = {
name: "Олена",
};
const secondUser: User = {
name: "Андрій",
age: 28,
};Якщо спробувати не вказати обов’язкову властивість name, TypeScript повідомить про помилку:
const invalidUser: User = {
age: 25,
};Тип User вимагає властивість name.
Оскільки необов’язкова властивість може бути відсутньою, її значення має тип number | undefined.
Перед використанням такої властивості варто перевірити, чи вона існує:
type User = {
name: string;
age?: number;
};
function printUserAge(user: User): void {
if (user.age !== undefined) {
console.log(`${user.name}: ${user.age} років`);
} else {
console.log(`${user.name}: вік не вказано`);
}
}
printUserAge({ name: "Олена" });
printUserAge({ name: "Андрій", age: 28 });Для простих випадків можна використати оператор ??, щоб задати значення за замовчуванням:
type Product = {
name: string;
discount?: number;
};
function getDiscount(product: Product): number {
return product.discount ?? 0;
}
console.log(getDiscount({ name: "Книга" })); // 0
console.log(getDiscount({ name: "Навушники", discount: 15 })); // 15Оператор ?? повертає значення праворуч, якщо значення ліворуч дорівнює null або undefined.
readonlyМодифікатор readonly забороняє змінювати властивість після створення об’єкта.
type User = {
readonly id: number;
name: string;
};
const user: User = {
id: 1,
name: "Олена",
};
user.name = "Андрій"; // Коректно
user.id = 2; // Помилка TypeScriptВластивість id можна прочитати, але не можна переприсвоїти:
console.log(user.id);readonly діє під час перевірки TypeScript. Він не робить значення повністю незмінним під час виконання JavaScript. Його призначення — не дозволити випадково змінити властивість у TypeScript-коді.
readonly у типах і інтерфейсахМодифікатор можна використовувати як у type, так і в interface.
interface Article {
readonly id: number;
title: string;
description?: string;
}
const article: Article = {
id: 101,
title: "Основи TypeScript",
};
article.title = "Оновлені основи TypeScript"; // Коректно
article.description = "Короткий опис"; // Коректно
article.id = 102; // Помилка TypeScriptreadonly не означає, що властивість потрібно вказати під час створення об’єкта. Для цього модифікатори можна комбінувати:
type Settings = {
readonly id: number;
theme?: string;
};
const settings: Settings = {
id: 1,
};
settings.theme = "dark"; // Коректно
settings.id = 2; // Помилка TypeScriptТут:
id — обов’язкова та доступна лише для читання;
theme — необов’язкова та доступна для зміни.
readonly та ?Модифікатори можна застосовувати до однієї властивості одночасно:
type Book = {
title: string;
readonly isbn: string;
readonly publishedAt?: string;
};
const book: Book = {
title: "TypeScript для початківців",
isbn: "978-1-234-56789-0",
};
book.title = "TypeScript: практичний курс"; // Коректно
book.publishedAt = "2026-08-08"; // Помилка TypeScript
book.isbn = "978-9-876-54321-0"; // Помилка TypeScriptВластивість publishedAt можна не вказувати під час створення об’єкта, але якщо її вже задано, змінювати її не можна.
Розглянемо тип профілю користувача:
type Profile = {
readonly userId: number;
username: string;
email: string;
bio?: string;
};
function printProfile(profile: Profile): void {
console.log(`Користувач: ${profile.username}`);
console.log(`Email: ${profile.email}`);
console.log(`ID: ${profile.userId}`);
console.log(`Опис: ${profile.bio ?? "відсутній"}`);
}
const profile: Profile = {
userId: 42,
username: "olena",
email: "olena@example.com",
};
printProfile(profile);
profile.username = "olena_dev"; // Коректно
profile.bio = "Розробниця TypeScript"; // Коректно
// profile.userId = 100; // Помилка: userId доступна лише для читанняУ цьому прикладі:
userId не можна змінити після створення профілю;
bio можна не вказувати;
username та email є обов’язковими;
username і bio можна змінювати.
?type Product = {
name: string;
description: string;
};
const product: Product = {
name: "Мишка",
};Цей код містить помилку, оскільки description є обов’язковою властивістю.
Якщо опис справді необов’язковий, потрібно записати:
type Product = {
name: string;
description?: string;
};type User = {
name: string;
age?: number;
};
function printAge(user: User): void {
console.log(user.age.toFixed(0));
}user.age може бути undefined, тому виклик toFixed може бути небезпечним. Спочатку перевірте значення:
function printAge(user: User): void {
if (user.age !== undefined) {
console.log(user.age.toFixed(0));
}
}readonly-властивістьtype Order = {
readonly id: number;
status: string;
};
const order: Order = {
id: 10,
status: "new",
};
order.id = 11;Якщо ідентифікатор не повинен змінюватися, помилка очікувана. Змінювати можна лише властивості без readonly:
order.status = "paid";readonly та необов’язковістюЦі модифікатори відповідають за різні властивості:
? визначає, чи можна не вказувати властивість;
readonly визначає, чи можна змінювати властивість після створення.
type Example = {
optionalValue?: string;
readonly fixedValue: number;
};optionalValue може бути відсутньою, але її можна змінити, якщо вона існує. fixedValue потрібно вказати під час створення, і після цього її не можна змінити.
Символ ? робить властивість необов’язковою.
Необов’язкова властивість може мати значення undefined.
Перед використанням необов’язкової властивості потрібно перевірити її наявність або використати значення за замовчуванням.
Модифікатор readonly забороняє переприсвоєння властивості після створення об’єкта.
? і readonly можна поєднувати.
readonly впливає на перевірку коду TypeScript і допомагає захистити дані від випадкових змін.