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