TypeScript学习笔记（三）接口-白红宇

接口入门

interface LabelledValue {  label: string;}function printLabel(labelledObj: LabelledValue) {  console.log(labelledObj.label);}let myObj = {
   size: 10, label: "Size 10 Object"};printLabel(myObj);复制代码

可选接口

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

interface SquareConfig {  color?: string;  width?: number;}// {color:string;area:number}表示函数的返回值的类型function createSquare(config: SquareConfig): {color: string; area: number} {  let newSquare = {
   color: "white", area: 100};  if (config.color) {    newSquare.color = config.color;  }  if (config.width) {    newSquare.area = config.width * config.width;  }  return newSquare;}let mySquare = createSquare({
   color: "black"});复制代码

可选接口和普通接口差不多，只是在属性名后面加了一个?

只读属性

顾名思义只能读取

interface  Point {    readonly x: number;    readonly y: number;}let a:Point = {    x: 10,    y:10}a.x = 100 // error复制代码

ReadonlyArray类型，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

let a: number[] = [1, 2, 3, 4];let ro: ReadonlyArray
    
      = a;ro[0] = 12; // error!ro.push(5); // error!ro.length = 100; // error!a = ro; // error!let b = ro // oklet b:[] = ro // errorlet b: ReadonlyArray
     
       = ro // ok...let a: ReadonlyArray
      
       = [1, 2, 3, 4];let ro:ReadonlyArray
       
         = [...a,10];// oka = ro // ok复制代码

虽然把整个ReadonlyArray赋值到一个普通数组也是不可以的。但是你可以用类型断言重写：

a = ro // error// but a = ro as number[] // ok复制代码

额外属性检查

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

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

interface SquareConfig {    color?: string;    width?: number;}function createSquare(config: SquareConfig): { color: string; area: number } {    // ...}let mySquare = createSquare({ colour: "red", width: 100 }); //error// 在SquareConfig没有指定colour复制代码

绕开这个断言的方式

let mySquare = createSquare({ colour: "red", width: 100 } as SquareConfig); 复制代码

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

interface SquareConfig {    color?: string;    width?: number;    [propName: string]: any;}...复制代码

还有另一种方式，它就是将这个对象赋值给一个另一个变量，这样也可以绕过类型检查

...let squareOptions = { colour: "red", width: 100 };let mySquare = createSquare(squareOptions);复制代码

函数类型

接口不仅可以描述对象的各种类型，也可以描述函数的类型。

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

interface SearchFunc {// 参数：返回值  (source: string, subString: string): boolean;}let mySearch: SearchFunc;mySearch = function(src: string, sub: string): boolean {  let result = src.search(sub);  return result > -1;}// 或者let mySearch: SearchFunc = function(src: string, sub: string): boolean {  let result = src.search(sub);  return result > -1;}复制代码

可索引的类型

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

interface StringArray {  [index: number]: string;}let myArray: StringArray;myArray = ["Bob", "Fred"]; // okmyArray = ["Bob", 1111]; // errorlet myArrayy: StringArray = {   1:'sssss',   2:'2'} // oklet myStr: string = myArray[0];复制代码

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

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

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

interface NumberDictionary {    [index:number] : number,    length:number    name: string}let test:NumberDictionary = {    1:123,    length:1,    name:'jiang'} // oktest.length // ok复制代码

只读索引属性

最后，你可以将索引签名设置为只读，这样就防止了给索引赋值：

interface ReadonlyStringArray {    readonly [index: number]: string;}let myArray: ReadonlyStringArray = ["Alice", "Bob"];myArray[2] = "Mallory"; // error!复制代码

类类型

在接口中描述属性，在类中规定属性。

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

也可在接口中描述方法，并在类里实现。

interface ClockInterface {    currentTime: Date;    setTime(d: Date); // error 提示没有返回值    setTime(d: Date):void; // ok}class Clock implements ClockInterface {    currentTime: Date;    setTime(d: Date) {        this.currentTime = d;    }    constructor(h: number, m: number) { }}复制代码

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

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

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

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

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

interface ClockConstructor {    new (hour: number, minute: number): ClockInterface;}interface ClockInterface {    hdata:number;    mdata:number;    tick():void;}function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {    return new ctor(hour, minute);}class DigitalClock implements ClockInterface {    hdata:number;    mdata:number;    constructor(h: number, m: number) {        this.hdata = h        this.mdata = m     }    tick() {        console.log("beep beep");    }}let digital = createClock(DigitalClock, 12, 17);digital.tick()console.log(digital)复制代码

因为createClock的第一个参数是ClockConstructor类型，在createClock(DigitalClock, 12, 17)里，会检查AnalogClock是否符合构造函数签名。

继承接口

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

interface Shape {    color: string;}interface Square extends Shape {    sideLength: number;}// 为啥不用 square:Square 如果这样做需要在声明square时就初始化接口中规定的值。let square = 
    
     {};square.color = "blue";square.sideLength = 10;interface Shape {    color: string;}interface PenStroke {    penWidth: number;}interface Square extends Shape, PenStroke {    sideLength: number;}let square = 
     
      {};square.color = "blue";square.sideLength = 10;square.penWidth = 5.0;复制代码

混合类型

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

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

interface Counter {    (start: number): number;    interval: number;    reset(): void;}function getCounter(): Counter {    let counter = 
    
     function (start: number) { return start };    counter.interval = 123;    counter.reset = function () { };    return counter;}let c = getCounter();c(10);c.reset();c.interval = 5.0;复制代码

接口继承类

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

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

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

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

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