TS中type和interface的区别

这是我参与2022首次更文挑战的第22天活动详情查看：2022首次更文挑战」。

概念上理解

接口主要用于类型检查，它只是一个结构契约，定义了具有相似的名称和类型的对象结构。除此之外接口还有其他功能，接口还可以定义方法和事件。

而type的功能主要用于定义类型，基本类型别名，联合类型，元组等类型。

相同点

都可以描述一个对象或者函数 interface

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

interface SetUser {
  (name: string, age: number): void;
}

type

type User = {
    name: string
    age: number
  };
  
  type SetUser = (name: string, age: number): void;

拓展 与 交叉类型

interface 可以 extends， 但 type 是不允许 extends 和 implement 的，但是 type 缺可以通过交叉类型 实现 interface 的 extend 行为，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 与 interface 类型 交叉 。

虽然效果差不多，但是两者语法不同。

interface extends interface

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

type 与 type 交叉

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

interface extends type

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

type 与 interface 交叉

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

不同点

type 可以而 interface 不行

type 可以而 interface 不行 type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string

联合类型

interface Dog {
    wong();
}
interface Cat {
    miao();
}

// 具体定义数组每个位置的类型 type 语句中还可以使用 typeof 获取实例的 类型进行赋值 // 当你想获取一个变量的类型时，使用 typeof

type Pet = Dog | Cat
type PetList = [Dog, Pet]
let div = document.createElement('div');
type B = typeof div

interface 可以而 type 不行

interface 能够声明合并

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

结论：interface是接口，type是类型，本身就是两个概念。只是碰巧表现上比较相似。 希望定义一个变量类型，就用type，如果希望是能够继承并约束的，就用interface。 如果你不知道该用哪个，说明你只是想定义一个类型而非接口，所以应该用type。