TypeScript 接口
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實(shí)現(xiàn)，然后第三方就可以通過這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法。
TypeScript 接口定義如下：
interface interface_name { }
實(shí)例
以下實(shí)例中，我們定義了一個(gè)接口 IPerson，接著定義了一個(gè)變量 customer，它的類型是 IPerson。
customer 實(shí)現(xiàn)了接口 IPerson 的屬性和方法。
TypeScript
interface IPerson {
? ? firstName:string,
? ? lastName:string,
? ? sayHi: ()=>string }
var customer:IPerson = {
? ? firstName:"Tom",
? ? lastName:"Hanks",
? ? sayHi: ():string =>{return "Hi there"} }
console.log("Customer 對(duì)象 ") 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? 對(duì)象 ") console.log(employee.firstName) console.log(employee.lastName)
需要注意接口不能轉(zhuǎn)換為 JavaScript。 它只是 TypeScript 的一部分。
編譯以上代碼，得到以下 JavaScript 代碼：
JavaScript
var customer = {? ? firstName: "Tom",
? ? lastName: "Hanks",
? ? sayHi: function () { return "Hi there"; }};console.log("Customer 對(duì)象 ");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? 對(duì)象 ");console.log(employee.firstName);console.log(employee.lastName);
輸出結(jié)果為：
Customer 對(duì)象TomHanksHi thereEmployee? 對(duì)象JimBlakes
聯(lián)合類型和接口
以下實(shí)例演示了如何在接口中使用聯(lián)合類型：
TypeScript
interface RunOptions {
? ? program:string;
? ? commandline:string[]|string|(()=>string); }
// commandline 是字符串var options:RunOptions = {program:"test1",commandline:"Hello"}; console.log(options.commandline)?
// commandline 是字符串?dāng)?shù)組options = {program:"test1",commandline:["Hello","World"]}; console.log(options.commandline[0]); console.log(options.commandline[1]);?
// commandline 是一個(gè)函數(shù)表達(dá)式options = {program:"test1",commandline:()=>{return "**Hello World**";}};
var fn:any = options.commandline; console.log(fn());
編譯以上代碼，得到以下 JavaScript 代碼：
JavaScript
// commandline 是字符串var options = { program: "test1", commandline: "Hello" };console.log(options.commandline);// commandline 是字符串?dāng)?shù)組options = { program: "test1", commandline: ["Hello", "World"] };console.log(options.commandline[0]);console.log(options.commandline[1]);// commandline 是一個(gè)函數(shù)表達(dá)式options = { program: "test1", commandline: function () { return "**Hello World**"; } };var fn = options.commandline;console.log(fn());
輸出結(jié)果為：
HelloHelloWorld**Hello World**
接口和數(shù)組
接口中我們可以將數(shù)組的索引值和元素設(shè)置為不同類型，索引值可以是數(shù)字或字符串。
TypeScript
interface namelist {
? [index:number]:string }
var list2:namelist = ["John",1,"Bran"] / 錯(cuò)誤元素 1 不是 string 類型interface ages {
? [index:string]:number }
var agelist:ages; agelist["John"] = 15? // 正確 agelist[2] = "nine"? // 錯(cuò)誤
接口繼承
接口繼承就是說接口可以通過其他接口來擴(kuò)展自己。
Typescript 允許接口繼承多個(gè)接口。
繼承使用關(guān)鍵字?extends。
單接口繼承語法格式：
Child_interface_name extends super_interface_name
多接口繼承語法格式：
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name
繼承的各個(gè)接口使用逗號(hào)?,?分隔。
單繼承實(shí)例
TypeScript
interface Person {
? age:number }
interface Musician extends Person {
? instrument:string }
var drummer = <Musician>{}; drummer.age = 27 drummer.instrument = "Drums" console.log("年齡:? "+drummer.age)console.log("喜歡的樂器:? "+drummer.instrument)
編譯以上代碼，得到以下 JavaScript 代碼：
JavaScript
var drummer = {};drummer.age = 27;drummer.instrument = "Drums";console.log("年齡:? " + drummer.age);console.log("喜歡的樂器:? " + drummer.instrument);
輸出結(jié)果為：
年齡:? 27喜歡的樂器:? Drums
多繼承實(shí)例
TypeScript
interface IParent1 {
? ? v1:number }
interface IParent2 {
? ? v2:number }
interface Child extends IParent1, IParent2 { } var Iobj:Child = { v1:12, v2:23} console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)
編譯以上代碼，得到以下 JavaScript 代碼：
JavaScript
var Iobj = { v1: 12, v2: 23 };console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);
輸出結(jié)果為：
value 1: 12 value 2: 23
