TypeScript - Classes

TypeScript est un JavaScript orienté objet. TypeScript prend en charge les fonctionnalités de programmation orientée objet telles que les classes, les interfaces, etc. Une classe en termes de POO est un modèle pour la création d'objets. Une classe encapsule les données de l'objet. Typescript fournit un support intégré pour ce concept appelé classe. JavaScript ES5 ou version antérieure ne prenait pas en charge les classes. Typescript obtient cette fonctionnalité depuis ES6.

Créer des classes

Utilisez le mot-clé class pour déclarer une classe dans TypeScript. La syntaxe pour le même est donnée ci-dessous -

Syntaxe

class class_name { 
   //class scope 
}

Le mot-clé class est suivi du nom de la classe. Les règles relatives aux identificateurs doivent être prises en compte lors de la dénomination d'une classe.

Une définition de classe peut inclure les éléments suivants -

• Fields- Un champ est une variable déclarée dans une classe. Les champs représentent les données relatives aux objets

• Constructors - Responsable de l'allocation de mémoire pour les objets de la classe

• Functions- Les fonctions représentent les actions qu'un objet peut entreprendre. Ils sont également parfois appelés méthodes

Ces composants réunis sont appelés les membres de données de la classe.

Considérez une classe Person en tapuscrit.

class Person {
}

Lors de la compilation, il générera le code JavaScript suivant.

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

Exemple: déclarer une classe

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

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

L'exemple déclare une classe Car. La classe a un champ nommé moteur. levarLe mot clé n'est pas utilisé lors de la déclaration d'un champ. L'exemple ci-dessus déclare un constructeur pour la classe.

Un constructeur est une fonction spéciale de la classe qui est responsable de l'initialisation des variables de la classe. TypeScript définit un constructeur à l'aide du mot-clé constructor. Un constructeur est une fonction et peut donc être paramétré.

le thismot-clé fait référence à l'instance actuelle de la classe. Ici, le nom du paramètre et le nom du champ de la classe sont identiques. Par conséquent, pour éviter toute ambiguïté, le champ de la classe est précédé du préfixethis mot-clé.

disp () est une simple définition de fonction. Notez que le mot-clé function n'est pas utilisé ici.

Lors de la compilation, il générera le code JavaScript suivant.

//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;
}());

Créer des objets Instance

Pour créer une instance de la classe, utilisez le newmot-clé suivi du nom de la classe. La syntaxe pour le même est donnée ci-dessous -

Syntaxe

var object_name = new class_name([ arguments ])

• le new Le mot clé est responsable de l'instanciation.

• Le côté droit de l'expression appelle le constructeur. Le constructeur doit recevoir des valeurs s'il est paramétré.

Exemple: instancier une classe

var obj = new Car("Engine 1")

Accès aux attributs et fonctions

Les attributs et fonctions d'une classe sont accessibles via l'objet. Utilisez le ' . 'notation par points (appelée point) pour accéder aux données membres d'une classe.

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

Exemple: les assembler

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()

Lors de la compilation, il générera le code JavaScript suivant.

//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();

La sortie du code ci-dessus est la suivante -

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

Héritage de classe

TypeScript prend en charge le concept d'héritage. L'héritage est la capacité d'un programme à créer de nouvelles classes à partir d'une classe existante. La classe qui est étendue pour créer des classes plus récentes est appelée la classe parent / super classe. Les classes nouvellement créées sont appelées les classes enfants / sous.

Une classe hérite d'une autre classe à l'aide du mot-clé 'extend'. Les classes enfants héritent de toutes les propriétés et méthodes à l'exception des membres privés et des constructeurs de la classe parent.

Syntaxe

class child_class_name extends parent_class_name

Cependant, TypeScript ne prend pas en charge l'héritage multiple.

Exemple: héritage de classe

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()

Lors de la compilation, il générera le code JavaScript suivant.

//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();

