Класи в TypeScript

Клас у TypeScript (по аналогії з іншими мовами програмування) – є своєрідним шаблоном для створення об’єктів. Клас визначає дані (поля або властивості) та операції (методи), які можна виконувати над цими даними. За допомогою одного класу можна створити безліч об’єктів, кожний з котрих буде мати свій власний стан (тобто дані), та загальну поведінку визначену в класі (методи).

Оголошення класів у TypeScript

Для створення класу використовується ключове слово class, за яким слідують фігурні дужки – {}, всередині котрих міститься тіло класу. У дужках додаються спеціальний метод-конструктор, властивості та методи класу. Нижче наведено порожній клас:

class Person {}

Оголошення класу може містити:

  • Конструктор – спеціальна функція, яка викликається кожного разу, під час створення нового об’єкта класу.
  • Поля (властивості) – це змінні, які оголошуються у класі. Вони будуть містити дані класу та його об’єктів.
  • Функції (методи) – операції, які можуть виконувати об’єкти класу. Вони представляють поведінку класу.

Визначення полів класу

Поля (властивості) класу зберігають дані класу та його об’єктів. Додавання поля подібне до оголошення змінних, але без використання ключових слів let, var або const.

В прикладі нижче, до класу Person додано два поля – firstName та lastName, котрі мають тип string:

class Person {
  firstName: string = '';
  lastName: string = '';
}

На поточний момент, обидва поля ініціалізовано порожнім рядком, щоб уникнути помилки від компілятора TypeScript на кшталт: Property ‘firstName’ has no initializer and is not definitely assigned in the constructor.

Створення об’єктів класу

Клас діє як шаблон для створення об’єктів. Ми можемо створити безліч об’єктів, використовуючи один і той самий клас. Приклад створення об’єкта класу:

class Person {
  firstName: string = '';
  lastName: string = '';
}

const person = new Person();
person.firstName = 'Jenifer';
person.lastName = 'Kidd';

console.log(person); // Person { firstName: 'Jenifer', lastName: 'Kidd' }

Ініціалізація властивостей початковими значеннями

Є кілька способів для встановлення початкових значень, полям оголошеним у класі. Один з них, це визначення полів одразу з початковими значеннями:

class Person {
  firstName: string = 'Jenifer';
  lastName: string = 'Kidd';
}

const personOne = new Person();
console.log(personOne); // Person { firstName: 'Jenifer', lastName: 'Kidd' }

const personTwo = new Person();
console.log(personTwo); // Person { firstName: 'Jenifer', lastName: 'Kidd' }

Проблема цього підходу полягає у тому, що кожний створюваний об’єкт, матиме однакові значення для firstName та lastName. Кращим способом є використання функції-конструктора, яка дозволяє передавати та встановлювати різні значення властивостям, під час створення об’єкта.

Функція constructor

constructor (конструктор) – це спеціальна функція класу, яка автоматично викликається під час створення екземпляра класу. constructor використовується для створення та ініціалізації об’єкта. У TypeScript клас може мати тільки одну реалізацію конструктора.

class Person {
  constructor() {
    console.log('Constructor is called');
  }
}

const person = new Person(); // Constructor is called

У цьому прикладі, визначено клас Person з функцією конструктора, котра просто виводить повідомлення у консоль, кожного разу коли створюється новий об’єкт за допомогою виклику new Person().

Функція конструктор може приймати будь-яку кількість аргументів. Приклад використання constructor для ініціалізації екземпляра класу:

class Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

Тепер, при створенні екземпляра Person викликом оператора new, слід передати в якості аргументів значення для firstName та lastName:

const personOne = new Person('Lauren', 'Dean');
const personTwo = new Person('Jenifer', 'Kidd');

console.log(personOne); // Person { firstName: 'Lauren', lastName: 'Dean' }
console.log(personTwo); // Person { firstName: 'Jenifer', lastName: 'Kidd' }

Конструктор створює екземпляр класу зі вже ініціалізованими властивостями. Доступ до поточного екземпляра класу всередині конструктора, можна отримати за допомогою ключового слова this. Таким чином, використовуючи this, ми ініціалізуємо властивості саме поточного об’єкта. По завершенню своєї роботи, функція constructor повертає новий об’єкт, посилання на котрий можна присвоїти змінній.

Методи класу

Функція, оголошена всередині класу, називається методом. Методи представляють поведінку класу.

Визначення методу подібне до створення функції (але без використання ключового слова function):

class Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

В прикладі вище, метод getFullName повертає повне ім’я об’єкта Person. Всередині методів можна використовувати ключове слово this, для доступу до полів та інших методів поточного об’єкта. Приклад виклику метода:

const person = new Person('Lauren', 'Dean');
console.log(person.getFullName()); // Lauren Dean

Використання класу

Видимість оголошеного класу в TypeScript (так само як JavaScript), не піднімається, тобто немає можливості використовувати клас до того, як його оголошено. Наступний код призведе до помилки:

const personOne = new Person('Lauren', 'Dean');
// Class 'Person' used before its declaration

class Person {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

Мітки: