TS中type和interface的区别解析

 更新时间:2023年07月06日 11:46:59   作者:矮袋鼠和猫  
对于type来说,更多的是对类型的一种复用,比如在项目中需要用到一些比较复杂的或者书写起来很长的类型,而对于 interface来说,它是正儿八经的用来定义接口类型(约束数类型和属性)的,且接口类型是支持继承和声明合并的,感兴趣的朋友跟随小编一起看看吧

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

概念:

type:类型别名,为类型创建一个新名称。它并不是一个类型,只是一个别名。

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

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

interface:接口,TS 设计出来主要用于定义对象类型,可以对对象的形状进行描述。

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

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

语法如下:

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

区别:

1.interface可以重复声明,type定义后不能重复声明

 2.interface可以通过“extends”来继承接口,这样既高效又不用重新定义。而type只能通过&来实现类似于继承的功能

3.

type 能够表示非对象类型, 而 interface 则只能表示对象类型

type

  • 可以定义基本类型别名,如type StringType = string
  • 可以声明联合类型,如 type paramType = number | string;
  • 可以声明元组类型,如type arrType = [string, string, number]

定义对象时严谨的来说,type 是引用,而 interface是定义。

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

相关文章

  • js实现获取div坐标的方法

    js实现获取div坐标的方法

    这篇文章主要介绍了js实现获取div坐标的方法,通过调用jQuery插件实现获取div元素坐标的功能,非常简单实用,需要的朋友可以参考下
    2015-11-11
  • Bootstrap模态框调用功能实现方法

    Bootstrap模态框调用功能实现方法

    这篇文章主要介绍了Bootstrap模态框调用功能实现方法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • Openlayers测量距离与面积的实现方法

    Openlayers测量距离与面积的实现方法

    这篇文章主要为大家详细介绍了Openlayers测量距离与面积的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 如何解决java.lang.NumberFormatException: null异常

    如何解决java.lang.NumberFormatException: null异常

    这篇文章主要介绍了如何解决java.lang.NumberFormatException: null异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • uniapp中的picker选择器的几种使用场景

    uniapp中的picker选择器的几种使用场景

    本文主要介绍了uniapp中的picker选择器的几种使用场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Javascript作用域(局部和全局作用域)详细介绍

    Javascript作用域(局部和全局作用域)详细介绍

    作用域是当前的执行上下文,值和表达式在其中“可见”或可被访问,本文主要介绍了Javascript局部作用域和全局作用域,文中有详细的代码示例,具有一定的参考价值,需要的朋友可以借鉴一下
    2023-06-06
  • 原生JavaScript写出Tabs标签页的实例代码

    原生JavaScript写出Tabs标签页的实例代码

    这篇文章主要介绍了原生JavaScript写出Tabs标签页的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript实现弹出窗口效果

    JavaScript实现弹出窗口效果

    这篇文章主要为大家详细介绍了JavaScript实现弹出窗口效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • JavaScript中的声明提升实例详解

    JavaScript中的声明提升实例详解

    这篇文章主要为大家介绍了JavaScript中的声明提升实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 在TypeScript中泛型的使用方法及场景

    在TypeScript中泛型的使用方法及场景

    泛型是TypeScript中的一个强大特性,它可以增加代码的灵活性和安全性,在本文中,我将向您介绍泛型的使用方法和场景,并展示如何使用类型约束,需要的朋友可以参考下
    2023-08-08

最新评论