typescript中type和interface的区别有哪些

目录

• 前言
• type和interface的相同点
• type和interface的不同点
• 结语
• 如何选择 Interface 、 Type
• 总结

前言

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

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的话，就会是 覆盖 的效果，始终只有最后一个type生效

结语

其实在typescript里，还有很多容易搞混淆的概念，如 extends 和 implements 等，还有一些高级概念，如 泛型。这些都是在ts里必知必会的东西，因此一定要细抠这些知识点

ts给我们的代码带来健壮性的同时，也引入了更多的概念和知识，因此需要我们不断地学习。在今后我也准备多输出一些关于ts的文章，加深自己对于ts的理解，同时也可以帮助到喜欢看我文章的朋友，好啦，就写到这里啦，over！

如何选择 Interface 、 Type

虽然 官方 中说几乎接口的所有特性都可以通过类型别名来实现，但建议优先选择接口，接口满足不了再使用类型别名，在 typescript 官网 Preferring Interfaces Over Interps 有说明，具体内容如下：

大多数时候，对象类型的简单类型别名的作用与接口非常相似

interface Foo { prop: string }

type Bar = { prop: string };

但是，一旦你需要组合两个或多个类型来实现其他类型时，你就可以选择使用接口扩展这些类型，或者使用类型别名将它们交叉在一个中（交叉类型），这就是差异开始的时候。

• 接口创建一个单一的平面对象类型来检测属性冲突，这通常很重要！  而交叉类型只是递归的进行属性合并，在某种情况下可能产生 never 类型
• 接口也始终显示得更好，而交叉类型做为其他交叉类型的一部分时，直观上表现不出来，还是会认为是不同基本类型的组合。
• 接口之间的类型关系会被缓存，而交叉类型会被看成组合起来的一个整体。
• 最后一个值得注意的区别是，在检查到目标类型之前会先检查每一个组分。

出于这个原因，建议使用接口/扩展扩展类型而不是创建交叉类型。

- type Foo = Bar & Baz & {
-     someProp: string;
- }
+ interface Foo extends Bar, Baz {
+     someProp: string;
+ }

简单的说，接口更加符合 JavaScript 对象的工作方式，简单的说明下，当出现属性冲突时：

// 接口扩展
interface Sister {
    sex: number;
}

interface SisterAn extends Sister {
    sex: string;
}
// index.ts(5,11): error TS2430: Interface 'SisterAn' incorrectly extends interface 'Sister'.
//  Types of property 'sex' are incompatible.
//    Type 'string' is not assignable to type 'number'.

// 交叉类型
type Sister1 = {
    sex: number;
}

type Sister2 = {
    sex: string;
}

type SisterAn = Sister1 & Sister2;
// 不报错，此时的 SisterAn 是一个'number & string'类型，也就是 never

总结

到此这篇关于typescript中type和interface区别的文章就介绍到这了,更多相关typescript type和interface区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！