Type 和 Interface 傻傻分不清楚?

网站建设3年前发布
33 0 0

如果你简历上的技能有写 TypeScript,那么面试官可能会问你 type 和 interface 之间有什么区别?你知道怎么回答这个问题么?如果不知道的话,那看完本文也许你就懂了。,类型别名 type 可以用来给一个类型起个新名字,当命名基本类型或联合类型等非对象类型时非常有用:,在 TypeScript 1.6 版本,类型别名开始支持泛型。我们工作中常用的 Partial、Required、Pick、Record 和 Exclude 等工具类型都是以 type 方式来定义的。,而接口 interface 只能用于定义对象类型,Vue 3 中的 App 对象就是使用 interface 来定义的:,由以上代码可知,在定义接口时,我们可以同时声明对象类型上的属性和方法。了解 type 和 interface 的作用之后,我们先来介绍一下它们的相似之处。,1、类型别名和接口都可以用来描述对象或函数。,在以上代码中,我们通过 type 关键字为对象字面量类型和函数类型分别取了一个别名,从而方便在其他地方使用这些类型。,2、类型别名和接口都支持扩展。,类型别名通过 &(交叉运算符)来扩展,而接口通过 extends 的方式来扩展。,此外,接口也可以通过 extends 来扩展类型别名定义的类型:,同样,类型别名也可以通过 &(交叉运算符)来扩展已定义的接口类型:,了解完 type 和 interface 的相似之处之后,接下来我们来介绍它们之间的区别。,1、类型别名可以为基本类型、联合类型或元组类型定义别名,而接口不行。,2、同名接口会自动合并,而类型别名不会。,利用同名接口自动合并的特性,在开发第三方库的时候,我们就可以为使用者提供更好的安全保障。比如 webext-bridge 这个库,使用 interface 定义了 ProtocolMap 接口,从而让使用者可自由地扩展 ProtocolMap 接口。,之后,在利用该库内部提供的 onMessage 函数监听自定义消息时,我们就可以推断出不同消息对应的消息体类型。,使用类型别名的场景:,使用接口的场景:

© 版权声明

相关文章