TypeScript 接口 interface

Question

自定义接口，接口中定义了接口名称和一些方法名称。 说得简单些，接口就是自定义规则及约束，让数据的结构满足约束的格式。

接口只是用来定义某些方法名称，它并不需要实现这些方法，比如 Duck 接口中不需要实现 swim 方法。接口要做的是记住方法名称。

在 TypeScript 里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

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

对象类型

//interface LabelledValue {
//  label: string;
//}
function printLabel(labelledObj: { label: string }) {
  console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

类型检查器会查看 printLabel 的调用。 printLabel 有一个参数，并要求这个对象参数有一个名为 label 类型为 string 的属性。 LabelledValue 接口就好比一个名字，用来描述上面例子里的要求。 它代表了有一个 label 属性且类型为 string 的对象。

可选属性

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

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

interface SquareConfig {
  color?: string;
  width?: 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"});

可选属性的好处 :

1. 是可以对可能存在的属性进行预定义
2. 是可以捕获引用了不存在的属性时的错误。

(注意) 可选属性的额外检查

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

let mySquare = createSquare({ colour: "red", width: 100 });

注意 传入 createSquare 的参数拼写为colour而不是 color 。 在 JavaScript 里，这会默默地失败。而在 typescript 里，对象字面量会被特殊对待而且会经过 额外属性检查，当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

// error: 'colour' not expected in type 'SquareConfig'
let mySquare = createSquare({ colour: "red", width: 100 });

绕开这些检查非常简单，

​ 最简便的方法 是使用类型断言：

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

​ 怪异的方式 是对象赋值给一个另一个变量，因为 squareOptions 不会经过额外属性检查，所以编译器不会报错。

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

​ 最佳的方式 是能够添加一个字符串 索引签名 (前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性)

// 在这表示的是 SquareConfig 可以有任意数量的属性，并且只要它们不是 color 和 width，那么就无所谓它们的类型是什么
interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

任意属性

任意属性 [propName: string] 或 [propName: number] 等等

需要注意的是， 一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集 ：

//在这个例子当中我们看到接口中并没有定义 C 但是并没有报错
//应为我们定义了[propName: string]: any;
//允许添加新的任意属性
interface Person {
    b?:string,
    a:string,
    [propName: string]: any;
}

const person:Person  = {
    a:"213",
    c:"123"
}

只读属性

在属性名前用 readonly 来指定只读属性，并且对象属性只能在对象刚刚创建的时候修改其值

interface Point {
    readonly x: number;
    readonly y: number;
}
// 通过赋值一个对象字面量来构造一个 Point。 赋值后， x 和 y 再也不能被改变了。
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

TypeScript 具有 ReadonlyArray<T> 类型，它与 Array<T> 相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

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

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

a = ro as number[];

readonly 与 const 的选择

做为变量使用的话用 const ，若做为属性则使用 readonly 。

函数类型

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

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

这样定义后，就可以像使用其它接口一样使用这个函数类型的接口。

let mySearch: SearchFunc; // 1.创建一个函数类型的变量
mySearch = function(source: string, subString: string) { // 2.将一个同类型的函数赋值给这个变量
  let result = source.search(subString);
  return result > -1;
}

函数类型的类型检查

函数的参数名不需要与接口里定义的名字相匹配

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean { // 函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。
  let result = src.search(sub);
  return result > -1;
}

如果 不指定类型 ，TypeScript 的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc 类型变量，函数的返回值类型是通过其返回值推断出来的( 如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc 接口中的定义不匹配)

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

可索引的类型

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

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

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

let myStr: string = myArray[0];

TypeScript 支持两种索引签名：字符串和数字。

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

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

// 错误：使用数值型的字符串索引，有时会得到完全不同的 Animal!
interface NotOkay {
    [x: number]: Animal;
    [x: string]: Dog;
}

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

interface NumberDictionary {
  [index: string]: number;
  length: number;    // 可以，length 是 number 类型
  name: string       // 错误，`name`的类型与字符串索引类型返回值的类型不匹配
}

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

interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error! 不能设置 myArray[2]，因为索引签名是只读的

类类型

实现接口

与 C#或 Java 里接口的基本作用一样，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) { }
}

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

在操作类和接口的时候，类是具有两个类型的： 静态部分的类型 和 实例的类型 。

例如 ：

当用构造器签名去定义一个接口并让一个类去实现这个接口时会得到一个错误：

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

interface ClockConstructor {
    new (hour: number, minute: number);
}

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

因此，我们应该直接操作类的静态部分。

interface ClockConstructor { // ClockConstructor 接口为构造函数所用
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface { // ClockInterface 接口为实例方法所用
    tick(); // 也可写成 tick(): void;
}
// 构造函数 createClock，它用传入的类型创建实例。
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");
    }
}

// createClock 的第一个参数是 ClockConstructor 类型，在 createClock(AnalogClock, 7, 32) 里，会检查 AnalogClock 是否符合构造函数签名。
let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

接口继承接口

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

一个接口也可以继承多个接口，创建出多个接口的合成接口。

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;

混合类型

让一个对象可以同时做为函数和对象使用，并带有额外的属性 。在使用 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;

接口继承类

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

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

class Control {
    private state: any;
}

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

}

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

Interface 与 Type

结论：一般情况下，尽量优先使用 interface ，其次再使用 type 。

相同点：

• 都可以用来描述对象或函数；
• 都可以扩展；

不同点：

• type 更通用， interface 只能声明对象，不能重命名基本类型
• interface 使用 extends 扩展， type 使用 & 进行扩展
• Interface 可以定义多次，多次的声明会合并； type 多次声明会报错

小结

个人理解为 接口（大将) 为 类（主公) 所用，那么也只有 类（主公) 的继承者 也可使用 接口（大将) ，并且 接口（大将) 的子嗣 也当能访问到 类（主公)