Advertisement
  1. Code
  2. JavaScript

ТипScript для начинающих, часть 4: Классы

Scroll to top
Read Time: 6 min
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 3: Interfaces
TypeScript for Beginners, Part 5: Generics

() translation by (you can also view the original English article)

Мы прошли долгий путь в изучении TypeScript с начала этой серии. Первый учебник дал вам краткое введение TypeScript и предложил некоторые IDE, которые вы можете использовать для написания TypeScript. Во втором учебнике основное внимание было уделено типам данных, а в третьем учебном пособии обсуждались основы интерфейсов в TypeScript.

Как вы уже знаете, JavaScript только недавно добавил встроенную поддержку классов и объектно-ориентированного программирования. Тем не менее, TypeScript позволяет разработчикам использовать классы в своем коде в течение длительного времени. Этот код затем скомпилируется в JavaScript, который будет работать во всех основных браузерах. В этом уроке вы узнаете о классах в TypeScript. Они похожи на их аналоги ES6, но более строгие.

Создание первого класса

Начнем с основ. Классы являются фундаментальной частью объектно-ориентированного программирования. Вы используете классы для представления любого объекта, который имеет некоторые свойства и функции, которые могут воздействовать на заданные свойства. TypeScript дает вам полный контроль над свойствами и функциями, которые доступны внутри и снаружи своего собственного класса. Вот очень простой пример создания класса Person.

1
class Person {
2
     name: string;
3
     constructor(theName: string) {
4
         this.name = theName;
5
     }
6
     introduceSelf() {
7
         console.log("Hi, I am " + this.name + "!");
8
     }
9
 }
10
 
11
 let personA = new Person("Sally");
12
 
13
 personA.introduceSelf();

Вышеприведенный код создает очень простой класс Person. Этот класс имеет свойство name, и функцию IntroduSelf. Класс также имеет конструктор, который также является в основном функцией. Однако конструкторы являются особыми функциями, потому что они вызываются каждый раз, когда мы создаем новый экземпляр нашего класса.

Вы также можете передавать параметры конструкторам для инициализации различных свойств. В нашем случае мы используем конструктор для инициализации имени человека, который мы создаем, используя класс Person. Функция presentationSelf является методом класса Person, и мы используем его здесь, чтобы напечатать имя человека на консоли. Все эти свойства, методы и конструктор класса все вместе называются членами класса.

Вы должны иметь в виду, что класс Person автоматически не создает человека. Это больше похоже на план со всей информацией об атрибутах, которые человек должен был создать. Имея это в виду, мы создали нового человека и назвали ее Салли. Вызов метода presentSelf у этого человека напечатает строку «Привет, я Салли!» на консоль.

Приватные и публичные модификаторы

В предыдущем разделе мы создали человека по имени Салли. Прямо сейчас, можно изменить имя человека от Салли до Минди в любом месте нашего кода, как показано в следующем примере.

1
class Person {
2
     name: string;
3
     constructor(theName: string) {
4
         this.name = theName;
5
     }
6
     introduceSelf() {
7
         console.log("Hi, I am " + this.name + "!");
8
     }
9
 }
10
 
11
 let personA = new Person("Sally");
12
 
13
 // Prints "Hi, I am Sally!"

14
 personA.introduceSelf();
15
 
16
 personA.name = "Mindy";
17
 
18
 // Prints "Hi, I am Mindy!"

19
 personA.introduceSelf();
20
 

Вы возможно заметили, что нам удалось использовать как свойство name, так и метод presentationSelf вне класса. Это связано с тем, что все члены класса в TypeScript являются public по умолчанию. Вы также можете явно указать, что свойство или метод являются общедоступными, добавив перед ним ключевое слово public.

Иногда вы не хотите, чтобы свойство или метод были доступны вне его содержащего класса. Это может быть достигнуто за счет того, что эти члены закрыты, используя ключевое слово private. В приведенном выше коде мы можем сделать свойство name private и не изменять его вне класса. После этого изменения TypeScript покажет вам сообщение о том, что свойство name является private, и вы можете получить доступ к нему только внутри класса Person. Снимок экрана ниже показывает ошибку в Visual Studio Code.

A private property not accessible outside its classA private property not accessible outside its classA private property not accessible outside its class

Наследование в TypeScript

Наследование позволяет создавать более сложные классы, начиная с базового класса. Например, мы можем использовать класс Person из предыдущего раздела в качестве базы для создания класса Friend, в котором будут все члены классы Person и добавлены некоторые его собственные. Аналогичным образом, вы также можете добавить класс Family или Teacher.

