三.Typescript之接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里&＃xff0c;接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

下面通过一个简单示例来观察接口是如何工作的&＃xff1a;

function printLabel(labelledObj: { label: string }) {console.log(labelledObj.label);
}let myObj &＃61; { size: 10, label: "Size 10 Object" };
printLabel(myObj);


类型检查器会查看printLabel的调用。 printLabel有一个参数&＃xff0c;并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是&＃xff0c;我们传入的对象参数实际上会包含很多属性&＃xff0c;但是编译器只会检查那些必需的属性是否存在&＃xff0c;并且其类型是否匹配。 然而&＃xff0c;有些时候TypeScript却并不会这么宽松&＃xff0c;我们下面会稍做讲解。

下面我们重写上面的例子&＃xff0c;这次使用接口来描述&＃xff1a;必须包含一个label属性且类型为string&＃xff1a;

interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj &＃61; {size: 10, label: "Size 10 Object"};
printLabel(myObj);


LabelledValue接口就好比一个名字&＃xff0c;用来描述上面例子里的要求。 它代表了有一个 label属性且类型为string的对象。 需要注意的是&＃xff0c;我们在这里并不能像在其它语言里一样&＃xff0c;说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。 只要传入的对象满足上面提到的必要条件&＃xff0c;那么它就是被允许的。

还有一点值得提的是&＃xff0c;类型检查器不会去检查属性的顺序&＃xff0c;只要相应的属性存在并且类型也是对的就可以。

接口里的属性不全都是必需的。 有些是只在某些条件下存在&＃xff0c;或者根本不存在。 可选属性在应用“option bags”模式时很常用&＃xff0c;即给函数传入的参数对象中只有部分属性赋值了。

下面是应用了“option bags”的例子&＃xff1a;

interface SquareConfig {color?: string;width?: number;
}function createSquare(config: SquareConfig): {color: string; area: number} {let newSquare &＃61; {color: "white", area: 100};if (config.color) {newSquare.color &＃61; config.color;}if (config.width) {newSquare.area &＃61; config.width * config.width;}return newSquare;
}let mySquare &＃61; createSquare({color: "black"});


带有可选属性的接口与普通的接口定义差不多&＃xff0c;只是在可选属性名字定义的后面加一个?符号。

可选属性的好处之一是可以对可能存在的属性进行预定义&＃xff0c;好处之二是可以捕获引用了不存在的属性时的错误。 比如&＃xff0c;我们故意将 createSquare里的color属性名拼错&＃xff0c;就会得到一个错误提示&＃xff1a;

