接口声明

接口:在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;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,174评论 19 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 33,565评论 18 399
  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile丽语阅读 9,387评论 0 6
  • 慕课网@JoJozhai 老师 TypeScript入门课程分享 TypeScript入门 ES5,ES6,JS,...
    shangpudxd阅读 13,565评论 0 22
  • 2017年3月11日阳光明媚,对我来说是个重要的日子。因为这一天,我走进了润启教育的智慧妈妈父母班,走进了...
    清馨2001阅读 3,025评论 0 2

友情链接更多精彩内容