Пошук уроків, статей та іншого контенту
Створіть класи в TypeScript і типізуйте їхні властивості, параметри методів та значення, що повертаються.
Клас у TypeScript описує структуру та поведінку об’єктів. У класі можна оголосити:
властивості — дані об’єкта;
конструктор — початкове налаштування об’єкта;
методи — дії, які може виконувати об’єкт.
Типи властивостей і методів записують так само, як типи змінних і функцій.
class User {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
introduce(): string {
return `Мене звати ${this.name}, мені ${this.age} років.`;
}
}
const user = new User("Олена", 25);
console.log(user.introduce());У цьому прикладі:
name: string — властивість із текстовим значенням;
age: number — властивість із числовим значенням;
constructor(name: string, age: number) — конструктор із типізованими параметрами;
introduce(): string — метод, який повертає рядок;
this.name і this.age — звернення до властивостей поточного об’єкта.
Властивість класу оголошують у такому форматі:
class Product {
title: string;
price: number;
inStock: boolean;
}Цей клас має три властивості:
title повинна містити string;
price повинна містити number;
inStock повинна містити boolean.
TypeScript перевіряє типи під час компіляції:
class Product {
title: string;
price: number;
inStock: boolean;
constructor(title: string, price: number, inStock: boolean) {
this.title = title;
this.price = price;
this.inStock = inStock;
}
}
const product = new Product("Клавіатура", 2500, true);
// Помилка типів:
// const invalidProduct = new Product("Миша", "1500", true);У конструктор передається рядок, число та логічне значення. Рядок "1500" не можна передати замість числа 1500.
Якщо в TypeScript увімкнено сувору перевірку, кожна властивість повинна отримати значення:
під час оголошення;
у конструкторі;
або за допомогою спеціального модифікатора.
Найпоширеніший варіант — ініціалізувати властивість у конструкторі:
class Book {
title: string;
pages: number;
constructor(title: string, pages: number) {
this.title = title;
this.pages = pages;
}
}Можна також задати початкове значення одразу:
class Counter {
value: number = 0;
increment(): void {
this.value += 1;
}
}Властивість value завжди починається зі значення 0.
Конструктор викликається під час створення об’єкта за допомогою new. Його параметри потрібно типізувати так само, як параметри звичайної функції.
class Rectangle {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
}
const rectangle = new Rectangle(10, 5);Під час створення об’єкта TypeScript перевіряє кількість і типи аргументів:
const firstRectangle = new Rectangle(10, 5);
// Помилка: другий аргумент повинен бути number
// const secondRectangle = new Rectangle(10, "5");
// Помилка: бракує аргументу
// const thirdRectangle = new Rectangle(10);Метод — це функція всередині класу. Типізувати потрібно:
параметри методу;
значення, яке метод повертає.
class Calculator {
add(first: number, second: number): number {
return first + second;
}
isPositive(value: number): boolean {
return value > 0;
}
format(value: number): string {
return `Значення: ${value}`;
}
}Методи класу Calculator мають такі типи:
add приймає два числа і повертає число;
isPositive приймає число і повертає boolean;
format приймає число і повертає рядок.
const calculator = new Calculator();
console.log(calculator.add(2, 3)); // 5
console.log(calculator.isPositive(-1)); // false
console.log(calculator.format(100)); // Значення: 100Якщо метод оголошено з типом number, він повинен повертати число:
class MathOperations {
multiply(first: number, second: number): number {
return first * second;
}
}Такий код буде помилковим:
class InvalidOperations {
// Помилка: метод має повертати number, але повертає string
// multiply(first: number, second: number): number {
// return `${first * second}`;
// }
}Якщо метод виконує дію, але нічого не повертає, для нього використовують тип void.
class Logger {
log(message: string): void {
console.log(message);
}
}
const logger = new Logger();
logger.log("Користувача створено");Метод із типом void може містити return без значення, але зазвичай його просто завершують без повернення результату.
class Notification {
send(message: string): void {
console.log(`Повідомлення: ${message}`);
}
}Не слід використовувати void, якщо метод має повернути значення:
class PriceCalculator {
// Метод повертає число, тому його тип — number
calculateWithTax(price: number, tax: number): number {
return price + price * tax;
}
}thisКлючове слово this посилається на поточний об’єкт класу.
class BankAccount {
owner: string;
balance: number;
constructor(owner: string, balance: number) {
this.owner = owner;
this.balance = balance;
}
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У методі deposit:
this.balance += amount;означає: збільшити властивість balance поточного банківського рахунку на значення amount.
Кожен об’єкт має власні значення властивостей:
const firstAccount = new BankAccount("Андрій", 1000);
const secondAccount = new BankAccount("Марія", 2000);
firstAccount.deposit(500);
console.log(firstAccount.getBalance()); // 1500
console.log(secondAccount.getBalance()); // 2000Зміна firstAccount не змінює secondAccount.
Модифікатори доступу визначають, де можна використовувати властивість або метод.
publicpublic означає, що член класу доступний з будь-якого місця. Це значення за замовчуванням.
class User {
public name: string;
constructor(name: string) {
this.name = name;
}
}
const user = new User("Олена");
console.log(user.name);Запис public name: string рівнозначний запису name: string.
privateprivate означає, що властивість або метод доступні лише всередині самого класу.
class PasswordManager {
private password: string;
constructor(password: string) {
this.password = password;
}
checkPassword(value: string): boolean {
return this.password === value;
}
}
const manager = new PasswordManager("secret");
console.log(manager.checkPassword("secret")); // true
// Помилка: password є private
// console.log(manager.password);Властивість password не можна прочитати безпосередньо ззовні. Для перевірки використовується публічний метод checkPassword.
readonlyМодифікатор readonly забороняє змінювати властивість після її ініціалізації.
class Order {
readonly id: number;
status: string;
constructor(id: number, status: string) {
this.id = id;
this.status = status;
}
updateStatus(status: string): void {
this.status = status;
}
}
const order = new Order(101, "new");
order.updateStatus("paid");
// Помилка: id доступний лише для читання
// order.id = 102;readonly не означає, що властивість не можна встановити взагалі. Її можна встановити в момент оголошення або в конструкторі, але не можна змінити пізніше.
TypeScript дозволяє одночасно оголосити властивості та параметри конструктора. Для цього перед параметром конструктора використовують модифікатор доступу або readonly.
class User {
constructor(
public name: string,
public age: number
) {}
introduce(): string {
return `${this.name}, ${this.age} років`;
}
}Цей запис еквівалентний довшому варіанту:
class User {
public name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
introduce(): string {
return `${this.name}, ${this.age} років`;
}
}Скорочений запис зручний, коли параметри конструктора безпосередньо стають властивостями класу.
Можна поєднувати різні модифікатори:
class Article {
constructor(
public title: string,
private content: string,
public readonly id: number
) {}
getContent(): string {
return this.content;
}
}У цьому класі:
title доступна ззовні;
content доступна лише всередині класу;
id доступна ззовні, але її не можна змінити після створення об’єкта.
Нижче наведено клас кошика покупок. Він демонструє типізацію властивостей, конструктора, параметрів методів і значень, що повертаються.
class ShoppingCart {
private items: string[] = [];
constructor(public readonly owner: string) {}
addItem(item: string): void {
this.items.push(item);
}
removeItem(item: string): boolean {
const index: number = this.items.indexOf(item);
if (index === -1) {
return false;
}
this.items.splice(index, 1);
return true;
}
getItems(): string[] {
return [...this.items];
}
getItemCount(): number {
return this.items.length;
}
isEmpty(): boolean {
return this.items.length === 0;
}
}
const cart = new ShoppingCart("Олена");
cart.addItem("Книга");
cart.addItem("Навушники");
console.log(cart.getItems()); // ["Книга", "Навушники"]
console.log(cart.getItemCount()); // 2
console.log(cart.isEmpty()); // false
console.log(cart.removeItem("Книга")); // true
console.log(cart.getItems()); // ["Навушники"]Типи в цьому прикладі:
items: string[] — масив рядків;
owner: string — ім’я власника;
addItem(item: string): void — приймає рядок і нічого не повертає;
removeItem(item: string): boolean — повертає true або false;
getItems(): string[] — повертає масив рядків;
getItemCount(): number — повертає число;
isEmpty(): boolean — повертає логічне значення.
Властивість items оголошена як private, тому код поза класом не може змінити її напряму. Натомість робота з товарами відбувається через методи класу.
class ClassName {
publicProperty: string;
privateProperty: number;
readonlyProperty: boolean;
constructor(
publicProperty: string,
privateProperty: number,
readonlyProperty: boolean
) {
this.publicProperty = publicProperty;
this.privateProperty = privateProperty;
this.readonlyProperty = readonlyProperty;
}
method(parameter: string): number {
return parameter.length;
}
action(value: boolean): void {
console.log(value);
}
}Під час створення власного класу перевірте:
Чи має кожна властивість правильний тип?
Чи отримує кожна властивість початкове значення?
Чи типізовані всі параметри конструктора?
Чи відповідає тип методу значенню, яке він повертає?
Чи потрібен властивості модифікатор private або readonly?
class Greeter {
greet(name: string): string {
return `Привіт, ${name}!`;
}
}
// Помилка: число не можна передати замість рядка
// new Greeter().greet(42);class UserService {
getUserName(): string {
// Помилка: повертається number, а очікується string
// return 100;
return "Олена";
}
}class Profile {
name: string;
constructor() {
// За суворої перевірки TypeScript повідомить,
// що властивість name не ініціалізована
}
}Правильний варіант:
class Profile {
name: string;
constructor(name: string) {
this.name = name;
}
}readonlyclass Ticket {
constructor(public readonly number: number) {}
}
const ticket = new Ticket(10);
// Помилка: number доступний лише для читання
// ticket.number = 11;privateclass Account {
private balance: number = 0;
getBalance(): number {
return this.balance;
}
}
const account = new Account();
// Помилка: balance є private
// console.log(account.balance);
console.log(account.getBalance());Клас об’єднує властивості та методи об’єкта.
Властивості типізують після двокрапки: name: string.
Параметри конструктора та методів також повинні мати типи.
Тип значення, що повертається методом, записують після дужок: method(): number.
Для методів без результату використовують void.
public дозволяє доступ до члена класу ззовні.
private обмежує доступ межами класу.
readonly забороняє змінювати властивість після її ініціалізації.
Ключове слово this використовується для доступу до властивостей і методів поточного об’єкта.
Скорочений синтаксис конструктора дозволяє одночасно оголосити властивість і параметр конструктора.