TypeScript - Классы - CoderLessons.com

TypeScript — это объектно-ориентированный JavaScript. TypeScript поддерживает функции объектно-ориентированного программирования, такие как классы, интерфейсы и т. Д. Класс с точки зрения ООП — это план создания объектов. Класс инкапсулирует данные для объекта. Typescript предоставляет встроенную поддержку для этой концепции, называемой классом. JavaScript ES5 или более ранняя версия не поддерживала классы. Typescript получает эту функцию от ES6.

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

Используйте ключевое слово class для объявления класса в TypeScript. Синтаксис для того же приведен ниже —

Синтаксис

class class_name { 
   //class scope 
}

Ключевое слово class сопровождается именем класса. Правила для идентификаторов должны учитываться при именовании класса.

Определение класса может включать следующее:

Поля . Поле — это любая переменная, объявленная в классе. Поля представляют данные, относящиеся к объектам
Конструкторы — Ответственный за выделение памяти для объектов класса
Функции — функции представляют собой действия, которые может выполнять объект. Они также иногда упоминаются как методы

Поля . Поле — это любая переменная, объявленная в классе. Поля представляют данные, относящиеся к объектам

Конструкторы — Ответственный за выделение памяти для объектов класса

Функции — функции представляют собой действия, которые может выполнять объект. Они также иногда упоминаются как методы

Эти компоненты, собранные вместе, называются членами данных класса.

Рассмотрим класс Person в машинописи.

class Person {
}

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

Пример: объявление класса

class Car { 
   //field 
   engine:string; 
 
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  

   //function 
   disp():void { 
      console.log("Engine is  :   "+this.engine) 
   } 
}

В примере объявляется класс Car. У класса есть поле с именем engine. Ключевое слово var не используется при объявлении поля. В приведенном выше примере объявляется конструктор для класса.

Конструктор — это специальная функция класса, которая отвечает за инициализацию переменных класса. TypeScript определяет конструктор, используя ключевое слово constructor. Конструктор является функцией и, следовательно, может быть параметризован.

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

disp () — это простое определение функции. Обратите внимание, что ключевое слово function здесь не используется.

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Engine is  :   " + this.engine);
   };
   return Car;
}());

Создание объектов Instance

Чтобы создать экземпляр класса, используйте ключевое слово new, за которым следует имя класса. Синтаксис для того же приведен ниже —

Синтаксис

var object_name = new class_name([ arguments ])

Новое ключевое слово отвечает за создание экземпляров.
Правая часть выражения вызывает конструктор. В конструктор должны быть переданы значения, если он параметризован.

Новое ключевое слово отвечает за создание экземпляров.

Правая часть выражения вызывает конструктор. В конструктор должны быть переданы значения, если он параметризован.

Пример: создание класса

var obj = new Car("Engine 1")

Доступ к атрибутам и функциям

Атрибуты и функции класса могут быть доступны через объект. Использовать ‘ . ‘точечная нотация (называемая точкой) для доступа к данным членов класса.

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

Пример: собрать их вместе

class Car { 
   //field 
   engine:string; 
   
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   //function 
   disp():void { 
      console.log("Function displays Engine is  :   "+this.engine) 
   } 
} 

//create an object 
var obj = new Car("XXSY1")

//access the field 
console.log("Reading attribute value Engine as :  "+obj.engine)  

//access the function
obj.disp()

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Function displays Engine is  :   " + this.engine);
   };
   return Car;
}());

//create an object
var obj = new Car("XXSY1");

//access the field
console.log("Reading attribute value Engine as :  " + obj.engine);

//access the function
obj.disp();

Вывод вышеуказанного кода выглядит следующим образом:

Reading attribute value Engine as :  XXSY1 
Function displays Engine is  :   XXSY1

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

TypeScript поддерживает концепцию наследования. Наследование — это способность программы создавать новые классы из существующего класса. Класс, расширенный для создания более новых классов, называется родительским классом / суперклассом. Вновь созданные классы называются дочерними / подклассами.

