TypeScript-接口的使用

介绍

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

接口初探

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

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

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

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

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

interface LabelledValue {
  label: string;
}

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

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

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

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

可选属性

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

下面是应用了“option bags”的例子：

函数 createSquare是一个用于创建正方形对象的函数。它接受一个参数 config，该参数的类型为 SquareConfig，并返回一个包含颜色和面积属性的对象。

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"});

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

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

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

function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = {color: "white", area: 100};
  if (config.clor) {
    // Error: Property 'clor' does not exist on type 'SquareConfig'
    newSquare.color = config.clor;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 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 vs const

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

这里我们看下变量和属性的区别：

在 TypeScript 中，变量和属性在语义上有一些区别。

1. 变量（Variable）：变量是在代码中声明并赋值的标识符，用于存储数据。它们可以是基本类型（如数字、字符串、布尔值）或对象类型。变量通常用于存储临时数据，可以在作用域内进行修改。

   例如：

   let age: number = 25; // 变量 age 存储一个数字
   let name: string = "John"; // 变量 name 存储一个字符串
   ```
   
   在这个例子中，`age` 和 `name` 都是变量，用于存储不同类型的数据。
   
   

2. 属性（Property）：属性是属于对象的特性，用于描述对象的状态或行为。它们通常用于定义对象的特征，是对象的一部分。属性可以是只读的（readonly）或可变的。

   例如：

   interface Person {
     readonly id: number; // 只读属性 id
     name: string; // 可变属性 name
     age: number; // 可变属性 age
   }
   
   let person: Person = {
     id: 1,
     name: "John Doe",
     age: 25
   };
   ```
   
   在这个例子中，`id` 是只读属性，一旦赋值后就不能再修改。而 `name` 和 `age` 是可变属性，可以在对象的生命周期内进行修改。
   
   

总结来说，变量通常用于存储临时数据，而属性用于描述对象的特征或状态。const 适用于变量，用于声明一个不可变的标识符。而 readonly 适用于属性，用于声明一个只读的对象属性，不能修改其值。

额外的属性检查

我们在第一个例子里使用了接口，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 });

注意传入 createSquare的参数拼写为_colour_而不是 color。 在JavaScript里，这会默默地失败。

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

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

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

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

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

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

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

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

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

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

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

函数类型

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

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

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

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

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  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类型变量。 函数的返回值类型是通过其返回值推断出来的（此例是 false和 true）。 如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 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;
}

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

let myStr: string = myArray[0];

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

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"]两种形式都可以。 下面的例子里， name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

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

索引签名允许我们使用字符串或数字作为索引来访问对象的属性。在这种情况下，字符串索引的返回值类型被指定为 number。

具体而言，[index: string]: number表示在 NumberDictionary接口中，可以使用任意字符串作为索引来访问对象的属性，并且对应的属性值必须是 number类型。

例如，假设有一个具有以下属性的对象：

let dict: NumberDictionary = {
  length: 5,
  name: "John",
  age: 30,
  weight: 70
};

在这个例子中，我们可以使用字符串索引来访问 dict对象的属性：

console.log(dict.length); // 输出: 5
console.log(dict["name"]); // 输出: "John"
console.log(dict["age"]); // 输出: 30
console.log(dict["weight"]); // 输出: 70

索引签名提供了一种灵活的方式来定义具有动态属性的接口，允许您根据需要使用任意字符串索引来访问对象的属性。

如果您希望在接口中同时定义字符串索引和固定属性，可以使用联合类型来兼容不同的属性类型，例如：

interface NumberDictionary {
  [index: string]: number | string;
  length: number;
  name: string;
}

在这个例子中，我们将索引签名的返回值类型修改为 number | string，允许属性值既可以是 number类型，也可以是 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;
}

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

你也可以在接口中描述一个方法，在类里实现它，如同下面的 setTime方法一样：

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

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) { }
}

在给定的代码中，存在一个错误，导致无法正确实现接口。

在接口 ClockConstructor中，使用了构造函数签名，表示该接口可以用作类的构造函数。构造函数签名的语法是 new (参数列表)，它指定了构造函数的参数类型和数量。

在类 Clock中，尝试实现接口 ClockConstructor，但是在类的构造函数中，并没有使用接口中定义的构造函数签名所要求的参数。

具体来说，在接口 ClockConstructor中，构造函数签名要求接受两个参数：hour和 minute，但是在类 Clock的构造函数中，并没有使用这两个参数。

因此，编译器会报错并提示"Class 'Clock' incorrectly implements interface 'ClockConstructor'."
表示 Clock类没有正确实现 ClockConstructor接口。

要解决这个问题，您需要在类 Clock的构造函数中使用接口要求的参数。代码修改如下：

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

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockConstructor {
    currentTime: Date;
    constructor(h: number, m: number) {
        // 使用传入的参数来初始化对象
        this.currentTime = new Date();
        this.currentTime.setHours(h);
        this.currentTime.setMinutes(m);
    }
}

在这个修改后的代码中，我们定义了一个额外的接口 ClockInterface，用于描述 Clock类的实例的属性。同时，我们在 ClockConstructor接口中指定了构造函数的签名，并将其与 ClockInterface关联起来。

现在，Clock类正确地实现了 ClockConstructor接口，并使用了接口要求的构造函数参数。

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

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick();
}
//具体来说，ctor 参数可以是任何符合 ClockConstructor 接口的构造函数，该接口要求构造函数接受 hour 和 minute //两个数字参数，并返回一个符合 ClockInterface 接口的对象实例。因此，通过调用 new ctor(hour, minute)，我们创
//建了一个满足 ClockInterface 接口要求的对象实例。

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);

这段代码演示了 TypeScript 中的接口和类的使用。

首先，我们定义了两个接口：

1. ClockConstructor 接口表示具有特定构造函数签名的对象。它要求构造函数接受 hour 和 minute 两个数字参数，并返回一个符合 ClockInterface 接口的实例。
2. ClockInterface 接口表示具有 tick 方法的对象。

接下来，我们定义了一个名为 createClock 的函数，它接受一个构造函数类型 ctor、hour 和 minute 两个数字参数，并返回一个符合 ClockInterface 接口的实例。该函数内部使用 new ctor(hour, minute) 创建了一个实例对象，并将其作为结果返回。

然后，我们定义了两个类 DigitalClock 和 AnalogClock，它们分别实现了 ClockInterface 接口。这两个类的构造函数接受 hour 和 minute 两个数字参数，但是在代码中并没有使用这些参数。

最后，我们使用 createClock 函数创建了两个实例对象，一个是 DigitalClock 类的实例 digital，另一个是 AnalogClock 类的实例 analog。这两个实例都符合 ClockInterface 接口的要求，并且可以调用 tick 方法。

继承接口

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

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;

混合类型

先前我们提过，接口能够描述JavaScript里丰富的类型。 因为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第三方库的时候，你可能需要像上面那样去完整地定义类型。

接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的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类并不是这样的。