ТипScript для начинающих, часть 4: Классы
() 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.



Наследование в 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. Мы начали учебное пособие, создав очень простой класс Person
, который печатал имя человека на консоли. После этого вы узнали о ключевом слове private
, которое может использоваться для предотвращения доступа к членам класса из любой произвольной точки программы.
Наконец, вы научились расширять различные классы в своем коде, используя базовый класс с наследованием. В официальной документации вы можете узнать побольше о классах.
Если у вас есть какие-либо вопросы, связанные с этой статьей, дайте мне знать в комментариях.