Они все наследуют методы и свойства класса Person, добавляя некоторые свои методы и собственные свойства, чтобы разделить их. Следующий пример должен более ясно показать вам это. Я также добавил код для класса Person здесь, чтобы вы могли легко сравнить код как базового класса, так и производного класса.

1
class Person {
2
     private name: string;
3
     constructor(theName: string) {
4
         this.name = theName;
5
     }
6
     introduceSelf() {
7
         console.log("Hi, I am " + this.name + "!");
8
     }
9
 }
10
 
11
 class Friend extends Person {
12
     yearsKnown: number;
13
     constructor(name: string, yearsKnown: number) {
14
         super(name);
15
         this.yearsKnown = yearsKnown;
16
     }
17
     timeKnown() {
18
         console.log("We have been friends for " + this.yearsKnown + " years.")
19
     }
20
 }
21
 
22
 let friendA = new Friend("Jacob", 6);
23
 
24
 // Prints: Hi, I am Jacob!

25
 friendA.introduceSelf();
26
 
27
 // Prints: We have been friends for 6 years.

28
 friendA.timeKnown();
29
 

Как вы можете видеть, вам нужно использовать ключевое слово extend для класса Friend для наследования всех членов класса Person. Важно помнить, что конструктор производного класса должен всегда вызывать конструктор базового класса с вызовом super().

Возможно, вы заметили, что конструктор Friend не должен иметь такое же количество параметров, что и базовый класс. Тем не менее, первый параметр имени был передан super(), чтобы вызвать конструктор родителя, который также принял один параметр. Нам не нужно было переопределять функцию presentationSelf внутри класса Friend, потому что он был унаследован от класса Person.

Использование модификатора protected

До этого момента мы только делали членов класса private или public. Публикуя их, мы можем получить доступ к ним из любого места, делая их приватными, они становятся видны только внутри класса. Иногда вы можете захотеть, чтобы члены базового класса были доступны во всех производных классах.

В таких случаях ыы можете использовать модификатор protected, чтобы ограничить доступ члена только к производным классам. Вы также можете использовать ключевое слово protected с конструктором базового класса. Это не позволит кому-либо создать экземпляр этого класса. Тем не менее, вы по-прежнему сможете расширять классы на основе этого базового класса.

1
class Person {
2
     private name: string;
3
     protected age: number;
4
     protected constructor(theName: string, theAge: number) {
5
         this.name = theName;
6
         this.age = theAge;
7
     }
8
     introduceSelf() {
9
         console.log("Hi, I am " + this.name + "!");
10
     }
11
 }
12
 
13
 class Friend extends Person {
14
     yearsKnown: number;
15
     constructor(name: string, age: number, yearsKnown: number) {
16
         super(name, age);
17
         this.yearsKnown = yearsKnown;
18
     }
19
     timeKnown() {
20
         console.log("We have been friends for " + this.yearsKnown + " years.")
21
     }
22
     friendSince() {
23
         let firstAge = this.age - this.yearsKnown;
24
         console.log(`We have been friends since I was ${firstAge} years old.`)
25
     }
26
 }
27
 
28
 let friendA = new Friend("William", 19, 8);
29
 
30
 
31
 // Prints: We have been friends since I was 11 years old.

32
 friendA.friendSince();

В приведенном выше коде вы можете видеть, что мы создали свойство age как protected. Это предотвращает использование age вне любых классов, полученных от Person. Мы также использовали ключевое слово protected для конструктора класса Person. Объявление конструктора как protected означает, что мы больше не сможем напрямую создать экземпляр класса Person. На следующем скриншоте отображается ошибка, возникающая при попытке создать экземпляр класса с protected конструктором.

TypeScript protected constructorTypeScript protected constructorTypeScript protected constructor

Заключение

В этом уроке я попытался осветить основы классов в TypeScript. Мы начали учебное пособие, создав очень простой класс Person, который печатал имя человека на консоли. После этого вы узнали о ключевом слове private, которое может использоваться для предотвращения доступа к членам класса из любой произвольной точки программы.

Наконец, вы научились расширять различные классы в своем коде, используя базовый класс с наследованием. В официальной документации вы можете узнать побольше о классах.

Если у вас есть какие-либо вопросы, связанные с этой статьей, дайте мне знать в комментариях.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.