在 typescript 里面,有两个概念十分容易混淆,那便是 typeinterface ,它俩都可以用来表示 接口 ,但是实际使用上会存在一些差异

# type 和 interface 的相同点

在我看来,它俩就是对 接口定义 的两种不同形式,目的都是一样的,都是用来定义 对象 或者 函数 的形状,示例如下

interface example {
  name: string;
  age: number;
}
interface exampleFunc {
  (name: string, age: number): void;
}
type example = {
  name: string;
  age: number;
};
type example = (name: string, age: number) => void;

它俩也支持 继承,并且不是独立的,而是可以 互相 继承,只是具体的形式稍有差别

type exampleType1 = {
  name: string;
};
interface exampleInterface1 {
  name: string;
}
type exampleType2 = exampleType1 & {
  age: number;
};
type exampleType2 = exampleInterface1 & {
  age: number;
};
interface exampleInterface2 extends exampleType1 {
  age: number;
}
interface exampleInterface2 extends exampleInterface1 {
  age: number;
}

可以看到对于 interface 来说,继承是通过 extends 实现的,而 type 的话是通过 & 来实现的,也可以叫做 交叉类型

# type 和 interface 的不同点

首先聊聊 type 可以做到,但 interface 不能做到的事情

  1. type 可以定义 基本类型的别名,如 type myString = string
  2. type 可以通过 typeof 操作符来定义,如 type myType = typeof someObj
  3. type 可以申明 联合类型,如 type unionType = myType1 | myType2
  4. type 可以申明 元组类型,如 type yuanzu = [myType1, myType2]

接下来聊聊 interface 可以做到,但是 type 不可以做到的事情

interface 可以 声明合并,示例如下

interface test {
  name: string;
}
interface test {
  age: number;
}
/*
test实际为 {
    name: string
    age: number
}
*/

这种情况下,如果是 type 的话,就会是 覆盖 的效果,始终只有最后一个 type 生效

# 结语

其实在 typescript 里,还有很多容易搞混淆的概念,如 extendsimplements 等,还有一些高级概念,如 泛型。 ts 给我们的代码带来健壮性的同时,也引入了更多的概念和知识,因此需要我们不断地学习。