5.1 Объявление свойств классов
Свойства и методы классов определяют состояние и поведение объектов, создаваемых на основе этих классов. В этой лекции мы более детально рассмотрим, как объявлять и использовать свойства и методы классов в TypeScript, их типизацию и различные особенности.
Свойства класса представляют собой переменные, которые принадлежат объектам, созданным на основе этого класса. Они определяют состояние объекта и могут иметь различные типы данных.
Синтаксис объявления свойств
Свойства классов объявляются внутри тела класса. При этом можно указать их типы, а также инициализировать значения.
Пример:
"use strict";
class Person {
constructor(name, age, isEmployed) {
this.name = name;
this.age = age;
this.isEmployed = isEmployed;
}
}
let person = new Person('Alice', 30, true);
console.log(person.name); // Вывод: Alice
console.log(person.age); // Вывод: 30
console.log(person.isEmployed); // Вывод: true
class Person {
name: string;
age: number;
isEmployed: boolean;
constructor(name: string, age: number, isEmployed: boolean) {
this.name = name;
this.age = age;
this.isEmployed = isEmployed;
}
}
let person = new Person('Alice', 30, true);
console.log(person.name); // Вывод: Alice
console.log(person.age); // Вывод: 30
console.log(person.isEmployed); // Вывод: true
В этом примере у класса Person три свойства: name, age и isEmployed. Эти свойства инициализируются в конструкторе и могут быть доступны через объект person.
Инициализация свойств
Свойства можно инициализировать значениями непосредственно при объявлении или в конструкторе класса.
Пример инициализации при объявлении:
"use strict";
class Car {
constructor() {
this.make = 'Toyota';
this.model = 'Camry';
this.year = 2020;
}
}
let car = new Car();
console.log(car.make); // Вывод: Toyota
console.log(car.model); // Вывод: Camry
console.log(car.year); // Вывод: 2020
class Car {
make: string = 'Toyota';
model: string = 'Camry';
year: number = 2020;
}
let car = new Car();
console.log(car.make); // Вывод: Toyota
console.log(car.model); // Вывод: Camry
console.log(car.year); // Вывод: 2020
В этом примере свойства make, model и year инициализируются значениями непосредственно при их объявлении.
Опциональные свойства
Свойства класса могут быть опциональными, что означает, что они могут не присутствовать в объекте. Для этого используется символ "?".
Пример опциональных свойств:
"use strict";
class User {
constructor(name, age) {
this.name = name;
if (age) {
this.age = age;
}
}
}
let user1 = new User('Bob');
let user2 = new User('Charlie', 40);
console.log(user1.age); // Вывод: undefined
console.log(user2.age); // Вывод: 40
class User {
name: string;
age?: number;
constructor(name: string, age?: number) {
this.name = name;
if (age) {
this.age = age;
}
}
}
let user1 = new User('Bob');
let user2 = new User('Charlie', 40);
console.log(user1.age); // Вывод: undefined
console.log(user2.age); // Вывод: 40
В этом примере свойство age является опциональным и может не присутствовать в объекте user1.
5.2 Объявление методов классов
Методы класса представляют собой функции, которые принадлежат объектам, созданным на основе этого класса. Они определяют поведение объектов и могут взаимодействовать с их свойствами.
Синтаксис объявления методов
Методы объявляются внутри тела класса и могут иметь параметры и возвращаемые значения.
Пример:
"use strict";
class Calculator {
add(a, b) {
return a + b;
}
subtract(a, b) {
return a - b;
}
}
let calculator = new Calculator();
console.log(calculator.add(5, 3)); // Вывод: 8
console.log(calculator.subtract(5, 3)); // Вывод: 2
class Calculator {
add(a: number, b: number): number {
return a + b;
}
subtract(a: number, b: number): number {
return a - b;
}
}
let calculator = new Calculator();
console.log(calculator.add(5, 3)); // Вывод: 8
console.log(calculator.subtract(5, 3)); // Вывод: 2
В этом примере у класса Calculator есть два метода: add и subtract, которые выполняют арифметические операции.
Методы, работающие со свойствами
Методы классов могут взаимодействовать с их свойствами, что позволяет выполнять действия на основе состояния объекта.
Пример:
"use strict";
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
calculateArea() {
return this.width * this.height;
}
calculatePerimeter() {
return 2 * (this.width + this.height);
}
}
let rectangle = new Rectangle(10, 20);
console.log(rectangle.calculateArea()); // Вывод: 200
console.log(rectangle.calculatePerimeter()); // Вывод: 60
class Rectangle {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
calculateArea(): number {
return this.width * this.height;
}
calculatePerimeter(): number {
return 2 * (this.width + this.height);
}
}
let rectangle = new Rectangle(10, 20);
console.log(rectangle.calculateArea()); // Вывод: 200
console.log(rectangle.calculatePerimeter()); // Вывод: 60
Здесь методы calculateArea и calculatePerimeter работают со свойствами width и height класса Rectangle.
Статические методы
Статические методы принадлежат классу, а не его экземплярам. Они объявляются с использованием ключевого слова static.
Пример:
"use strict";
class MathUtil {
static calculateCircumference(radius) {
return 2 * MathUtil.pi * radius;
}
}
MathUtil.pi = 3.14;
console.log(MathUtil.pi); // Вывод: 3.14
console.log(MathUtil.calculateCircumference(10)); // Вывод: 62.800000000000004
class MathUtil {
static pi: number = 3.14;
static calculateCircumference(radius: number): number {
return 2 * MathUtil.pi * radius;
}
}
console.log(MathUtil.pi); // Вывод: 3.14
console.log(MathUtil.calculateCircumference(10)); // Вывод: 62.800000000000004
В этом примере pi и calculateCircumference статические и могут быть вызваны напрямую через класс MathUtil.
5.3 Геттеры и сеттеры
Геттеры и сеттеры позволяют контролировать доступ к свойствам объекта. Геттеры используются для получения значения свойства, а сеттеры — для его установки с валидацией.
Объявление геттеров и сеттеров
Геттеры объявляются с использованием ключевого слова get, а сеттеры — с использованием ключевого слова set.
Пример:
"use strict";
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(newName) {
if (newName.length > 0) {
this._name = newName;
}
else {
console.log('Name cannot be empty');
}
}
}
let person = new Person('Alice');
console.log(person.name); // Вывод: Alice
person.name = 'Bob';
console.log(person.name); // Вывод: Bob
person.name = ''; // Вывод: Name cannot be empty
class Person {
private _name: string;
constructor(name: string) {
this._name = name;
}
get name(): string {
return this._name;
}
set name(newName: string) {
if (newName.length > 0) {
this._name = newName;
} else {
console.log('Name cannot be empty');
}
}
}
let person = new Person('Alice');
console.log(person.name); // Вывод: Alice
person.name = 'Bob';
console.log(person.name); // Вывод: Bob
person.name = ''; // Вывод: Name cannot be empty
В этом примере геттер name позволяет получить значение свойства _name, а сеттер name позволяет установить новое значение с проверкой на непустую строку.
5.4 Примеры
Рассмотрим несколько примеров использования свойств и методов классов в реальных проектах.
Пример 1: Модель пользователя
"use strict";
class User {
constructor(id, name, email) {
this.id = id;
this.name = name;
this.email = email;
}
getDetails() {
return `User: ${this.name}, Email: ${this.email}`;
}
}
let user = new User(1, 'Alice', 'alice@example.com');
console.log(user.getDetails()); // Вывод: User: Alice, Email: alice@example.com
class User {
private id: number;
private name: string;
private email: string;
constructor(id: number, name: string, email: string) {
this.id = id;
this.name = name;
this.email = email;
}
getDetails(): string {
return `User: ${this.name}, Email: ${this.email}`;
}
}
let user = new User(1, 'Alice', 'alice@example.com');
console.log(user.getDetails()); // Вывод: User: Alice, Email: alice@example.com
Пример 2: Управление задачами
"use strict";
class Task {
constructor(id, title) {
this.id = id;
this.title = title;
this.completed = false;
}
complete() {
this.completed = true;
}
display() {
console.log(`Task: ${this.title}, Completed: ${this.completed}`);
}
}
let task = new Task(1, 'Learn TypeScript');
task.display(); // Вывод: Task: Learn TypeScript, Completed: false
task.complete();
task.display(); // Вывод: Task: Learn TypeScript, Completed: true
class Task {
id: number;
title: string;
completed: boolean;
constructor(id: number, title: string) {
this.id = id;
this.title = title;
this.completed = false;
}
complete(): void {
this.completed = true;
}
display(): void {
console.log(`Task: ${this.title}, Completed: ${this.completed}`);
}
}
let task = new Task(1, 'Learn TypeScript');
task.display(); // Вывод: Task: Learn TypeScript, Completed: false
task.complete();
task.display(); // Вывод: Task: Learn TypeScript, Completed: true
Пример 3: Управление продуктами
"use strict";
class Product {
constructor(id, name, price) {
this.id = id;
this.name = name;
this.price = price;
}
display() {
console.log(`Product: ${this.name}, Price: $${this.price}`);
}
}
let product = new Product(101, 'Laptop', 1200);
product.display(); // Вывод: Product: Laptop, Price: $1200
class Product {
id: number;
name: string;
price: number;
constructor(id: number, name: string, price: number) {
this.id = id;
this.name = name;
this.price = price;
}
display(): void {
console.log(`Product: ${this.name}, Price: $${this.price}`);
}
}
let product = new Product(101, 'Laptop', 1200);
product.display(); // Вывод: Product: Laptop, Price: $1200
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