НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
TypeScript. Уроки для початківців

En Es De

TypeScript Класи


TypeScript додає типи та модифікатори видимості до класів JavaScript.

Дізнайтеся більше про класи JavaScript тут: JS Класи.


Члени: типи

Члени класу (властивості та методи) вводяться за допомогою анотацій типу, подібних до змінних.

Приклад

class Person {
  name: string;
}

const person = new Person();
person.name = "Jane";
Спробуйте самі »

Члени: Видимість

Членам класу також надаються спеціальні модифікатори, які впливають на видимість.

У TypeScript є три основні модифікатори видимості.

  • public - (за замовчуванням) дозволяє доступ до члена класу з будь-якого місця
  • private - дозволяє лише доступ до члена класу з класу
  • protected - дозволяє доступ до члена класу від самого себе та будь-яких класів, які його успадковують, про що йдеться в розділі успадкування нижче

Приклад

class Person {
  private name: string;

  public constructor(name: string) {
    this.name = name;
  }

  public getName(): string {
    return this.name;
  }
}

const person = new Person("Jane");
console.log(person.getName()); // person.name isn't accessible from outside the class since it's private
Спробуйте самі »

Ключове слово this у класі зазвичай посилається на екземпляр класу. Докладніше про this тут: JS Ключове слово this.


Властивості параметра

TypeScript забезпечує зручний спосіб визначення членів класу в конструкторі шляхом додавання модифікаторів видимості до параметра.

Приклад

class Person {
  // name є приватною змінною-членом
  public constructor(private name: string) {}

  public getName(): string {
    return this.name;
  }
}

const person = new Person("Jane");
console.log(person.getName());
Спробуйте самі »

Лише читання - Readonly

Подібно до масивів, ключове слово readonly може запобігти зміні членів класу.

Приклад

class Person {
  private readonly name: string;

  public constructor(name: string) {
    // name не можна змінити після цього початкового визначення, яке має бути або в його декларації, або в конструкторі
    this.name = name;
  }

  public getName(): string {
    return this.name;
  }
}

const person = new Person("Jane");
console.log(person.getName());
Спробуйте самі »

Наслідування: реалізація

Інтерфейси (розглянуті в розділі Псевдоніми та інтерфейси) можна використовувати для визначення типу, якому має відповідати клас через ключове слово implements (реалізація).

Приклад

interface Shape {
  getArea: () => number;
}

class Rectangle implements Shape {
  public constructor(protected readonly width: number, protected readonly height: number) {}

  public getArea(): number {
    return this.width * this.height;
  }
}
Спробуйте самі »

Клас може реалізовувати кілька інтерфейсів, перераховуючи кожен із них після реалізацій, розділяючи їх комою, ось так: class Rectangle implements Shape, Colored {


Успадкування: розширювання

Класи можуть розширювати один одного за допомогою ключового слова extends. Клас може розширювати лише один інший клас.

Приклад

interface Shape {
  getArea: () => number;
}

class Rectangle implements Shape {
  public constructor(protected readonly width: number, protected readonly height: number) {}

  public getArea(): number {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  public constructor(width: number) {
    super(width, width);
  }

  // getArea успадковується від Rectangle
}
Спробуйте самі »

Перевизначити - Override

Коли клас розширює інший клас, він може замінити членів батьківського класу з тим самим іменем.

Новіші версії TypeScript дозволяють явно позначати це ключовим словом override.

Приклад

interface Shape {
  getArea: () => number;
}

class Rectangle implements Shape {
  // використання protected для цих членів дозволяє доступ із класів, які виходять із цього класу, наприклад Square
  public constructor(protected readonly width: number, protected readonly height: number) {}

  public getArea(): number {
    return this.width * this.height;
  }

  public toString(): string {
    return `Rectangle[width=${this.width}, height=${this.height}]`;
  }
}

class Square extends Rectangle {
  public constructor(width: number) {
    super(width, width);
  }

  // цей toString замінює toString із Rectangle
  public override toString(): string {
    return `Square[width=${this.width}]`;
  }
}
Спробуйте самі »

За замовчуванням ключове слово override є необов’язковим під час заміни методу та допомагає лише запобігти випадковій заміні методу, якого не існує. Використовуйте параметр noImplicitOverride, щоб примусово використовувати його під час перевизначення.


Абстрактні класи

Класи можуть бути написані таким чином, щоб їх можна було використовувати як базовий клас для інших класів без необхідності впровадження всіх членів. Це робиться за допомогою ключового слова abstract. Члени, які залишилися нереалізованими, також використовують ключове слово abstract.

Приклад

abstract class Polygon {
  public abstract getArea(): number;

  public toString(): string {
    return `Polygon[area=${this.getArea()}]`;
  }
}

class Rectangle extends Polygon {
  public constructor(protected readonly width: number, protected readonly height: number) {
    super();
  }

  public getArea(): number {
    return this.width * this.height;
  }
}
Спробуйте самі »

Абстрактні класи не можуть бути створені безпосередньо, оскільки в них реалізовані не всі їхні члени.


TypeScript Вправи

Перевірте себе за допомогою вправ

Вправа:

Вкажіть, що Person.name доступний лише в межах класу, а метод Person.getName() доступний будь-де:

class Person {
 name: string;

public constructor(name: string) {
this.name = name;
}

 getName(): string {
return this.name;
}
}



Коментарі