Класс наследуется от другого класса с помощью ключевого слова extends. Дочерние классы наследуют все свойства и методы, кроме закрытых членов и конструкторов, от родительского класса.

Синтаксис

class child_class_name extends parent_class_name

Однако TypeScript не поддерживает множественное наследование.

Пример: наследование классов

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 

class Circle extends Shape { 
   disp():void { 
      console.log("Area of the circle:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Shape = (function () {
   function Shape(a) {
      this.Area = a;
   }
   return Shape;
}());

var Circle = (function (_super) {
   __extends(Circle, _super);
   function Circle() {
      _super.apply(this, arguments);
   }
	
   Circle.prototype.disp = function () { 
      console.log("Area of the circle:  " + this.Area); 
   };
   return Circle;
}(Shape));

var obj = new Circle(223);
obj.disp();

Вывод вышеуказанного кода выглядит следующим образом:

Area of the Circle: 223

В приведенном выше примере объявляется класс Shape. Класс расширен классом Circle. Поскольку между классами существуют отношения наследования, дочерний класс, то есть класс Car, получает неявный доступ к своему атрибуту родительского класса, т.е. к области.

Наследование может быть классифицировано как —

Single — каждый класс может быть максимально расширен от одного родительского класса
Несколько — класс может наследоваться от нескольких классов. TypeScript не поддерживает множественное наследование.
Многоуровневый. В следующем примере показано, как работает многоуровневое наследование.

Single — каждый класс может быть максимально расширен от одного родительского класса

Несколько — класс может наследоваться от нескольких классов. TypeScript не поддерживает множественное наследование.

Многоуровневый. В следующем примере показано, как работает многоуровневое наследование.

пример

class Root { 
   str:string; 
} 

class Child extends Root {} 
class Leaf extends Child {} //indirectly inherits from Root by virtue of inheritance  

var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

Класс Leaf извлекает атрибуты из классов Root и Child посредством многоуровневого наследования.

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var Root = (function () {
   function Root() {
   }
   return Root;
}());

var Child = (function (_super) {
   __extends(Child, _super);
   function Child() {
      _super.apply(this, arguments);
   }
   return Child;
}(Root));

var Leaf = (function (_super) {
   __extends(Leaf, _super);
   function Leaf() {
      _super.apply(this, arguments);
   }
   return Leaf;
}(Child));

var obj = new Leaf();
obj.str = "hello";
console.log(obj.str);

Его вывод выглядит следующим образом —

Выход

hello

TypeScript ─ Наследование классов и переопределение методов

Переопределение метода — это механизм, с помощью которого дочерний класс переопределяет метод суперкласса. Следующий пример иллюстрирует то же самое —

class PrinterClass { 
   doPrint():void {
      console.log("doPrint() from Parent called…") 
   } 
} 

class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() 
      console.log("doPrint() is printing a string…")
   } 
} 

var obj = new StringPrinter() 
obj.doPrint()

Ключевое слово super используется для ссылки на непосредственного родителя класса. Ключевое слово может использоваться для ссылки на версию класса, свойства или метода суперкласса. Строка 13 вызывает версию суперкласса функции doWork ().

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var PrinterClass = (function () {
   function PrinterClass() {
   }
   PrinterClass.prototype.doPrint = function () { 
      console.log("doPrint() from Parent called…"); 
   };
   return PrinterClass;
}());

var StringPrinter = (function (_super) {
   __extends(StringPrinter, _super);
	
   function StringPrinter() {
      _super.apply(this, arguments);
   }
	
   StringPrinter.prototype.doPrint = function () {
      _super.prototype.doPrint.call(this);
      console.log("doPrint() is printing a string…");
   };
	
   return StringPrinter;
}(PrinterClass));

var obj = new StringPrinter();
obj.doPrint();

Вывод вышеуказанного кода выглядит следующим образом:

doPrint() from Parent called… 
doPrint() is printing a string…

