接口:在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;
}
网友评论