TypeScript详解七：接口（interface）

---

一、接口是什么？

ts中的接口：
关键字：interface

• 接口一方面可以在面向对象编程中表示为行为的抽象，另外可以用来描述对象的现状
• 接口就是把一些类中共有的属性和方法抽象出来，可以用来约束实现此接口的类
• 一个类可以实现多个接口，一个接口也可以被多个类实现，但一个类可以有多个子类，但只能有一个父类
• 同名的接口可以写多个，类型会自动合并

二、接口的使用

1.表示对象的形状

interface Speakable {
  name: string;
  speak(): void;
}

let speakMan: Speakable = {
  name: 'Jerry',
  speak() {}
}

2.表示行为的抽象

interface Speakable {
  speak(): void;
}
interface Eatable {
  eat(): void;
}
class Person implements Speakable, Eatable {
  name: string;
  speak(): void {
    throw new Error("Method not implemented.");
  }
  eat(): void {
    throw new Error("Method not implemented.");
  }
}

3.任意属性 【key：string】: any

interface Person2 {
  readonly id: number;
  name: string;
  [key: string]: any; // 加上后，可以添加任意的属性
}
let p: Person2 = {
  id: 1,
  name: '张三',
  age: 12
}

4.接口的继承

namespace a {
  interface Speakable {
    speak(): void;
  }
  // 子接口通过 extends 继承父接口的属性和方法
  interface SpeakChinese extends Speakable {
    speakChinese(): void;
  }
  class Chinese implements SpeakChinese {
    speakChinese(): void {
      throw new Error("Method not implemented.");
    }
    speak(): void {
      throw new Error("Method not implemented.");
    }
  }
}

5.readonly 在接口中的使用

namespace b {
  interface Person {
    readonly id: number
  }
  let p: Person = {
    id: 1
  }
  console.log(p.id); // 1
  // p.id = 2; // 无法分配到 "id" ，因为它是只读属性。ts(2540)
}

6.函数类型接口

namespace c {
  interface Discount {
    (price: number): number;
  }
  let discount: Discount = (price: number): number => {
    return price * .8;
  }
  console.log(discount(10)); // 8
}

7.可索引接口

// 对数组和对象进行约束
namespace d {
  interface User {
    [index: number]: string; // index是自己随便写的属性
  }
  let user1: User = { 0: '1', 1: '2', 2: '3' };
  console.log(user1); // { '0': '1', '1': '2', '2': '3' }
  let user2: User = ['1', 'tom', '3'];
  console.log(user2); // [ '1', 'tom', '3' ]
}

8.构造函数类型

namespace e {
  class Person {
    constructor(public name: string) {}
  }
  interface WithNameClass {
    // 修饰普通函数不用加new，修饰构造函数要加new
    new(name: string): any;
  }
  function created (cla: WithNameClass, name: string): void {
    return new cla(name);
  }
  let res = created(Person, '张三');
  console.log(res); // Person { name: '张三' }
}

9.修饰函数接口的另一种写法

namespace f {
  interface Type1 {
    (name: string): any;
    age: number;
  }
  interface Type2 {
    a: (name: string) => any;
  }
  let t: any = (name: string) => { }; // 此处修饰的是一个函数
  t.age = 10;
  let t1: Type1 = t;
  let t2: Type2 = { a: t1 }; // 此处修饰的是对象中的属性（属性值是一个函数）
}

总结

本篇文章主要记录ts的接口，下次再见