interface SquareConfig {color?: string;width?: number;
}function createSquare(config: SquareConfig): { color: string; area: number } {let newSquare &＃61; {color: "white", area: 100};if (config.clor) {// Error: Property &＃39;clor&＃39; does not exist on type &＃39;SquareConfig&＃39;newSquare.color &＃61; config.clor;}if (config.width) {newSquare.area &＃61; config.width * config.width;}return newSquare;
}let mySquare &＃61; createSquare({color: "black"});

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

interface Point {readonly x: number;readonly y: number;
}


你可以通过赋值一个对象字面量来构造一个Point。 赋值后&＃xff0c; x和y再也不能被改变了。 

转存失败重新上传取消let p1: Point &＃61; { x: 10, y: 20 };
p1.x &＃61; 5; // error!


TypeScript具有ReadonlyArray类型&＃xff0c;它与Array相似&＃xff0c;只是把所有可变方法去掉了&＃xff0c;因此可以确保数组创建后再也不能被修改&＃xff1a;

let a: number[] &＃61; [1, 2, 3, 4];
let ro: ReadonlyArray &＃61; a;
ro[0] &＃61; 12; // error!
ro.push(5); // error!
ro.length &＃61; 100; // error!
a &＃61; ro; // error!


上面代码的最后一行&＃xff0c;可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。 但是你可以用类型断言重写&＃xff1a;

a &＃61; ro as number[];


readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const&＃xff0c;若做为属性则使用readonly。

我们在第一个例子里使用了接口&＃xff0c;TypeScript让我们传入{ size: number; label: string; }到仅期望得到{ label: string; }的函数里。 我们已经学过了可选属性&＃xff0c;并且知道他们在“option bags”模式里很有用。

然而&＃xff0c;天真地将这两者结合的话就会像在Javascript里那样搬起石头砸自己的脚。 比如&＃xff0c;拿 createSquare例子来说&＃xff1a;

interface SquareConfig {color?: string;width?: number;
}function createSquare(config: SquareConfig): { color: string; area: number } {// ...
}let mySquare &＃61; createSquare({ colour: "red", width: 100 });


注意传入createSquare的参数拼写为colour而不是color。 在Javascript里&＃xff0c;这会默默地失败。

你可能会争辩这个程序已经正确地类型化了&＃xff0c;因为width属性是兼容的&＃xff0c;不存在color属性&＃xff0c;而且额外的colour属性是无意义的。

然而&＃xff0c;TypeScript会认为这段代码可能存在bug。 对象字面量会被特殊对待而且会经过 额外属性检查&＃xff0c;当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时&＃xff0c;你会得到一个错误。

// error: &＃39;colour&＃39; not expected in type &＃39;SquareConfig&＃39;
let mySquare &＃61; createSquare({ colour: "red", width: 100 });


绕开这些检查非常简单。 最简便的方法是使用类型断言&＃xff1a;

let mySquare &＃61; createSquare({ width: 100, opacity: 0.5 } as SquareConfig);


然而&＃xff0c;最佳的方式是能够添加一个字符串索引签名&＃xff0c;前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。 如果 SquareConfig带有上面定义的类型的color和width属性&＃xff0c;并且还会带有任意数量的其它属性&＃xff0c;那么我们可以这样定义它&＃xff1a;

interface SquareConfig {color?: string;width?: number;[propName: string]: any;
}


我们稍后会讲到索引签名&＃xff0c;但在这我们要表示的是SquareConfig可以有任意数量的属性&＃xff0c;并且只要它们不是color和width&＃xff0c;那么就无所谓它们的类型是什么。

还有最后一种跳过这些检查的方式&＃xff0c;这可能会让你感到惊讶&＃xff0c;它就是将这个对象赋值给一个另一个变量&＃xff1a; 因为 squareOptions不会经过额外属性检查&＃xff0c;所以编译器不会报错。

let squareOptions &＃61; { colour: "red", width: 100 };
let mySquare &＃61; createSquare(squareOptions);


要留意&＃xff0c;在像上面一样的简单代码里&＃xff0c;你可能不应该去绕开这些检查。 对于包含方法和内部状态的复杂对象字面量来讲&＃xff0c;你可能需要使用这些技巧&＃xff0c;但是大部额外属性检查错误是真正的bug。 就是说你遇到了额外类型检查出的错误&＃xff0c;比如“option bags”&＃xff0c;你应该去审查一下你的类型声明。 在这里&＃xff0c;如果支持传入 color或colour属性到createSquare&＃xff0c;你应该修改SquareConfig定义来体现出这一点。

接口能够描述Javascript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外&＃xff0c;接口也可以描述函数类型。

为了使用接口表示函数类型&＃xff0c;我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFunc {(source: string, subString: string): boolean;
}


这样定义后&＃xff0c;我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量&＃xff0c;并将一个同类型的函数赋值给这个变量。

let mySearch: SearchFunc;
mySearch &＃61; function(source: string, subString: string) {let result &＃61; source.search(subString);return result > -1;
}


对于函数类型的类型检查来说&＃xff0c;函数的参数名不需要与接口里定义的名字相匹配。 比如&＃xff0c;我们使用下面的代码重写上面的例子&＃xff1a;

let mySearch: SearchFunc;
mySearch &＃61; function(src: string, sub: string): boolean {let result &＃61; src.search(sub);return result > -1;
}


函数的参数会逐个进行检查&＃xff0c;要求对应位置上的参数类型是兼容的。 如果你不想指定类型&＃xff0c;TypeScript的类型系统会推断出参数类型&＃xff0c;因为函数直接赋值给了 SearchFunc类型变量。 函数的返回值类型是通过其返回值推断出来的&＃xff08;此例是 false和true&＃xff09;。 如果让这个函数返回数字或字符串&＃xff0c;类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

let mySearch: SearchFunc;
mySearch &＃61; function(src, sub) {let result &＃61; src.search(sub);return result > -1;
}

可索引的类型

与使用接口描述函数类型差不多&＃xff0c;我们也可以描述那些能够“通过索引得到”的类型&＃xff0c;比如a[10]或ageMap["daniel"]。 可索引类型具有一个 索引签名&＃xff0c;它描述了对象索引的类型&＃xff0c;还有相应的索引返回值类型。 让我们看一个例子&＃xff1a;

interface StringArray {[index: number]: string;
}let myArray: StringArray;
myArray &＃61; ["Bob", "Fred"];let myStr: string &＃61; myArray[0];


上面例子里&＃xff0c;我们定义了StringArray接口&＃xff0c;它具有索引签名。 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。

TypeScript支持两种索引签名&＃xff1a;字符串和数字。 可以同时使用两种类型的索引&＃xff0c;但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时&＃xff0c;Javascript会将它转换成string然后再去索引对象。 也就是说用 100&＃xff08;一个number&＃xff09;去索引等同于使用"100"&＃xff08;一个string&＃xff09;去索引&＃xff0c;因此两者需要保持一致。

class Animal {name: string;
}
class Dog extends Animal {breed: string;
}// 错误&＃xff1a;使用数值型的字符串索引&＃xff0c;有时会得到完全不同的Animal!
interface NotOkay {[x: number]: Animal;[x: string]: Dog;
}


字符串索引签名能够很好的描述dictionary模式&＃xff0c;并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 obj.property和obj["property"]两种形式都可以。 下面的例子里&＃xff0c; name的类型与字符串索引类型不匹配&＃xff0c;所以类型检查器给出一个错误提示&＃xff1a;

interface NumberDictionary {[index: string]: number;length: number; // 可以&＃xff0c;length是number类型name: string // 错误&＃xff0c;&＃96;name&＃96;的类型与索引类型返回值的类型不匹配
}


最后&＃xff0c;你可以将索引签名设置为只读&＃xff0c;这样就防止了给索引赋值&＃xff1a;

interface ReadonlyStringArray {readonly [index: number]: string;
}
let myArray: ReadonlyStringArray &＃61; ["Alice", "Bob"];
myArray[2] &＃61; "Mallory"; // error!


你不能设置myArray[2]&＃xff0c;因为索引签名是只读的。

实现接口

与C#或Java里接口的基本作用一样&＃xff0c;TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface ClockInterface {currentTime: Date;
}class Clock implements ClockInterface {currentTime: Date;constructor(h: number, m: number) { }
}


