我爱编程

接口声明

2017-01-14  本文已影响0人  叶向晚77

接口:在TypeScript中,接口是用作约束作用的,在编译成JavaScript的时候,所有的接口都会被擦除掉,因为JavaScript中并没有接口这一概念。TypeScript中接口是用关键字interface进行声明;

interface LabelledValue {  //定义接口

    label: string;

}

function printLabel(labelledObj: LabelledValue) { //定义函数printLabel,其参数类型为接口类型

      document.write(labelledObj.size);

}

var myObj = {size: 10, label: "Size 10 Object"}; //定义含有接口中属性的对象

printLabel(myObj); //调用函数

在上面的例子中,printLabel函数要求传入一个包含一个label的字符串属性。而接口LabelledValue描述了printLabel的所要求的类型对象。它依然代表包含一个label的字符串属性。

可选属性:以?紧跟变量名后边表示

interfaceSquareConfig{//定义了两个可选属性

color?:string;

width?:number;

}

functioncreateSquare(config:SquareConfig):{color:string;area:number}{//定义函数

  var newSquare={color:"white",area:100};

   if(config.color){

   newSquare.color=config.color;

  }

  if(config.width){

   newSquare.area=config.width*config.width;

  }

  returnnewSquare;

}

var mySquare=createSquare({color:"black"});//调用函数,

document.write(mySquare.color);//结果为: black

定义可选属性主要是:如果存在属性,能约束类型,而这也是十分关键的。

方法类型:在JavaScript中,方法function是一种基本类型。在面向对象思想中,接口的实现是靠类来完成的,而function作为一种类型,是不是能够实现接口呢?答案是肯定的。在TypeScript中,我们可以使用接口来约束方法的签名。

interface SearchFunc{

(source:string,subString:string):boolean;//定义一个匿名方法

}

var mySearch:SearchFunc;

mySearch=function(source:string,subString:string){//实现接口

var result=source.search(subString);//调用系统方法search查找字符串的位置

if(result==-1){

return false;

}

else{

return true;

}

}

上面代码中,定义了一个接口,接口内约束了一个方法的签名,这个方法有两个字符串参数,返回布尔值。在第二段代码中我们声明了这个接口的实现。编译器仅仅检查类型是否正确(参数类型、返回值类型),因此参数的名字可以换成别的。

数组类型:在数组类型中有一个“index”类型其描述数组下标的类型,以及返回值类型描述每项的类型。

interface StringArray{//定义数组接口

    [index:number]:string;//每个数组元素的类型

}

var myArray:StringArray;

myArray=["Bob","Fred"];

在接口的定义里面,索引器的名字一般为 index(当然也可以改成别的,但一般情况下都是保持名字为 index)。索引器的类型只能为 number 或者 string。

interface Array{

  [myindex:number]:number;

}

interfaceDictionary{

   [index:string]:any;

}

Class类型:在TypeScript中同样也可以实现,通过类实现接口要用implements关键字

interfaceIPrint{

print();

}

classAimplementsIPrint{//实现接口

print(){//实现接口中的方法

document.write("实现接口");

}

}

var B=newA();

B.print();

接口继承:和类一样,接口也能继承其他的接口。这相当于复制接口的所有成员。接口也是用关键字“extends”来继承。

interface Shape{//定义接口Shape

color:string;

}

interface circle {

width:number

}

interface Square extends Shape,circle{//继承接口Shape 多个继承用道号隔开

sideLength:number;

}

接口继承同名属性不同数据类型是不是通过编译:

interfaceShape {

color:string;

test:number;

}

interfacePenStrokeextendsShape{

penWidth:number;

test:string;

}

上一篇下一篇

猜你喜欢

热点阅读