TypeScript 中的 interface 和 type 到底有什么区别？

1. type 可以声明基本类型，而 interface 不行

• type 可以声明基本类型

type Count = number;
type Color = "Red" | "Blue";

• interface 只能用来声明复杂类型（对象和函数）

2. 扩展时表现不同

• 扩展 interface 时，TS 将检查扩展的接口是否可以赋值给被扩展的接口。

interface A {
  good(x: number): string;
  bad(x: number): string;
}
interface B extends A {
  good(x: string | number): string;
  bad(x: number): number; // Interface 'B' incorrectly extends interface 'A'.
  // Types of property 'bad' are incompatible.
  // Type '(x: number) => number' is not assignable to type '(x: number) => string'.
  // Type 'number' is not assignable to type 'string'.
}

• 但使用交叉类型时则不会出现这种情况。我们将上述代码中的接口改写成类型别名，把 extends 换成交集运算符 &，TS 将尽其所能把扩展和被扩展的类型组合在一起，而不会抛出编译时错误。

type A = {
  good(x: number): string;
  bad(x: number): string;
};
type B = A & {
  good(x: string | number): string;
  bad(x: number): number;
};
// ok

3. 多次定义时表现不同

interface 多次的声明会合并。type 不能重复声明。

• interface 可以定义多次，多次的声明会合并。

interface Point {
  x: number;
}
interface Point {
  y: number;
}
const point: Point = { x: 1 }; //error Property 'y' is missing in type '{ x: number; }' but required in type 'Point'.

const point: Point = { x: 1, y: 1 }; // ok

• 但是 type 如果定义多次，会报错。

type Point = {
  x: number; //error Duplicate identifier 'A'.
};

type Point = {
  y: number; //error Duplicate identifier 'A'.
};