你也可以在接口中描述一个方法&＃xff0c;在类里实现它&＃xff0c;如同下面的setTime方法一样&＃xff1a;

interface ClockInterface {currentTime: Date;setTime(d: Date);
}class Clock implements ClockInterface {currentTime: Date;setTime(d: Date) {this.currentTime &＃61; d;}constructor(h: number, m: number) { }
}


接口描述了类的公共部分&＃xff0c;而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。

类静态部分与实例部分的区别

当你操作类和接口的时候&＃xff0c;你要知道类是具有两个类型的&＃xff1a;静态部分的类型和实例的类型。 你会注意到&＃xff0c;当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误&＃xff1a;

interface ClockConstructor {new (hour: number, minute: number);
}class Clock implements ClockConstructor {currentTime: Date;constructor(h: number, m: number) { }
}


这里因为当一个类实现了一个接口时&＃xff0c;只对其实例部分进行类型检查。 constructor存在于类的静态部分&＃xff0c;所以不在检查的范围内。

因此&＃xff0c;我们应该直接操作类的静态部分。 看下面的例子&＃xff0c;我们定义了两个接口&＃xff0c; ClockConstructor为构造函数所用和ClockInterface为实例方法所用。 为了方便我们定义一个构造函数 createClock&＃xff0c;它用传入的类型创建实例。

