前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
在typescript里面,有两个概念十分容易混淆,那便是 type 和 interface,它俩都可以用来表示 接口,但是实际使用上会存在一些差异,因此本篇文章就准备聊聊它俩,彻底弄清它俩的联系与区别,废话不多说,开搞!
![ca2cbcc545282427227cee36ad8a83ca.png](https://i-blog.csdnimg.cn/blog_migrate/8d9be7af48fe40544e285950378376ae.png)
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不能做到的事情
type可以定义 基本类型的别名,如
type myString = string
type可以通过 typeof 操作符来定义,如
type myType = typeof someObj
type可以申明 联合类型,如
type unionType = myType1 | myType2
type可以申明 元组类型,如
type yuanzu = [myType1, myType2]
接下来聊聊interface可以做到,但是type不可以做到的事情
interface可以 声明合并,示例如下
interface test {
name: string
}
interface test {
age: number
}
/*
test实际为 {
name: string
age: number
}
*/
复制代码
这种情况下,如果是type的话,就会报 重复定义 的警告,因此是无法实现 声明合并 的
这里特别感谢 酒薄不堪饮[1] 这位掘友,指出了此处之前存在的错误说法
结语
其实在typescript里,还有很多容易搞混淆的概念,如 extends 和 implements 等,还有一些高级概念,如 泛型。这些都是在ts里必知必会的东西,因此一定要细抠这些知识点
ts给我们的代码带来健壮性的同时,也引入了更多的概念和知识,因此需要我们不断地学习。在今后我也准备多输出一些关于ts的文章,加深自己对于ts的理解,同时也可以帮助到喜欢看我文章的朋友,好啦,就写到这里啦,over!
来自:Mr_Carl
https://juejin.cn/post/7059725643365220366
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持