莎莎分不清interface,风儿也分不清type

207 阅读2分钟

在TS里面,有两个概念十分容易混淆,那便是 type 和 interface,它俩都可以用来表示 接口,到底啥时候使用interface,啥时候使用type,今天来说一说,还请大家一块唠唠

1. 定义上的区别:

- interface:定义参数或者方法数据类型

- type:可以给一个或者多个数据类型取别名

2.范围上:

interface:只能定义对象 type:可以定义基础类型,对象,交叉,联合,元组类型

就我个人理解:我觉得interface 更像是一个模具,里面的元器件一个不能少(可选的例外),type更像是啥呢,说不出来的味道,还请大家看到能提示下,拜托了

3.继承的(或者说是扩展的方式)
interface 是使用extendsimplements 从而继承接口或者类

type 是使用& 来继承(或者说是交叉来时成员合并)

但是

interface 可以重复定义,如果定义的属性有相同,后面覆盖前面的,如果interface定义的是基础类型,那么可能会产生never类型

type定义重复的,会报错
interface Sister {
    sex: number;
}
 
interface SisterAn extends Sister {
    sex: string;
}
// index.ts(5,11): error TS2430: Interface 'SisterAn' incorrectly extends interface 'Sister'.
//  Types of property 'sex' are incompatible.
//    Type 'string' is not assignable to type 'number'.
type Sister1 = {
    sex: number;
}
 
type Sister2 = {
    sex: string;
}
 
type SisterAn = Sister1 & Sister2;
// 不报错,此时的 SisterAn 是一个'number & string'类型,也就是 never

两者直接也都可以相互继承(扩展)

    name: string;
};
interface Student extends Person {
    studentNo: number
}

interface Person {
    name: string;
}
type Student = Person & {
    stuNo: number;
}

4.type 能使用 in 关键字生成映射类型,但 interface 不行


type Keys = 'firstname' | 'lastName';

type Dude = {
  [key in Keys]: string;
};

const test:  = {
  firstname: 'Tome',
  lastName: 'jeck',
};

相同点:

都可以描述对象,也都可以扩展

那什么时候使用type 什么时候使用interface呢

我个人觉得哈:除了定义简单类型的数据还需要进行扩展的时候不能使用interface,其他的,我觉得都可以使用interface

感觉没有头尾,后面想起来啥在唠唠啥吧,或者大家给个啥建议更好的理清顺序取书写,谢谢了