interface ClockConstructor {new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {tick();
}function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {return new ctor(hour, minute);
}class DigitalClock implements ClockInterface {constructor(h: number, m: number) { }tick() {console.log("beep beep");}
}
class AnalogClock implements ClockInterface {constructor(h: number, m: number) { }tick() {console.log("tick tock");}
}let digital &＃61; createClock(DigitalClock, 12, 17);
let analog &＃61; createClock(AnalogClock, 7, 32);


因为createClock的第一个参数是ClockConstructor类型&＃xff0c;在createClock(AnalogClock, 7, 32)里&＃xff0c;会检查AnalogClock是否符合构造函数签名。

和类一样&＃xff0c;接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里&＃xff0c;可以更灵活地将接口分割到可重用的模块里。

interface Shape {color: string;
}interface Square extends Shape {sideLength: number;
}let square &＃61; {};
square.color &＃61; "blue";
square.sideLength &＃61; 10;


一个接口可以继承多个接口&＃xff0c;创建出多个接口的合成接口。

interface Shape {color: string;
}interface PenStroke {penWidth: number;
}interface Square extends Shape, PenStroke {sideLength: number;
}let square &＃61; {};
square.color &＃61; "blue";
square.sideLength &＃61; 10;
square.penWidth &＃61; 5.0;

混合类型

先前我们提过&＃xff0c;接口能够描述Javascript里丰富的类型。 因为Javascript其动态灵活的特点&＃xff0c;有时你会希望一个对象可以同时具有上面提到的多种类型。

一个例子就是&＃xff0c;一个对象可以同时做为函数和对象使用&＃xff0c;并带有额外的属性。

interface Counter {(start: number): string;interval: number;reset(): void;
}function getCounter(): Counter {let counter &＃61; function (start: number) { };counter.interval &＃61; 123;counter.reset &＃61; function () { };return counter;
}let c &＃61; getCounter();
c(10);
c.reset();
c.interval &＃61; 5.0;


在使用Javascript第三方库的时候&＃xff0c;你可能需要像上面那样去完整地定义类型。

当接口继承了一个类类型时&＃xff0c;它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员&＃xff0c;但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时&＃xff0c;这个接口类型只能被这个类或其子类所实现&＃xff08;implement&＃xff09;。

当你有一个庞大的继承结构时这很有用&＃xff0c;但要指出的是你的代码只在子类拥有特定属性时起作用。 这个子类除了继承至基类外与基类没有任何关系。 例&＃xff1a;

class Control {private state: any;
}interface SelectableControl extends Control {select(): void;
}class Button extends Control implements SelectableControl {select() { }
}class TextBox extends Control {select() { }
}// 错误&＃xff1a;“Image”类型缺少“state”属性。
class Image implements SelectableControl {select() { }
}class Location {}


在上面的例子里&＃xff0c;SelectableControl包含了Control的所有成员&＃xff0c;包括私有成员state。 因为 state是私有成员&＃xff0c;所以只能够是Control的子类们才能实现SelectableControl接口。 因为只有 Control的子类才能够拥有一个声明于Control的私有成员state&＃xff0c;这对私有成员的兼容性是必需的。

在Control类内部&＃xff0c;是允许通过SelectableControl的实例来访问私有成员state的。 实际上&＃xff0c; SelectableControl接口和拥有select方法的Control类是一样的。 Button和TextBox类是SelectableControl的子类&＃xff08;因为它们都继承自Control并有select方法&＃xff09;&＃xff0c;但Image和Location类并不是这样的。