Пошук уроків, статей та іншого контенту
Дізнайтеся, як працюють конструктори, і скорочуйте оголошення властивостей за допомогою parameter properties.
Конструктор — це спеціальний метод класу, який автоматично викликається під час створення нового об’єкта за допомогою new.
У TypeScript конструктор оголошують за допомогою ключового слова constructor:
class User {
name: string;
constructor(name: string) {
this.name = name;
}
}
const user = new User("Олена");
console.log(user.name); // ОленаПід час виконання new User("Олена") відбувається таке:
Створюється новий об’єкт.
Викликається конструктор.
Значення "Олена" передається в параметр name.
Значення записується у властивість this.name.
this посилається на поточний об’єкт класу.
Без скороченого синтаксису властивість потрібно:
Оголосити в класі.
Додати параметр конструктора.
Присвоїти параметр властивості через this.
class Product {
title: string;
price: number;
constructor(title: string, price: number) {
this.title = title;
this.price = price;
}
getDescription(): string {
return `${this.title}: ${this.price} грн`;
}
}
const product = new Product("Клавіатура", 1200);
console.log(product.getDescription());
// Клавіатура: 1200 грнЦей підхід зрозумілий, але коли параметр і властивість мають однакові назви, код стає повторюваним:
this.title = title;
this.price = price;Для такого випадку TypeScript має спеціальний скорочений синтаксис — parameter properties.
Parameter property — це параметр конструктора, який одночасно створює властивість класу та ініціалізує її.
Для цього перед параметром конструктора вказують модифікатор доступу:
public
private
protected
readonly
Наприклад:
class Product {
constructor(
public title: string,
public price: number
) {}
getDescription(): string {
return `${this.title}: ${this.price} грн`;
}
}
const product = new Product("Клавіатура", 1200);
console.log(product.title); // Клавіатура
console.log(product.price); // 1200
console.log(product.getDescription()); // Клавіатура: 1200 грнЗапис:
constructor(
public title: string,
public price: number
) {}приблизно відповідає такому коду:
class Product {
public title: string;
public price: number;
constructor(title: string, price: number) {
this.title = title;
this.price = price;
}
}Після додавання public параметри автоматично стають властивостями об’єкта.
publicpublic означає, що властивість доступна з будь-якого коду, який має об’єкт.
class User {
constructor(public name: string) {}
}
const user = new User("Олена");
console.log(user.name); // Олена
user.name = "Марія";
console.log(user.name); // Маріяpublic є стандартним модифікатором доступу. Його можна не писати, якщо властивість має бути загальнодоступною:
class User {
constructor(public name: string) {}
}privateprivate обмежує доступ до властивості. Її можна використовувати лише всередині самого класу.
class BankAccount {
constructor(
private balance: number
) {}
deposit(amount: number): void {
this.balance += amount;
}
getBalance(): number {
return this.balance;
}
}
const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500Безпосередній доступ до balance ззовні заборонений:
// Помилка TypeScript:
// Property 'balance' is private and only accessible within class 'BankAccount'.
// console.log(account.balance);Якщо значення потрібно отримати ззовні, клас може надати для цього публічний метод, наприклад getBalance().
readonlyreadonly означає, що властивість можна встановити під час створення об’єкта, але не можна змінити пізніше.
class User {
constructor(
public readonly id: number,
public name: string
) {}
}
const user = new User(1, "Олена");
user.name = "Марія";
// Помилка TypeScript:
// Cannot assign to 'id' because it is a read-only property.
// user.id = 2;
console.log(user.id); // 1
console.log(user.name); // Маріяreadonly зручно використовувати для ідентифікаторів або інших значень, які не повинні змінюватися після створення об’єкта.
Можна поєднувати модифікатори, наприклад private readonly:
class Order {
constructor(
private readonly orderId: number,
public customerName: string
) {}
getId(): number {
return this.orderId;
}
}
const order = new Order(101, "Олена");
console.log(order.getId()); // 101
console.log(order.customerName); // ОленаУ цьому прикладі:
orderId доступний лише всередині класу;
orderId не можна змінити після створення об’єкта;
customerName доступний ззовні та може змінюватися.
Конструктор може мати параметри зі значеннями за замовчуванням.
class Article {
constructor(
public title: string,
public isPublished: boolean = false
) {}
}
const draft = new Article("Основи TypeScript");
const publishedArticle = new Article("Конструктори", true);
console.log(draft.isPublished); // false
console.log(publishedArticle.isPublished); // trueЯкщо другий аргумент не передати, TypeScript використає значення false.
Конструктор може виконувати перевірку вхідних даних перед їх збереженням.
class Temperature {
public readonly value: number;
constructor(value: number) {
if (value < -273.15) {
throw new Error("Температура не може бути нижчою за абсолютний нуль");
}
this.value = value;
}
}
const temperature = new Temperature(20);
console.log(temperature.value); // 20У цьому випадку некоректне значення не буде записане у властивість:
// Виникне помилка під час виконання:
// const invalidTemperature = new Temperature(-300);Якщо для такої властивості не потрібна додаткова перевірка, можна використати parameter property:
class Temperature {
constructor(public readonly value: number) {}
}Вибір залежить від логіки класу.
class Task {
constructor(
public readonly id: number,
public title: string,
private completed: boolean = false
) {}
complete(): void {
this.completed = true;
}
isCompleted(): boolean {
return this.completed;
}
getSummary(): string {
const status = this.completed ? "виконано" : "не виконано";
return `#${this.id}: ${this.title} — ${status}`;
}
}
const task = new Task(1, "Вивчити конструктори");
console.log(task.getSummary());
// #1: Вивчити конструктори — не виконано
task.complete();
console.log(task.isCompleted()); // true
console.log(task.getSummary());
// #1: Вивчити конструктори — виконано
task.title = "Повторити конструктори";
// Помилка TypeScript, оскільки id має модифікатор readonly:
// task.id = 2;У класі Task:
id створюється як публічна властивість, яку не можна змінити;
title є публічною властивістю;
completed є приватною властивістю зі значенням за замовчуванням false;
методи класу керують станом завдання.
thisПараметр конструктора та властивість класу — це різні змінні:
class User {
name: string;
constructor(name: string) {
this.name = name;
}
}Якщо написати лише name = name, властивість об’єкта не буде коректно ініціалізована.
Не потрібно одночасно оголошувати властивість окремо та використовувати її як parameter property:
class User {
// Не потрібно дублювати властивість
// name: string;
constructor(public name: string) {}
}Parameter property уже створює властивість автоматично.
readonlyclass Book {
constructor(public readonly isbn: string) {}
}
const book = new Book("978-1-23-456789-0");
// Помилка TypeScript:
// book.isbn = "інший ISBN";readonly захищає властивість від повторного присвоєння після створення об’єкта.
private ззовніclass User {
constructor(private password: string) {}
}
const user = new User("secret");
// Помилка TypeScript:
// console.log(user.password);Для роботи з приватними даними потрібно створити публічні методи самого класу.
Конструктор оголошують за допомогою constructor.
Конструктор автоматично викликається під час створення об’єкта через new.
this посилається на поточний екземпляр класу.
Parameter properties одночасно створюють властивості та присвоюють їм значення параметрів.
public робить властивість доступною ззовні.
private дозволяє використовувати властивість лише всередині класу.
readonly забороняє змінювати властивість після створення об’єкта.
Parameter properties допомагають прибрати повторювані оголошення властивостей і присвоєння в конструкторі.