Статическое ключевое слово

Ключевое слово static может применяться к членам данных класса. Статическая переменная сохраняет свои значения, пока программа не завершит выполнение. На статические члены ссылается имя класса.

пример

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("The value of num is"+ StaticMem.num) 
   } 
} 

StaticMem.num = 12     // initialize the static variable 
StaticMem.disp()      // invoke the static method

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var StaticMem = (function () {
   function StaticMem() {
   }
	
   StaticMem.disp = function () {
      console.log("The value of num is" + StaticMem.num);
   };
	
   return StaticMem;
}());

StaticMem.num = 12;     // initialize the static variable
StaticMem.disp();      // invoke the static method

Вывод вышеуказанного кода выглядит следующим образом:

The value of num is 12

Оператор instanceof

Оператор instanceof возвращает true, если объект принадлежит указанному типу.

пример

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

Вывод вышеуказанного кода выглядит следующим образом:

obj is an instance of Person True

Скрытие данных

Класс может управлять видимостью своих членов данных для членов других классов. Эта возможность называется скрытием данных или инкапсуляцией.

Объектная ориентация использует концепцию модификаторов доступа или спецификаторов доступа для реализации концепции инкапсуляции. Спецификаторы / модификаторы доступа определяют видимость членов данных класса вне его определяющего класса.

Модификаторы доступа, поддерживаемые TypeScript:

S.No.	Спецификатор доступа и описание
1.	общественности Публичный член данных имеет универсальный доступ. Элементы данных в классе являются общедоступными по умолчанию.
2.	частный Частные члены данных доступны только внутри класса, который определяет эти члены. Если внешний член класса пытается получить доступ к закрытому члену, компилятор выдает ошибку.
3.	защищенный Защищенный элемент данных доступен членам в том же классе, что и в первом классе, а также членам дочерних классов.

S.No.

Спецификатор доступа и описание

общественности

Публичный член данных имеет универсальный доступ. Элементы данных в классе являются общедоступными по умолчанию.

частный

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

защищенный

Защищенный элемент данных доступен членам в том же классе, что и в первом классе, а также членам дочерних классов.

общественности

частный

защищенный

пример

Давайте теперь возьмем пример, чтобы увидеть, как работает сокрытие данных —

class Encapsulate { 
   str:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str)     //accessible 
console.log(obj.str2)   //compilation Error as str2 is private

Класс имеет два строковых атрибута, str1 и str2, которые являются открытыми и закрытыми членами соответственно. Класс создан. В примере возвращается ошибка времени компиляции, поскольку доступ к закрытому атрибуту str2 осуществляется вне класса, который его объявляет.

Классы и Интерфейсы

Классы также могут реализовывать интерфейсы.

interface ILoan { 
   interest:number 
} 

class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 

var obj = new AgriLoan(10,1) 
console.log("Interest is : "+obj.interest+" Rebate is : "+obj.rebate )

Класс AgriLoan реализует интерфейс Loan. Следовательно, теперь класс обязателен для включения интереса свойства в качестве своего члена.

При компиляции он сгенерирует следующий код JavaScript.

//Generated by typescript 1.8.10
var AgriLoan = (function () {
   function AgriLoan(interest, rebate) {
      this.interest = interest;
      this.rebate = rebate;
   }
   return AgriLoan;
}());

var obj = new AgriLoan(10, 1);
console.log("Interest is : " + obj.interest + " Rebate is : " + obj.rebate);

Вывод вышеуказанного кода выглядит следующим образом:

TypeScript — Классы

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

Синтаксис

Пример: объявление класса

Создание объектов Instance

Синтаксис

Пример: создание класса

Доступ к атрибутам и функциям

Пример: собрать их вместе

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

Синтаксис

Пример: наследование классов

пример

Выход

TypeScript ─ Наследование классов и переопределение методов

Статическое ключевое слово

пример

Оператор instanceof

пример

Скрытие данных

пример

Классы и Интерфейсы

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности