type和interface的区别知多少？

前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

在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

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

 》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持