TS中的type和interface

最新推荐文章于 2024-10-02 21:32:52 发布

BlueBlue_oO

最新推荐文章于 2024-10-02 21:32:52 发布

阅读量658

点赞数

分类专栏：代码那些事文章标签：前端 js

原文链接：https://juejin.cn/post/7059725643365220366

版权

代码那些事专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了TypeScript中Type和Interface的相似之处，如定义对象形状和函数，以及它们的继承机制。同时，指出了两者的关键区别：Type能定义基本类型别名、通过typeof获取类型、声明联合类型和元组类型，而Interface则支持声明合并。

摘要由CSDN通过智能技术生成

参考：https://juejin.cn/post/7059725643365220366

相同点：

接口定义 的两种不同形式，目的都是一样的，都是用来定义对象或者函数的形状

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

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

interface可以 声明合并

interface test {
    name: string
}
interface test {
    age: number
}

/*
    test实际为 {
        name: string
        age: number
    }
*/

这种情况下，如果是type的话，就会报 重复定义 的警告，因此是无法实现 声明合并 的