TypeScript - คลาส

TypeScript เป็น JavaScript เชิงวัตถุ TypeScript สนับสนุนคุณสมบัติการเขียนโปรแกรมเชิงวัตถุเช่นคลาสอินเทอร์เฟซ ฯลฯ คลาสในแง่ของ OOP คือพิมพ์เขียวสำหรับสร้างวัตถุ คลาสห่อหุ้มข้อมูลสำหรับออบเจ็กต์ typescript ให้การสนับสนุนในตัวสำหรับแนวคิดนี้ที่เรียกว่าคลาส JavaScript ES5 หรือรุ่นก่อนหน้าไม่รองรับคลาส typescript ได้รับคุณสมบัตินี้จาก ES6

การสร้างคลาส

ใช้คีย์เวิร์ดคลาสเพื่อประกาศคลาสใน TypeScript ไวยากรณ์สำหรับสิ่งเดียวกันได้รับด้านล่าง -

ไวยากรณ์

class class_name { 
   //class scope 
}

คีย์เวิร์ดของคลาสตามด้วยชื่อคลาส ต้องพิจารณากฎสำหรับตัวระบุขณะตั้งชื่อคลาส

คำจำกัดความของคลาสอาจมีดังต่อไปนี้ -

  • Fields- ฟิลด์คือตัวแปรใด ๆ ที่ประกาศในคลาส เขตข้อมูลแสดงถึงข้อมูลที่เกี่ยวข้องกับวัตถุ

  • Constructors - รับผิดชอบในการจัดสรรหน่วยความจำสำหรับออบเจ็กต์ของคลาส

  • Functions- ฟังก์ชั่นแสดงถึงการกระทำที่วัตถุสามารถทำได้ ในบางครั้งเรียกว่าวิธีการ

ส่วนประกอบเหล่านี้ถูกเรียกว่าเป็นสมาชิกข้อมูลของคลาส

พิจารณาบุคคลในชั้นเรียนใน typescript

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

ตัวอย่างประกาศรถคลาส คลาสนี้มีฟิลด์ชื่อเครื่องยนต์ varไม่ได้ใช้คำหลักในขณะที่ประกาศเขตข้อมูล ตัวอย่างด้านบนประกาศตัวสร้างสำหรับคลาส

คอนสตรัคเตอร์เป็นฟังก์ชันพิเศษของคลาสที่รับผิดชอบในการเตรียมใช้งานตัวแปรของคลาส TypeScript กำหนดคอนสตรัคเตอร์โดยใช้คีย์เวิร์ดคอนสตรัคเตอร์ ตัวสร้างเป็นฟังก์ชันดังนั้นจึงสามารถกำหนดพารามิเตอร์ได้

thisคีย์เวิร์ดหมายถึงอินสแตนซ์ปัจจุบันของคลาส ที่นี่ชื่อพารามิเตอร์และชื่อฟิลด์ของคลาสจะเหมือนกัน ดังนั้นเพื่อหลีกเลี่ยงความคลุมเครือฟิลด์ของคลาสจะขึ้นต้นด้วยthis คำสำคัญ.

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("Engine is  :   " + this.engine);
   };
   return Car;
}());

การสร้างวัตถุอินสแตนซ์

ในการสร้างอินสแตนซ์ของคลาสให้ใช้ไฟล์ newคีย์เวิร์ดตามด้วยชื่อคลาส ไวยากรณ์สำหรับสิ่งเดียวกันได้รับด้านล่าง -

ไวยากรณ์

var object_name = new class_name([ arguments ])
  • new คำหลักมีหน้าที่ในการสร้างอินสแตนซ์

  • ด้านขวามือของนิพจน์เรียกใช้ตัวสร้าง คอนสตรัคเตอร์ควรถูกส่งผ่านค่าหากมีการกำหนดพารามิเตอร์

ตัวอย่าง: การสร้างอินสแตนซ์คลาส

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 สนับสนุนแนวคิดของการสืบทอด การสืบทอดคือความสามารถของโปรแกรมในการสร้างคลาสใหม่จากคลาสที่มีอยู่ คลาสที่ขยายเพื่อสร้างคลาสที่ใหม่กว่าเรียกว่าคลาสพาเรนต์ / ซูเปอร์คลาส คลาสที่สร้างขึ้นใหม่เรียกว่าคลาสย่อย / คลาสย่อย