La sortie du code ci-dessus est la suivante -

Area of the Circle: 223

L'exemple ci-dessus déclare une classe Shape. La classe est étendue par la classe Circle. Puisqu'il existe une relation d'héritage entre les classes, la classe enfant, c'est-à-dire la classe Car, obtient un accès implicite à son attribut de classe parent, c'est-à-dire area.

L'héritage peut être classé comme -

• Single - Chaque classe peut au plus s'étendre d'une classe parent

• Multiple- Une classe peut hériter de plusieurs classes. TypeScript ne prend pas en charge l'héritage multiple.

• Multi-level - L'exemple suivant montre le fonctionnement de l'héritage à plusieurs niveaux.

Exemple

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)

La classe Leaf dérive les attributs des classes Root et Child en vertu de l'héritage à plusieurs niveaux.

Lors de la compilation, il générera le code JavaScript suivant.

//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);

Sa sortie est la suivante -

Production

hello

TypeScript: héritage de classe et remplacement de méthode

Le remplacement de méthode est un mécanisme par lequel la classe enfant redéfinit la méthode de la superclasse. L'exemple suivant illustre la même chose -

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()

Le mot clé super est utilisé pour faire référence au parent immédiat d'une classe. Le mot-clé peut être utilisé pour faire référence à la version de super classe d'une variable, d'une propriété ou d'une méthode. La ligne 13 appelle la version super classe de la fonction doWork ().

Lors de la compilation, il générera le code JavaScript suivant.

//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();

La sortie du code ci-dessus est la suivante -

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

Le mot-clé statique

Le mot-clé static peut être appliqué aux données membres d'une classe. Une variable statique conserve ses valeurs jusqu'à la fin de l'exécution du programme. Les membres statiques sont référencés par le nom de la classe.

Exemple

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

Lors de la compilation, il générera le code JavaScript suivant.

//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

La sortie du code ci-dessus est la suivante -

The value of num is 12

L'opérateur instanceof

le instanceof L'opérateur renvoie true si l'objet appartient au type spécifié.

Exemple

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

Lors de la compilation, il générera le code JavaScript suivant.

//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);

La sortie du code ci-dessus est la suivante -

obj is an instance of Person True

Masquage des données

Une classe peut contrôler la visibilité de ses données membres pour les membres d'autres classes. Cette capacité est appelée masquage ou encapsulation de données.

L'Orientation Objet utilise le concept de modificateurs d'accès ou de spécificateurs d'accès pour implémenter le concept d'encapsulation. Les spécificateurs / modificateurs d'accès définissent la visibilité des membres de données d'une classe en dehors de sa classe de définition.

Les modificateurs d'accès pris en charge par TypeScript sont -

S.No.	Spécificateur d'accès et description
1.	public Un membre de données publiques a une accessibilité universelle. Les membres de données d'une classe sont publics par défaut.
2.	private Les membres de données privées sont accessibles uniquement dans la classe qui définit ces membres. Si un membre de classe externe tente d'accéder à un membre privé, le compilateur renvoie une erreur.
3.	protected Un membre de données protégé est accessible par les membres de la même classe que celle du premier et également par les membres des classes enfants.

Exemple

Prenons maintenant un exemple pour voir comment fonctionne le masquage des données -

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

La classe a deux attributs de chaîne, str1 et str2, qui sont respectivement des membres publics et privés. La classe est instanciée. L'exemple renvoie une erreur de compilation, car l'attribut privé str2 est accessible en dehors de la classe qui le déclare.

Classes et interfaces

Les classes peuvent également implémenter des interfaces.

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 )

La classe AgriLoan implémente l'interface Loan. Par conséquent, il est désormais obligatoire pour la classe d'inclure la propriétéinterest en tant que membre.

Lors de la compilation, il générera le code JavaScript suivant.

//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);

La sortie du code ci-dessus est la suivante -

Interest is : 10 Rebate is : 1