TS中最常见的声明合并(接口合并)

目录
  • 1.合并接口
    • 1.1非函数成员
    • 1.2函数成员

前言：

今天要讲的内容还是TS相关，在TS中最常见的声明合并：接口合并

在聊接口合并之前，我们先来聊聊声明合并

声明合并:

什么是声明合并？

其实很好理解，TS中的声明合并，指的就是编译器会针对同名的声明合并为一个声明

合并的结果:

合并后的声明会同时拥有原先两个或多个声明的特性

疑问:
那这两个或多个具体指的是什么呢？

其实得分几种情况讲，今天要讲的就是其中一种，最简单也最常见的声明合并类型是接口合并

1.合并接口

我们刚刚说了，“合并后的声明会同时拥有原先两个或多个声明的特性”

接口的合并也是一样，它会将双方的成员放到一个同名的接口里

需要注意的是，接口里面的成员有函数成员和非函数成员，情况有所不一样

1.1非函数成员

例如：

interface Box {
    height: number;
}

interface Box {
    width: number;
}

let box: Box = {height: 2, width: 3};

上述代码中，定义了两个名字都为Box的同名接口（实际开发中，可能来源于不同的文件），最终里面的东西会混合在一起

但是需要注意，以上情况里头的成员都是唯一的，但如果两个接口中同时声明了同名的非函数成员且它们的类型不同，则编译器会报错

1.2函数成员

而对于里头的函数成员来说，每个同名函数声明都会被当成这个函数的一个重载。而且当接口 A与后来的接口 A合并时，后面的接口具有更高的优先级

例如官方的例子：

interface Cloner {
    clone(animal: Animal): Animal;
}

interface Cloner {
    clone(animal: Sheep): Sheep;
}

interface Cloner {
    clone(animal: Dog): Dog;
    clone(animal: Cat): Cat;
}

最终会合并成一个声明，如下:

interface Cloner {
    clone(animal: Dog): Dog;
    clone(animal: Cat): Cat;
    clone(animal: Sheep): Sheep;
    clone(animal: Animal): Animal;
}

需要注意两点：

  • 每组接口里的声明顺序不变
  • 各组接口之间的顺序是后来的接口重载出现在靠前位置

不过也有例外：当出现特殊的函数签名时。 如果签名里有一个参数的类型是单一的字符串字面量（比如，不是字符串字面量的联合类型），那么它将会被提升到重载列表的最顶端

到此这篇关于TS中最常见的声明合并(接口合并)的文章就介绍到这了,更多相关TS中的接口合并内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • TS中最常见的声明合并(接口合并)

    目录 1.合并接口 1.1非函数成员 1.2函数成员 前言: 今天要讲的内容还是TS相关,在TS中最常见的声明合并:接口合并 在聊接口合并之前,我们先来聊聊声明合并 声明合并: 什么是声明合并? 其实很好理解,TS中的声明合并,指的就是编译器会针对同名的声明合并为一个声明 合并的结果: 合并后的声明会同时拥有原先两个或多个声明的特性 疑问: 那这两个或多个具体指的是什么呢? 其实得分几种情况讲,今天要讲的就是其中一种,最简单也最常见的声明合并类型是接口合并 1.合并接口 我们刚刚说了,"合并后的

  • JavaScript中数组常见操作技巧

    JavaScript中数组常见操作技巧

    效果图如下所示: Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[]创建新数组,除非想要创建指定长度的数组 // good var arr = []; var arr = ['red', 'green', 'blue']; var arr = [ ['北京', 90], ['上海', 50], ['广州', 50] ]; // bad var arr = new Object()

  • 如何对PHP程序中的常见漏洞进行攻击（上）

    如何对PHP程序中的常见漏洞进行攻击(上) 翻译:analysist(分析家) 来源:http://www.china4lert.org 如何对PHP程序中的常见漏洞进行攻击(上) 原著:Shaun Clowes <http://www.securereality.com.au/> 翻译:analysist <http://www.nsfocus.com/> 之所以翻译这篇文章,是因为目前关于CGI安全性的文章都是拿Perl作为例子,而专门介绍ASP,PHP或者JSP安全性的文章则

  • 在Koa.js中实现文件上传的接口功能

    文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

  • vue中Axios的封装与API接口的管理详解

    vue中Axios的封装与API接口的管理详解

    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso

  • mysql中各种常见join连表查询实例总结

    mysql中各种常见join连表查询实例总结

    本文实例讲述了mysql中各种常见join连表查询.分享给大家供大家参考,具体如下: 通常我们需要连接多个表查询数据,以获取想要的结果. 一.连接可以分为三类: (1) 内连接:join,inner join (2) 外连接:left join,left outer join,right join,right outer join,union,union all (3) 交叉连接:cross join 二.准备需要演示的表: CREATE TABLE `a` ( `id` int(11) uns

  • js中不常见的运算符与操作符总结

    javaScript常用运算符和操作符总结 类别 操作符 算术操作符 +. –. *. /. %(取模) 字符串操作符 + 字符串连接   +=字符串连接复合 布尔操作符 !. &&.  ||  一元操作符 ++ . -- .  +(一元加).    -(一元减) 关系比较操作符 < . <= . >  .>=.   !=  . == .  === .  !==  按位操作符 ~ 按位非    &按位与     | 按位或     ^按位异或    <

  • Java中的多态、抽象类和接口详解

    目录 1.多态 1.1 向上转型 1.2 向下转型 1.3 实现多态的条件 1.4多态的特点与使用 1.5多态的应用 以父类类型作为方法的参数 使用父类型作为方法的返回值 1.6 多态的注意点 2.抽象类 2.1 abstract关键字 2.2 抽象方法和普通方法的区别 2.3 抽象类和普通类的区别 2.4 本质 2.5 抽象类局限 3.接口 3.1 定义接口 3.2 使用接口 3.3 实现多个接口 3.4 jdk8接口新特性 1.多态 一个特定类型的变量,可以引用多个不同类型的对象,并且能自动

  • 老生常谈java数组中的常见异常

    数组的定义 1:单个变量能存储信息 2:用来存储具有相同数据类型的数据集合,可以使用共同的名字来引用数组中存储的数据. 特点 数组可以存储任何类型的数据,包括原始数据类型和引用数据类型,但是一旦指定了数组的类型之后,就只能用来存储指定类型的数据. 数组的使用 声明一个数组变量来存放该数组 java基础之数组中的常见异常,代码如下 package com.atguigu.java; /* * 数组中的常见异常: * 1. 数组角标越界的异常:ArrayIndexOutOfBoundsExcetio

  • vue3+ts中ref与reactive指定类型实现示例

    目录 ref 的基础特性 如何在ref中指定类型 reactive isRef.isReactive toRef.toRefs.toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} conso

随机推荐