转自:http://www.hubwiz.com/
接口声明
在TypeScript中,接口是用作约束作用的,在编译成JavaScript的时候,所有的接口都会被擦除掉,因为 JavaScript中并没有接口这一概念。TypeScript中接口是用关键字interface进行声明,例如:
interface LabelledValue { //定义接口
label: string; //定义属性
}
interface LabelledValue { //定义接口
label: string;
}
function printLabel(labelledObj: LabelledValue) { //定义函数printLabel,其参数类型为接口类型
document.write(labelledObj.label);
}
var myObj = {size: 10, label: "Size 10 Object"}; //定义含有接口中属性的对象
printLabel(myObj); //调用函数
在上面的例子中,printLabel函数要求传入一个包含一个label的字符串属性。而接口LabelledValue描述了printLabel的所要求的类型对象。它依然代表包含一个label的字符串属性。
可选属性
有时不是所有定义在interface中的属性都是必须的,typescript中便为我们提供了可选属性。带有可选属性的interface定义和c#语言很相似,以?紧跟变量名后边表示。如下代码:
interface SquareConfig { //定义了两个可选属性
color?: string;
width?: number;
}
function createSquare(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;
}
return newSquare;
}
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;
}
interface Dictionary{
[index: string]: any;
}
Class类型
在C#和java中interface是很常使用的类型系统,其用来强制其实现类符合其契约。在TypeScript中同样也可以实现,通过类实现接口要用implements关键字。如下代码:
interface IPrint{
print();
}
class A implements IPrint { //实现接口
print(){ //实现接口中的方法
document.write("实现接口");
}
}
var B=new A();
B.print();
接口继承
和类一样,接口也能继承其他的接口。这相当于复制接口的所有成员。接口也是用关键字“extends”来继承。
interface Shape { //定义接口Shape
color: string;
}
interface Square extends Shape { //继承接口Shape
sideLength: number;
}
一个interface可以同时继承多个interface,实现多个接口成员的合并。用逗号隔开要继承的接口。
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
需要注意的是,尽管支持继承多个接口,但是如果继承的接口中,定义的同名属性的类型不同的话,是不能编译通过的。如下代码:
interface Shape {
color: string;
test: number;
}
interface PenStroke extends Shape{
penWidth: number;
test: string;
}