vue3第三十四节（TS 之 interface 与 type 的异同）

1、interface 接口只能定义描述对象类型

如：

interface PersonIn {
  name: string;
  age:number;
  job:string;
}

// 定义函数

interface FPerson {
  (a: number, b:string) => void
}

2、类型别名 type则可以定义多种类型

如：

type userName = string 
type isShow = boolean
type age = number | string
type lists = [string] // 声明元组类型
type Tree<T> = {name: T} // 定义泛型
type PersonT = { // 定义对象
  name: string;
  age: number | string;
  job: string;
}
// 定义函数
type Fun1 = (a:string, b:number) => void

由上可见 type 可以定义基本类型别名、元组类型，type 支持联合类型，交叉类型，对象 函数
而 interface 只能定义 对象 函数

3、interface 与 type 定义同名类型时

interface Person {
  age: number;
}

interface Person {
  name: string;
}

interface 定义的 两个Person 同名，会自动合并为

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

但是 type 定义 相同名称 Person 时会 报错

type Person = {
  age: number;
}
// 会报错
type Person = {
  name: string;
}

4、interface 与 type 都可以继承

interface 继承使用的 extends

iterface PersonA {
  name: string;
}

interface 继承 interface

interface PersonB extends PersonA{
  age: number;
}

interface 继承 type

interface PersonB extends PersonA {
  job: string;
}

type 继承, 使用的是 & 符号

type PersonA  = {
  age: number;
}

type 继承 type

type PersonB = PersonA &  {name: string; job:string;}

type 继承 interface

interface Person {
  name: string;
}

type PersonB =  PersonA & Person

5、type 与 interface 检查规则不同

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

// type 定义的类型别名，只要包含部分就不会报错

const per:Person = {
  name: 'Andy'
}

interface 定义的接口类型，必须包含所有必选项属性，可以没有job类型，因job类型是可选项

interface PersonA {
  name: string;
  age: number;
  job?:string;
}

const perB:PersonA = {
  name: 'Andy',
  age: 20
}

官网推荐我们要使用interface定义接口类型，并且interface可以满足绝多数场景使用，并会严格检查定义的描述对象是否符合接口类型，有助于提高代码质量规范编码，但是type的容错率更高，对于复杂的对象，可以使用type声明多种类型