接口与结构化类型

interface 接口

❗ 提示

主要用于声明对象类型，接口中的属性和方法都是抽象的，不需要具体实现

interface Itable {
  head: string;
  body: string;
  foot?: string; //可选属性
  content?: {
    name: string;
    age: number;
  };
}

// 键值对的定义方式 内置的Record 
interface IndexItem {
  [index: string]: string;
}

// 函数类型的接口
interface IAdd {
  (a: number, b: number): number;
}

接口的继承

❗ 提示

接口可以继承多个接口

interface ISwim {
  swimming: () = void;
}

interface IFly {
  flying: () = void;
}

interface IAction extends ISwim, IFly {}

const action: IAction = {
  swimming() {},
  flying() {},
};

接口的合并

// 一种组合类型的方式: 联合类型
type WhyType = number | string;
type Direction = "left" | "right" | "center";

// 另一种组件类型的方式: 交叉类型
type WType = number & string;

interface ISwim {
  swimming: () = void;
}

interface IFly {
  flying: () = void;
}

type MyType1 = ISwim | IFly;
type MyType2 = ISwim & IFly;

const obj1: MyType1 = {
  flying() {},
};

const obj2: MyType2 = {
  swimming() {},
  flying() {},
};

接口的实现

interface ISwim {
  swimming: () = void;
}

interface IEat {
  eating: () = void;
}

// 类实现接口
class Animal {}

// 继承: js只能实现单继承
// 实现: 实现接口, 类可以实现多个接口 -类实现 可以比接口定义的属性多
class Fish extends Animal implements ISwim, IEat {
  swimming() {
    console.log("Fish Swmming");
  }

  eating() {
    console.log("Fish Eating");
  }
}

class Person<T implements ISwim<T {
  // 可传泛型
  swimming() {
    console.log("Person Swimming");
  }
}

// 编写一些公共的API: 面向接口编程
function swimAction(swimable: ISwim) {
  swimable.swimming();
}

// 1.所有实现了接口的类对应的对象, 都是可以传入
swimAction(new Fish());
swimAction(new Person());

swimAction({ swimming: function () {} });

interface 和 type 的区别

	继承接口	定义多个相同	实现接口	定义函数类型	声明基本类型
type	❎	❎	❎	❎	✅
interface	✅	✅ 内容会合并	✅	✅	❎

❤️ 提示

建议基本类型使用type，对象类型使用interface