คลาสที่สืบทอดมาจากคลาสอื่นโดยใช้คีย์เวิร์ด "ขยาย" คลาสย่อยสืบทอดคุณสมบัติและวิธีการทั้งหมดยกเว้นสมาชิกส่วนตัวและตัวสร้างจากคลาสแม่

ไวยากรณ์

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

ตัวอย่างข้างต้นประกาศรูปร่างคลาส คลาสถูกขยายโดยคลาส Circle เนื่องจากมีความสัมพันธ์ทางมรดกระหว่างคลาสคลาสย่อยเช่นคลาสคาร์จึงได้รับการเข้าถึงโดยปริยายไปยังแอททริบิวต์คลาสพาเรนต์เช่นพื้นที่

การถ่ายทอดทางพันธุกรรมสามารถจำแนกได้เป็น -

  • Single - ทุกชั้นเรียนสามารถขยายจากคลาสผู้ปกครองได้มากที่สุด

  • Multiple- คลาสสามารถสืบทอดจากหลายคลาสได้ TypeScript ไม่สนับสนุนการสืบทอดหลายรายการ

  • Multi-level - ตัวอย่างต่อไปนี้แสดงให้เห็นว่าการสืบทอดหลายระดับทำงานอย่างไร

ตัวอย่าง

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 ─การสืบทอดคลาสและการแทนที่เมธอด

Method Overriding เป็นกลไกที่คลาสย่อยกำหนดเมธอดของ superclass ใหม่ ตัวอย่างต่อไปนี้แสดงให้เห็นเช่นเดียวกัน -

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

ซูเปอร์คีย์เวิร์ดใช้เพื่ออ้างถึงพาเรนต์ของคลาส คีย์เวิร์ดสามารถใช้เพื่ออ้างถึงตัวแปรคุณสมบัติหรือวิธีการในระดับซุปเปอร์คลาส บรรทัดที่ 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…

คำหลักคงที่

คำสำคัญแบบคงที่สามารถนำไปใช้กับสมาชิกข้อมูลของคลาส ตัวแปรคงที่ยังคงรักษาค่าไว้จนกว่าโปรแกรมจะดำเนินการเสร็จสิ้น สมาชิกแบบคงที่ถูกอ้างอิงโดยชื่อคลาส

ตัวอย่าง

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 ตัวดำเนินการส่งคืนจริงหากวัตถุเป็นของชนิดที่ระบุ

ตัวอย่าง

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

การซ่อนข้อมูล

คลาสสามารถควบคุมการเปิดเผยข้อมูลของสมาชิกต่อสมาชิกของคลาสอื่น ๆ ความสามารถนี้เรียกว่า Data Hiding หรือ Encapsulation

Object Orientation ใช้แนวคิดของตัวแก้ไขการเข้าถึงหรือตัวระบุการเข้าถึงเพื่อใช้แนวคิดของ Encapsulation ตัวระบุ / ตัวปรับการเข้าถึงกำหนดการมองเห็นของสมาชิกข้อมูลของคลาสที่อยู่นอกคลาสที่กำหนด

ตัวแก้ไขการเข้าถึงที่ TypeScript รองรับคือ -

ส. ตัวระบุการเข้าถึงและคำอธิบาย
1.

public

สมาชิกข้อมูลสาธารณะมีความสามารถในการเข้าถึงแบบสากล สมาชิกข้อมูลในคลาสเป็นสาธารณะโดยค่าเริ่มต้น

2.

private

สมาชิกข้อมูลส่วนตัวสามารถเข้าถึงได้เฉพาะภายในคลาสที่กำหนดสมาชิกเหล่านี้ หากสมาชิกคลาสภายนอกพยายามเข้าถึงสมาชิกส่วนตัวคอมไพลเลอร์จะแสดงข้อผิดพลาด

3.

protected

สมาชิกข้อมูลที่ได้รับการป้องกันสามารถเข้าถึงได้โดยสมาชิกในคลาสเดียวกันกับสมาชิกในคลาสย่อยในอดีตและสมาชิกของคลาสย่อยด้วย

ตัวอย่าง

ตอนนี้ให้เราเป็นตัวอย่างเพื่อดูว่าการซ่อนข้อมูลทำงานอย่างไร -

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 ดังนั้นตอนนี้จึงมีผลผูกพันกับคลาสที่จะรวมคุณสมบัติinterest ในฐานะสมาชิก

ในการคอมไพล์จะสร้างโค้ด 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);

ผลลัพธ์ของรหัสด้านบนมีดังนี้ -

Interest is : 10 Rebate is : 1