type和interface的区别知多少?

前端Q

共 2080字,需浏览 5分钟

 ·

2022-03-17 11:07

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

在typescript里面,有两个概念十分容易混淆,那便是 type 和 interface,它俩都可以用来表示 接口,但是实际使用上会存在一些差异,因此本篇文章就准备聊聊它俩,彻底弄清它俩的联系与区别,废话不多说,开搞!

ppx.jpg

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不能做到的事情

  1. type可以定义 基本类型的别名,如 type myString = string
  2. type可以通过 typeof 操作符来定义,如 type myType = typeof someObj
  3. type可以申明 联合类型,如 type unionType = myType1 | myType2
  4. type可以申明 元组类型,如 type yuanzu = [myType1, myType2]

接下来聊聊interface可以做到,但是type不可以做到的事情

  1. 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



往期推荐


第一次拿全年年终奖的前端女程序员的2021
【前端初/中级面经】中小型公司面试时都会问些什么,VUE出境最高?
45 个 Git 经典操作场景,专治不会合代码

最后


  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

点个在看支持我吧
浏览 29
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报