TypeScript 接口

接口是實(shí)體應(yīng)遵循的語(yǔ)法約定。換句話(huà)說(shuō)，接口定義了任何實(shí)體必須遵守的語(yǔ)法。

接口定義屬性，方法和事件，它們是接口的成員。接口僅包含成員的聲明。定義成員是派生類(lèi)的責(zé)任。它往往有助于提供派生類(lèi)將遵循的一個(gè)標(biāo)準(zhǔn)結(jié)構(gòu)。

讓我們考慮一個(gè)對(duì)象：

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

如果我們考慮對(duì)象的簽名，它可能是：

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

要在對(duì)象之間重用簽名，我們可以將其定義為接口。

聲明接口

interface關(guān)鍵字用來(lái)聲明接口。下面是聲明接口的語(yǔ)法：

語(yǔ)法

interface interface_name { 
}

例如：接口和對(duì)象

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)

該示例定義一個(gè)接口?？蛻?hù)對(duì)象的類(lèi)型為IPerson。因此，它現(xiàn)在將綁定到對(duì)象上，以定義接口指定的所有屬性。

具有以下簽名的另一個(gè)對(duì)象仍被視為IPerson，因?yàn)樵搶?duì)象由其大小或簽名處理。

在編譯時(shí)，它會(huì)生成以下JavaScript代碼。

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

上述例子代碼的輸出如下：

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

接口不能轉(zhuǎn)換為JavaScript。它只是TypeScript的一部分。如果您看到TS Playground工具的屏幕截圖，則在聲明與類(lèi)不同的接口時(shí)，不會(huì)發(fā)出任何java腳本。因此，接口對(duì)運(yùn)行時(shí)JavaScript的影響為零。

聯(lián)合類(lèi)型和接口

下面的例子顯示使用聯(lián)合類(lèi)型和接口：

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

在編譯時(shí)，它會(huì)生成以下JavaScript代碼。

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

它的輸出如下：

Hello 
Hello 
World 
**Hello World**

接口和數(shù)組

接口可以定義數(shù)組使用的密鑰類(lèi)型以及它包含的條目類(lèi)型。索引可以是string類(lèi)型或number類(lèi)型。

示例

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

接口和繼承

接口可以通過(guò)其它接口進(jìn)行擴(kuò)展。換句話(huà)說(shuō)，接口可以從其他接口繼承。TypeScript允許接口從多個(gè)接口繼承。

使用extends關(guān)鍵字來(lái)實(shí)現(xiàn)接口之間的繼承。

語(yǔ)法：?jiǎn)谓涌诶^承

Child_interface_name extends super_interface_name

語(yǔ)法：多接口繼承

Child_interface_name extends super_interface1_name, 
super_interface2_name,…,super_interfaceN_name

示例：簡(jiǎ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)

在編譯時(shí)，它會(huì)生成以下JavaScript代碼。

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

它的輸出如下：

Age: 27 
Instrument: Drums 

示例：多接口繼承

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)

對(duì)象Iobj的類(lèi)型為接口leaf?；诶^承的接口leaf現(xiàn)在分別有兩個(gè)屬性v和v2。因此，對(duì)象Iobj現(xiàn)在必須包含這些屬性。

在編譯時(shí)，它會(huì)生成以下JavaScript代碼。

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

上面的代碼的輸出如下：

value 1: 12   value 2: 23