基础 - 接口 - 《TypeScript》

描述对象
描述函数
混合类型
描述类
- 基本写法
- 类静态部分与实例部分的区别
类型别名
继承接口
接口继承类

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”，只需要描述对象满足接口的必要条件就不会报错。在 TypeScript 里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口多用于描述对象属性类型、函数类型、类类型等。

描述对象

描述对象属性类型是接口的最基础用法。

定义一个接口：

interface Square {
  color: string; // 注意这是分号，不是逗号
  width: number;
}

:::danger 我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。然而，**大多时候 TypeScript 却并不会这么宽松，会有额外的属性检查。

**对象属性类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。
:::

使用接口：作为一种类型来使用

var a:Square = {color: 'red', width: 100}

同时函数的参数、返回值等的类型也可以指定为定义好的接口。（接口也存在类似函数的变量提升，接口的使用可以先于接口的定义）

可选属性

接口的可选属性，与函数的可选参数一样，只需要加上 ? 号即可。

interface Square {
  color: string; // 注意这是分号，不是逗号
  width?: number;
}

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。例如可以检查到属性的拼写错误。

只读属性

可以在属性名前用 readonly 来指定只读属性

interface Square {
  color: string; // 注意这是分号，不是逗号
  readonly width: number;
}

在只读属性被复制之后，再次改变其值会报错

只读数组

ts 预先定义了一个接口 ReadonlyArray，使用方法与 Array 一样，但是把所有可以改变数组的方法去掉了。可以确保数组创建后再也不能修改。

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // 报错
ro.push(5); // 报错
ro.length = 100; // 报错

可以把 Array 赋值给 ReadonlyArray，但是不能把 ReadonlyArray 赋值给 Array。原因在于 ReadonlyArray 去掉了一些方法。

a = ro // 报错

但是，我们可以使用类型断言的方式赋值成功

a = ro as Array<number>
// 或
a = ro as number[]
// 或
a = <number[]>ro

额外的属性检查

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

interface Square {
  color: string;
  width: number;
}
var a:Square = {color: 'red', width: 11, area: 111} // 报错

要绕开这些检查非常简单。

（1）最简便的方法是使用类型断言

var a:Square = {color: 'red', width: 11, area: 111} as Square

（2）将对象字面量赋值给一个变量存储起来

var b = {color: 'red', width: 11, area: 111}
var a:Square = b

（3）最佳的方式是能够添加一个字符串索引签名

前提是你能够确定这个对象可能具有某些作为特殊用途使用的额外属性。如果 Square 带有 color 和 width 属性外，并且还会带有任意数量的其它属性，那么我们可以这样定义它：

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

原因在于对象的属性【索引】是以字符串的形式存在的，使用 propName: string 来代表属性名是合理的

可索引的类型

接口可以描述可以通过索引得到的类型，比如 a[10] 或 ageMap[“daniel”] 。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

ts 中支持两种索引签名，数字和字符串。前面用到的字符串索引签名就是其中一种。

// 表示了当用 number 去索引 StringArray 时会得到 string 类型的返回值。
interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

可以同时使用两种类型的索引，但是此时数字索引的值类型必须是字符串索引值类型的子类型。这是因为当使用 number 来索引时，JavaScript 会将它转换成 string，然后再去索引对象。

字符串索引签名能够很好的描述 dictionary 模式，并且它们也会确保所有属性与其值类型相匹配。因为字符串索引声明了 obj.property 和 obj["property"] 两种形式都可以。

interface dictionary {
  [index: string]: number;
  length: number;
  name: string; // 报错，只能是 number
}

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

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

描述函数

接口可以用于规定函数类型：

interface func {
  (name: string, age: number):string;
} // 冒号左边括号包裹的是参数类型，右边是返回值类型

需要区别于对象中的方法：

//=> 第一种写法
interface functi {
  aa: (name: string, age: number) => string
} // 用于校验对象中的方法类型

//=> 第二种写法
interface functi {
  aa(name: string, age: number): string
} // 用于校验对象中的方法类型

函数类型接口的使用：

var tfunc: func = function (name: string, age: number): string {
  return 'aa'
}

此时后面的匿名函数中的类型可以省略，而且参数名不需要与接口里定义的名字相匹配

var tfunc:func = function (n,a){
 return 'aa'
}
//=> 使用接口与下面直接定义类型是等价的，所以上面可以省略多余的类型注解
var tfunc = function (name: string, age: number): string {
  return 'aa'
}

混合类型

因为 JavaScript 其动态灵活的特点，有时你会希望一个对象可以同时具有多种类型。

一个例子就是，一个对用，并带有额外的属性。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

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

描述类

TypeScript 能够使用接口来明确的强制一个类去符合某个契约。

基本写法

interface ClockInterface {
  currentTime: Date; // 属性
  setTime(d: Date):void; // 方法
}

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 {
    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 = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

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

类型别名

使用 type 关键字来定义类型别名：与接口只是写法上的不同

函数定义类型别名：

// interface func {
//   (name: string, age: number):string;
// }
type func = (name: string, age: number) => string;

对象定义类型别名：

// interface Result {
//   data: List[];
// }
type Result = {
  data: List[];
};

类定义类型别名：

// interface ClockInterface {
//   currentTime: Date; // 属性
//   setTime(d: Date): void; // 方法
// }
type ClockInterface = {
  currentTime: Date; // 属性
  setTime(d: Date): void; // 方法
};

继承接口

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

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <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>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

接口继承类

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

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

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select() { }
}

// 错误：“Image”类型缺少“state”属性。
class Image implements SelectableControl {
    select() { }
}

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

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