TypeScript - Giao diện

Giao diện là một hợp đồng cú pháp mà một thực thể phải tuân theo. Nói cách khác, một giao diện xác định cú pháp mà bất kỳ thực thể nào cũng phải tuân theo.

Giao diện xác định các thuộc tính, phương thức và sự kiện, là các thành viên của giao diện. Giao diện chỉ chứa phần khai báo của các thành viên. Lớp dẫn xuất có trách nhiệm xác định các thành viên. Nó thường giúp cung cấp một cấu trúc chuẩn mà các lớp dẫn xuất sẽ tuân theo.

Hãy xem xét một đối tượng -

var person = { 
   FirstName:"Tom", 
   LastName:"Hanks", 
   sayHi: ()=>{ return "Hi"} 
};

Nếu chúng ta xem xét chữ ký của đối tượng, nó có thể là -

{ 
   FirstName:string, 
   LastName:string, 
   sayHi()=>string 
}

Để sử dụng lại chữ ký trên các đối tượng, chúng ta có thể định nghĩa nó như một giao diện.

Khai báo giao diện

Từ khóa interface được sử dụng để khai báo một giao diện. Đây là cú pháp để khai báo một giao diện -

Cú pháp

interface interface_name { 
}

Ví dụ: Giao diện và Đối tượng

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var customer:IPerson = { 
   firstName:"Tom",
   lastName:"Hanks", 
   sayHi: ():string =>{return "Hi there"} 
} 

console.log("Customer Object ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  
console.log("Employee  Object ") 
console.log(employee.firstName);
console.log(employee.lastName);

Ví dụ xác định một giao diện. Đối tượng khách hàng thuộc loại IPerson. Do đó, bây giờ nó sẽ ràng buộc đối tượng để xác định tất cả các thuộc tính như được chỉ định bởi giao diện.

Một đối tượng khác có chữ ký sau, vẫn được coi là IPerson vì đối tượng đó được xử lý theo kích thước hoặc chữ ký của nó.

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

//Generated by typescript 1.8.10
var customer = { firstName: "Tom", lastName: "Hanks",
   sayHi: function () { return "Hi there"; }
};
console.log("Customer Object ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = { firstName: "Jim", lastName: "Blakes",
   sayHi: function () { return "Hello!!!"; } };

console.log("Employee  Object ");
console.log(employee.firstName);
console.log(employee.lastName);

Đầu ra của mã ví dụ trên như sau:

Customer object 
Tom 
Hanks 
Hi there 
Employee  object 
Jim  
Blakes 
Hello!!!

Các giao diện không được chuyển đổi sang JavaScript. Nó chỉ là một phần của TypeScript. Nếu bạn thấy ảnh chụp màn hình của công cụ TS Playground thì không có tập lệnh java nào được phát ra khi bạn khai báo một giao diện không giống một lớp. Vì vậy, các giao diện không có tác động JavaScript thời gian chạy.

Loại Liên minh và Giao diện

Ví dụ sau đây cho thấy việc sử dụng Loại Liên minh và Giao diện -

interface RunOptions { 
   program:string; 
   commandline:string[]|string|(()=>string); 
} 

//commandline as string 
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  

//commandline as a string array 
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  

//commandline as a function expression 
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 

var fn:any = options.commandline; 
console.log(fn());

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

//Generated by typescript 1.8.10
//commandline as string
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);

//commandline as a string array
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);

//commandline as a function expression
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

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

Hello 
Hello 
World 
**Hello World**

Giao diện và Mảng

Giao diện có thể xác định cả loại khóa mà một mảng sử dụng và loại mục nhập mà mảng chứa. Chỉ mục có thể là kiểu chuỗi hoặc kiểu số.

Thí dụ

interface namelist { 
   [index:number]:string 
} 

var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string  
interface ages { 
   [index:string]:number 
} 

var agelist:ages; 
agelist["John"] = 15   // Ok 
agelist[2] = "nine"   // Error

Giao diện và Kế thừa

Một giao diện có thể được mở rộng bởi các giao diện khác. Nói cách khác, một giao diện có thể kế thừa từ giao diện khác. Typecript cho phép một giao diện kế thừa từ nhiều giao diện.

Sử dụng từ khóa expand để triển khai kế thừa giữa các giao diện.

Cú pháp: Kế thừa giao diện đơn

Child_interface_name extends super_interface_name

Cú pháp: Kế thừa nhiều giao diện

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

Ví dụ: Kế thừa giao diện đơn giản

interface Person { 
   age:number 
} 

interface Musician extends Person { 
   instrument:string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("Age:  "+drummer.age) console.log("Instrument:  "+drummer.instrument)

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

//Generated by typescript 1.8.10
var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("Age:  " + drummer.age);
console.log("Instrument:  " + drummer.instrument);

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

Age: 27 
Instrument: Drums

Ví dụ: Kế thừa nhiều giao diện

interface IParent1 { 
   v1:number 
} 

interface IParent2 { 
   v2:number 
} 

interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+this.v1+" value 2: "+this.v2)

Đối tượng Iobj thuộc loại lá giao diện. Lá giao diện do kế thừa hiện có hai thuộc tính tương ứng là v1 và v2. Do đó, đối tượng Iobj bây giờ phải chứa các thuộc tính này.

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

//Generated by typescript 1.8.10
var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + this.v1 + " value 2: " + this.v2);

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

value 1: 12   value 2: 23