Interface 和 Type 的区别

前言

在问到 ts 相关的知识点时，常常会把 Interface 和 Type 拿来比较，很重要的一点是 Interface 和 Type 都经常使用。

而在关于 ts 的问题中，可以说这个问题是必问的了，还不清楚的小伙伴抓紧看看吧！

1. 语法

type 可以使用别名或联合/交叉类型来定义，而 interface 只能定义对象类型。

// type 别名
type PersonType = {
  name: string;
  age: number;
};

// type 联合类型
type IDType = string | number;

// interface
interface Person {
  name: string;
  age: number;
}

2. 扩展

interface 可以通过扩展来继承另一个 interface，但 type 别名不能继承，只能通过交叉类型来组合。

interface 扩展

// interface 扩展
interface Animal {
  name: string;
}

interface Bear extends Animal {
  honey: boolean;
}

const bear: Bear = {
  name: "Winnie",
  honey: true,
};

type 组合

type Animal = {
  name: string;
};

type Bear = Animal & {
  honey: boolean;
};

const bear: Bear = {
  name: "Winnie",
  honey: true,
};

3. 合并

多个相同名称的 interface 会自动合并，但同名的 type 别名会报错。

interface 合并

// interface 合并
interface Box {
  height: number;
}

interface Box {
  width: number;
}

const box: Box = {
  height: 10,
  width: 20, 
};

type 别名重复报错

type Box = {
  height: number;
};

type Box = { // 重复定义会报错
  width: number;
};

4. 对象字面量扩展

对象字面量可以通过扩展 interface 来添加新字段，但不能通过扩展 type 别名。

interface Box {
  height: number;
  width: number;
}

const square = {
  height: 10,
  width: 10,
} as Box;

const cube = {
  ...square,
  depth: 10, // 使用 interface 可以扩展
} as Box;

type BoxType = {
  height: number;
  width: number;
};

const square: BoxType = {
  height: 10,
  width: 10,
};

const cube = {
  ...square,
  depth: 10, // 无法扩展 type 别名
};

总结

当需要定义一个对象类型时，interface 通常是首选，因为它更灵活、可扩展，并且具有自动合并的特性。

当需要创建可复用的类型别名、联合类型、交叉类型时，使用 type。

在 ts 中适当使用两者，可以让代码更加清晰、可维护。