概念

interface 接口

接口主要用于定义对象类型和类型检查。除此之外，接口还可以定义方法和事件。
接口声明只存在于编译阶段，在编译后生成的 JS 代码中不包含任何接口代码。

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

type 类型别名

type关键字是声明类型别名的关键字，不同于 interface 只能定义对象类型，type 声明还可以定义基础类型、联合类型或交叉类型。

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

区别

1. 定义类型的范围

interface 只能定义对象类型, 而 type 声明可以声明任何类型，包括基础类型、联合类型或交叉类型。

基本类型

type Person = string;

联合类型

interface Dog {
  name: string;
}
interface Cat {
  age: number;
}
type animal = Dog | Cat;

元组

type animal = [Dog, Cat];

2. 扩展性

接口可以 extends、implements,从而扩展多个接口或类。类型没有扩展功能，只能交叉合并。同名接口会自动合并，而类型别名不会。

interface extends interface

interface Person {
  name: string;
}
interface User extends Person {
  age: number;
}

interface extends type

type Person = { name: string };
interface User extends Person {
  age: number;
}

type 使用交叉类型&来合并不同成员的类型

type & type

type Person = { name: string };
type User = Person & { age: number };

type & interface

interface Person {
  name: string;
}
type User = { age: number } & Person;

3. 合并声明

定义两个相同名称的接口会合并声明，定义两个同名的 type 会出现异常。

interface Person {
  name: string;
}
interface Person {
  age: number;
}
// 合并为:interface Person { name: string age: number}

type User = {
  name: string;
};
type User = {
  age: number;
};
// 声明重复报错：标识符“User”重复。

4. type可以获取 typeof 返回的值作为类型

let div = document.createElement("div");
type B = typeof div; // HTMLDivElement

总结

使用interface的场景：

  • 定义接口类型

  • 需要继承/合并/同名合并时

使用type的场景：

  • 定义基本类型的别名

  • 定义元组类型

  • 定义函数类型

  • 定义联合类型

  • 定义映射类型

refers: