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区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于JavaScript实现文本一键复制和长按复制功能

    基于JavaScript实现文本一键复制和长按复制功能

    本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解,如果您只需要解决问题,请阅读第一、二部分即可,如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分
    2023-10-10
  • Bootstrap框架安装使用详解

    Bootstrap框架安装使用详解

    这篇文章主要为大家详细介绍了Bootstrap框架的安装使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Javascript Echarts空气质量地图效果详解

    Javascript Echarts空气质量地图效果详解

    这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10
  • 简单的js分页脚本

    简单的js分页脚本

    js分页脚本实现代码。
    2009-05-05
  • 在JS中判断两个对象是否相等方法详解

    在JS中判断两个对象是否相等方法详解

    在JavaScript中,判断两个对象是否相等有多种方法,取决于你对相等的定义以及对象属性的类型,本文将介绍几种常见的方法,感兴趣的同学可以参考阅读
    2023-05-05
  • JavaScript实现的商品抢购倒计时功能示例

    JavaScript实现的商品抢购倒计时功能示例

    这篇文章主要介绍了JavaScript实现的商品抢购倒计时功能,可实现分秒级别的实时显示倒计时效果,涉及js日期时间计算与页面元素动态操作相关技巧,需要的朋友可以参考下
    2017-04-04
  • js实现网页随机验证码

    js实现网页随机验证码

    这篇文章主要为大家详细介绍了js实现网页随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • javascript操作元素的常见方法小结

    javascript操作元素的常见方法小结

    这篇文章主要介绍了javascript操作元素的常见方法,结合实例形式总结分析了JavaScript针对页面元素动态获取、赋值、动态操作相关使用技巧,需要的朋友可以参考下
    2019-11-11
  • Peer.js 构建视频聊天应用使用详解

    Peer.js 构建视频聊天应用使用详解

    这篇文章主要为大家介绍了Peer.js 构建视频聊天应用使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • js string 转 int 注意的问题小结

    js string 转 int 注意的问题小结

    Javascript将string类型转换int类型的过程中总会出现不如意的问题,下面为大家介绍下js string转int的一些注意的问题,感兴趣的朋友可以参考下
    2013-08-08

最新评论