欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2022-10-16 11:24:40|栏目:JavaScript代码|点击:

前言:

今天要讲的内容还是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;
}


需要注意两点:

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

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

上一篇:JS 获取滚动条高度示例代码

栏    目:JavaScript代码

下一篇:解决前后端交互数据出现精度丢失的多种方式

本文标题:TS中最常见的声明合并(接口合并)

本文地址:http://www.codeinn.net/misctech/216516.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有