TS基础篇:type和interface的区别


在 TS 中,typeinterface相似,都可以给类型命名并通过该名字来引用表示的类型。不过它们之间是存在一些差别的,我们在使用时也需要注意一些特殊场景。

type

type关键字是声明类型别名的关键字。它的语法如下:

type AliasName = Type;
  • type:声明类型别名的关键字
  • AliasName:类型别名的名称
  • Type:类型别名关联的具体类型

interface

通过关键字 interface可以定义一个接口类型。它能合并众多类型声明至一个类型声明。

接口声明只存在于编译阶段,在编译后生成的 JS 代码中不包含任何接口代码。

interface InterfaceName {
    TypeMember;
    TypeMember;
    //   ...
}
  • interface:定义接口的关键字
  • InterfaceName:接口名,首字母需要大写
  • TypeMember:接口的类型成员

不同点

  • type 在声明类型别名之后实际上是一个赋值操作,它需要将别名与类型关联起来。也就是说类型别名不会创建出一种新的类型,它只是给已有类型命名并直接进行引用。interface 是定义了一个接口类型。
  • type 能够表示非对象类型, 而 interface 则只能表示对象类型。
  • interface 可以继承其他的接口、类等对象类型, type 不支持继承。
  • interface 接口名总是会直接显示在编译器的诊断信息和代码编辑器的智能提示中,而 type 的名字只在特定情况下才会显示出来——只有当类型别名表示数组类型、元组类型以及类或者接口的泛型实例类型时才展示。
  • interface具有声明合并的行为,而 type 不会,这也意味着我们可以通过声明合并的方式给 interface 定义的类型进行属性扩展。
  • type可以通过 typeof来获取实例的类型从而进行赋值操作

相同点

都可以用来定义 对象 或者 函数 的结构,而严谨的来说,type引用,而 interface定义

对于 type 来说,更多的是对类型的一种复用,比如在项目中需要用到一些比较复杂的或者书写起来很长的类型。我们可以使用 type来直接引用该类型:

type FType = boolean | string | number;

而对于 interface来说,它是正儿八经的用来定义接口类型(约束数类型和属性)的,且接口类型是支持继承和声明合并的。

所以在对于对象结构的类型定义上,建议尽可能的使用 interface,而在合适的场景使用 type


文章作者: 弈心
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 弈心 !
评论
  目录