TypeScript - Các lớp

TypeScript là JavaScript hướng đối tượng. TypeScript hỗ trợ các tính năng lập trình hướng đối tượng như lớp, giao diện, v.v. Một lớp về mặt OOP là bản thiết kế để tạo các đối tượng. Một lớp đóng gói dữ liệu cho đối tượng. Typecript cung cấp hỗ trợ được xây dựng cho khái niệm này được gọi là lớp. JavaScript ES5 trở về trước không hỗ trợ các lớp. Typecript lấy tính năng này từ ES6.

Tạo lớp học

Sử dụng từ khóa class để khai báo một lớp trong TypeScript. Cú pháp tương tự được đưa ra bên dưới:

Cú pháp

class class_name { 
   //class scope 
}

Từ khóa lớp được theo sau bởi tên lớp. Các quy tắc cho định danh phải được xem xét trong khi đặt tên một lớp.

Một định nghĩa lớp có thể bao gồm những điều sau:

  • Fields- Trường là bất kỳ biến nào được khai báo trong một lớp. Các trường đại diện cho dữ liệu liên quan đến các đối tượng

  • Constructors - Chịu trách nhiệm cấp phát bộ nhớ cho các đối tượng của lớp

  • Functions- Các hàm thể hiện các hành động mà một đối tượng có thể thực hiện. Đôi khi chúng cũng được gọi là phương pháp

Các thành phần này kết hợp với nhau được gọi là thành viên dữ liệu của lớp.

Hãy xem xét một lớp Person trong bảng chữ.

class Person {
}

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Ví dụ: Khai báo một lớp

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

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

Ví dụ khai báo một lớp Car. Lớp có một trường có tên là engine. Cácvartừ khóa không được sử dụng trong khi khai báo một trường. Ví dụ trên khai báo một phương thức khởi tạo cho lớp.

Hàm tạo là một hàm đặc biệt của lớp có nhiệm vụ khởi tạo các biến của lớp. TypeScript định nghĩa một phương thức khởi tạo bằng cách sử dụng từ khóa hàm tạo. Hàm tạo là một hàm và do đó có thể được tham số hóa.

Các thistừ khóa đề cập đến phiên bản hiện tại của lớp. Ở đây, tên tham số và tên trường của lớp giống nhau. Do đó, để tránh sự mơ hồ, trường của lớp được bắt đầu bằngthis từ khóa.

disp () là một định nghĩa hàm đơn giản. Lưu ý rằng từ khóa chức năng không được sử dụng ở đây.

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Tạo đối tượng Instance

Để tạo một phiên bản của lớp, hãy sử dụng newtừ khóa theo sau là tên lớp. Cú pháp tương tự được đưa ra bên dưới:

Cú pháp

var object_name = new class_name([ arguments ])
  • Các new từ khóa chịu trách nhiệm cho việc khởi tạo.

  • Phía bên phải của biểu thức gọi hàm tạo. Hàm tạo phải được truyền các giá trị nếu nó được tham số hóa.

Ví dụ: Khởi tạo một lớp

var obj = new Car("Engine 1")

Truy cập thuộc tính và chức năng

Các thuộc tính và chức năng của một lớp có thể được truy cập thông qua đối tượng. Sử dụng ' . ký hiệu dấu chấm (được gọi là dấu chấm) để truy cập các thành viên dữ liệu của một lớp.

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

Ví dụ: Đặt chúng lại với nhau

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

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Đầu ra của đoạn mã trên như sau:

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

Kế thừa giai cấp

TypeScript hỗ trợ khái niệm Kế thừa. Tính kế thừa là khả năng một chương trình tạo ra các lớp mới từ một lớp hiện có. Lớp được mở rộng để tạo các lớp mới hơn được gọi là lớp cha / siêu lớp. Các lớp mới tạo được gọi là lớp con / lớp con.

Một lớp kế thừa từ một lớp khác bằng cách sử dụng từ khóa 'expand'. Các lớp con kế thừa tất cả các thuộc tính và phương thức ngoại trừ các thành viên private và các hàm tạo từ lớp cha.

Cú pháp

class child_class_name extends parent_class_name

Tuy nhiên, TypeScript không hỗ trợ đa kế thừa.

Ví dụ: Kế thừa lớp

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

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Đầu ra của đoạn mã trên như sau:

Area of the Circle: 223

