typescript 接口——迹忆客-ag捕鱼王app官网

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

typescript 接口定义如下：

interface interface_name { 
}

实例

以下实例中，我们定义了一个接口 iperson，接着定义了一个变量 customer，它的类型是 iperson。

customer 实现了接口 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 对象 ") 
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  对象 ") 
console.log(employee.firstname) 
console.log(employee.lastname)

需要注意接口不能转换为 javascript。 它只是 typescript 的一部分。

编译以上代码，得到以下 javascript 代码：

javascript

var customer = {
    firstname: "tom",
    lastname: "hanks",
    sayhi: function () { return "hi there"; }
};
console.log("customer 对象 ");
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  对象 ");
console.log(employee.firstname);
console.log(employee.lastname);

输出结果为：

customer 对象
tom
hanks
hi there
employee  对象
jim
blakes

联合类型和接口

以下实例演示了如何在接口中使用联合类型：

typescript

interface runoptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:runoptions = {program:"test1",commandline:"hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["hello","world"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
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 是字符串数组
options = { program: "test1", commandline: ["hello", "world"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);
// commandline 是一个函数表达式
options = { program: "test1", commandline: function () { return "**hello world**"; } };
var fn = options.commandline;
console.log(fn());

输出结果为：

hello
hello
world
**hello world**

接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

typescript

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["john",1,"bran"] // 错误元素 1 不是 string 类型
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["john"] = 15   // 正确 
agelist[2] = "nine"   // 错误

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

typescript 允许接口继承多个接口。

继承使用关键字 extends。

单接口继承语法格式：

child_interface_name extends super_interface_name

多接口继承语法格式：

child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfacen_name

继承的各个接口使用逗号 , 分隔。

单继承实例

typescript

interface person { 
   age:number 
} 
 
interface musician extends person { 
   instrument:string 
} 
 
var drummer = {}; 
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);

输出结果为：

年龄:  27
喜欢的乐器:  drums

多继承实例

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

输出结果为：

value 1: 12 value 2: 23