TypeScript - Classi

TypeScript è JavaScript orientato agli oggetti. TypeScript supporta funzionalità di programmazione orientata agli oggetti come classi, interfacce, ecc. Una classe in termini di OOP è un modello per la creazione di oggetti. Una classe incapsula i dati per l'oggetto. Typescript fornisce un supporto integrato per questo concetto chiamato classe. JavaScript ES5 o versioni precedenti non supportavano le classi. Typescript ottiene questa funzione da ES6.

Creazione di classi

Usa la parola chiave class per dichiarare una classe in TypeScript. La sintassi per lo stesso è data di seguito:

Sintassi

class class_name { 
   //class scope 
}

La parola chiave della classe è seguita dal nome della classe. Le regole per gli identificatori devono essere considerate durante la denominazione di una classe.

Una definizione di classe può includere quanto segue:

• Fields- Un campo è una qualsiasi variabile dichiarata in una classe. I campi rappresentano i dati relativi agli oggetti

• Constructors - Responsabile dell'allocazione della memoria per gli oggetti della classe

• Functions- Le funzioni rappresentano le azioni che un oggetto può intraprendere. A volte sono anche indicati come metodi

Questi componenti messi insieme sono definiti come i membri di dati della classe.

Considera una persona di classe in dattiloscritto.

class Person {
}

Durante la compilazione, genererà il seguente codice JavaScript.

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

Esempio: dichiarazione di una classe

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

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

L'esempio dichiara una classe Car. La classe ha un campo denominato engine. Ilvarla parola chiave non viene utilizzata durante la dichiarazione di un campo. L'esempio sopra dichiara un costruttore per la classe.

Un costruttore è una funzione speciale della classe responsabile dell'inizializzazione delle variabili della classe. TypeScript definisce un costruttore utilizzando la parola chiave constructor. Un costruttore è una funzione e quindi può essere parametrizzato.

Il thisparola chiave si riferisce all'istanza corrente della classe. Qui, il nome del parametro e il nome del campo della classe coincidono. Quindi, per evitare ambiguità, il campo della classe è preceduto dathis parola chiave.

disp () è una semplice definizione di funzione. Notare che la parola chiave function non viene utilizzata qui.

Durante la compilazione, genererà il seguente codice 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;
}());

Creazione di oggetti istanza

Per creare un'istanza della classe, usa il newparola chiave seguita dal nome della classe. La sintassi per lo stesso è data di seguito:

Sintassi

var object_name = new class_name([ arguments ])

• Il new la parola chiave è responsabile dell'istanza.

• Il lato destro dell'espressione richiama il costruttore. Al costruttore dovrebbero essere passati valori se è parametrizzato.

Esempio: creazione di un'istanza di una classe

var obj = new Car("Engine 1")

Accesso ad attributi e funzioni

È possibile accedere agli attributi e alle funzioni di una classe tramite l'oggetto. Utilizzare il ' . notazione punto (chiamata punto) per accedere ai membri di dati di una classe.

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

Esempio: metterli insieme

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

Durante la compilazione, genererà il seguente codice 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();

L'output del codice sopra è il seguente:

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

Eredità di classe

TypeScript supporta il concetto di ereditarietà. L'ereditarietà è la capacità di un programma di creare nuove classi da una classe esistente. La classe che viene estesa per creare classi più recenti è chiamata classe genitore / super classe. Le classi appena create sono chiamate classi figlio / sotto.

Una classe eredita da un'altra classe utilizzando la parola chiave "extends". Le classi figlie ereditano tutte le proprietà e i metodi tranne i membri privati ​​ei costruttori dalla classe genitore.

Sintassi

class child_class_name extends parent_class_name

Tuttavia, TypeScript non supporta l'ereditarietà multipla.

Esempio: ereditarietà della 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()

Durante la compilazione, genererà il seguente codice 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();

L'output del codice sopra è il seguente:

Area of the Circle: 223

L'esempio sopra dichiara una classe Shape. La classe è estesa dalla classe Circle. Poiché esiste una relazione di ereditarietà tra le classi, la classe figlia, ovvero la classe Car, ottiene un accesso implicito al suo attributo della classe genitore, ovvero area.

L'ereditarietà può essere classificata come:

• Single - Ogni classe può estendersi al massimo da una classe genitore

• Multiple- Una classe può ereditare da più classi. TypeScript non supporta l'ereditarietà multipla.

• Multi-level - L'esempio seguente mostra come funziona l'ereditarietà multilivello.

Esempio

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 deriva gli attributi dalle classi Root e Child in virtù dell'ereditarietà multi-livello.

Durante la compilazione, genererà il seguente codice 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);

Il suo output è il seguente:

Produzione

hello

TypeScript ─ Ereditarietà della classe e sostituzione del metodo

L'override del metodo è un meccanismo mediante il quale la classe figlia ridefinisce il metodo della superclasse. L'esempio seguente illustra lo stesso:

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

La parola chiave super viene utilizzata per fare riferimento al genitore immediato di una classe. La parola chiave può essere utilizzata per fare riferimento alla versione super class di una variabile, proprietà o metodo. La riga 13 invoca la versione super class della funzione doWork ().

Durante la compilazione, genererà il seguente codice 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();

L'output del codice sopra è il seguente:

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

La parola chiave statica

La parola chiave statica può essere applicata ai membri di dati di una classe. Una variabile statica mantiene i propri valori fino al termine dell'esecuzione del programma. I membri statici sono referenziati dal nome della classe.

Esempio

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

Durante la compilazione, genererà il seguente codice 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

L'output del codice sopra è il seguente:

The value of num is 12

L'operatore instanceof

Il instanceof L'operatore restituisce true se l'oggetto appartiene al tipo specificato.

Esempio

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

Durante la compilazione, genererà il seguente codice 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);

L'output del codice sopra è il seguente:

obj is an instance of Person True

Dati nascosti

Una classe può controllare la visibilità dei suoi membri dati sui membri di altre classi. Questa funzionalità è definita come nascondere o incapsulamento dei dati.

Object Orientation utilizza il concetto di modificatori di accesso o specificatori di accesso per implementare il concetto di incapsulamento. Gli specificatori / modificatori di accesso definiscono la visibilità dei membri dati di una classe al di fuori della sua classe di definizione.

I modificatori di accesso supportati da TypeScript sono:

S.No.	Identificatore di accesso e descrizione
1.	public Un membro dei dati pubblici ha l'accessibilità universale. I membri dei dati in una classe sono pubblici per impostazione predefinita.
2.	private I membri dei dati privati ​​sono accessibili solo all'interno della classe che definisce questi membri. Se un membro della classe esterno tenta di accedere a un membro privato, il compilatore genera un errore.
3.	protected Un membro di dati protetto è accessibile dai membri all'interno della stessa classe del primo e anche dai membri delle classi figlie.

Esempio

Facciamo ora un esempio per vedere come funziona l'occultamento dei dati:

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 ha due attributi di stringa, str1 e str2, che sono rispettivamente membri pubblici e privati. La classe viene istanziata. L'esempio restituisce un errore in fase di compilazione, poiché si accede all'attributo private str2 all'esterno della classe che lo dichiara.

Classi e interfacce

Le classi possono anche implementare interfacce.

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 implementa l'interfaccia Loan. Quindi, ora è vincolante per la classe includere la proprietàinterest come suo membro.

Durante la compilazione, genererà il seguente codice 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);

L'output del codice sopra è il seguente:

Interest is : 10 Rebate is : 1