Ví dụ trên khai báo một Hình dạng lớp. Lớp được mở rộng bởi lớp Circle. Vì có mối quan hệ kế thừa giữa các lớp, nên lớp con tức là lớp Xe có quyền truy cập ngầm vào thuộc tính lớp cha của nó tức là vùng.

Thừa kế có thể được phân loại là -

  • Single - Mỗi lớp có thể mở rộng nhiều nhất từ ​​một lớp cha

  • Multiple- Một lớp có thể kế thừa từ nhiều lớp. TypeScript không hỗ trợ đa kế thừa.

  • Multi-level - Ví dụ sau đây cho thấy cách hoạt động của kế thừa đa cấp.

Thí dụ

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)

Lớp Lá lấy các thuộc tính từ các lớp Gốc và Con nhờ kế thừa đa cấp.

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Đầu ra của nó như sau:

Đầu ra

hello

TypeScript ─ Kế thừa lớp và Ghi đè phương thức

Ghi đè phương thức là một cơ chế mà lớp con định nghĩa lại phương thức của lớp cha. Ví dụ sau minh họa tương tự:

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

Từ khóa super được sử dụng để chỉ lớp cha trực tiếp của một lớp. Từ khóa có thể được sử dụng để tham chiếu đến phiên bản siêu lớp của một biến, thuộc tính hoặc phương thức. Dòng 13 gọi phiên bản siêu lớp của hàm doWork ().

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Đầu ra của đoạn mã trên như sau:

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

Từ khóa tĩnh

Từ khóa static có thể được áp dụng cho các thành viên dữ liệu của một lớp. Một biến tĩnh vẫn giữ các giá trị của nó cho đến khi chương trình kết thúc quá trình thực thi. Các thành viên tĩnh được tham chiếu bởi tên lớp.

Thí dụ

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

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Đầu ra của đoạn mã trên như sau:

The value of num is 12

Toán tử instanceof

Các instanceof toán tử trả về true nếu đối tượng thuộc kiểu được chỉ định.

Thí dụ

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

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Đầu ra của đoạn mã trên như sau:

obj is an instance of Person True

Ẩn dữ liệu

Một lớp có thể kiểm soát khả năng hiển thị của các thành viên dữ liệu của nó đối với các thành viên của các lớp khác. Khả năng này được gọi là Ẩn dữ liệu hoặc Đóng gói.

Định hướng đối tượng sử dụng khái niệm về bộ điều chỉnh truy cập hoặc bộ định hướng truy cập để thực hiện khái niệm Đóng gói. Các chỉ định / sửa đổi truy cập xác định khả năng hiển thị của các thành viên dữ liệu của một lớp bên ngoài lớp xác định của nó.

Các công cụ sửa đổi quyền truy cập được hỗ trợ bởi TypeScript là:

Không. Thông số và mô tả truy cập
1.

public

Một thành viên dữ liệu công khai có khả năng truy cập phổ biến. Các thành viên dữ liệu trong một lớp là công khai theo mặc định.

2.

private

Các thành viên dữ liệu riêng tư chỉ có thể truy cập được trong lớp xác định các thành viên này. Nếu một thành viên lớp bên ngoài cố gắng truy cập vào một thành viên riêng tư, trình biên dịch sẽ thông báo lỗi.

3.

protected

Một thành viên dữ liệu được bảo vệ có thể được truy cập bởi các thành viên trong cùng lớp với thành viên cũ và cũng bởi các thành viên của các lớp con.

Thí dụ

Bây giờ chúng ta hãy lấy một ví dụ để xem cách ẩn dữ liệu hoạt động -

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

Lớp có hai thuộc tính chuỗi, str1 và str2, lần lượt là các thành viên công cộng và riêng tư. Lớp được khởi tạo. Ví dụ trả về một lỗi thời gian biên dịch, vì thuộc tính private str2 được truy cập bên ngoài lớp khai báo nó.

Lớp học và Giao diện

Các lớp cũng có thể triển khai các giao diện.

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 )

Lớp AgriLoan thực hiện giao diện Loan. Do đó, bây giờ nó ràng buộc đối với lớp để bao gồm thuộc tínhinterest với tư cách là thành viên của nó.

Khi biên dịch, nó sẽ tạo mã JavaScript sau.

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

Đầu ra của đoạn mã trên như sau:

Interest is : 10 Rebate is : 1