文档章节

TypeScript基础入门之声明合并(一)

durban
 durban
发布于 10/16 22:17
字数 891
阅读 6
收藏 0

转发 TypeScript基础入门之声明合并(一)

声明合并

介绍

TypeScript中的一些独特概念描述了类型级别的JavaScript对象的形状。
TypeScript特别独特的一个例子是"声明合并"的概念。
在使用现有JavaScript时,理解此概念将为您提供优势。
它还为更高级的抽象概念打开了大门。

出于本文的目的,"声明合并"意味着编译器将使用相同名称声明的两个单独声明合并到单个定义中。
此合并定义具有两个原始声明的功能。
可以合并任意数量的声明;
它不仅限于两个声明。


基本概念

在TypeScript中,声明在三个组中的至少一个中创建实体:名称空间,类型或值。
命名空间创建声明创建一个命名空间,其中包含使用点符号表示法访问的名称。
类型创建声明就是这样做的:它们创建一个可以使用声明的形状显示并绑定到给定名称的类型。
最后,创建值的声明会创建在输出JavaScript中可见的值。

Declaration Type Namespace Type Value
Namespace X   X
Class   X X
Enum   X X
Interface   X  
Type Alias   X  
Function     X
Variable     X

了解每个声明创建的内容将帮助您了解执行声明合并时合并的内容。

合并接口

最简单,也许是最常见的声明合并类型是接口合并。
在最基本的层面上,合并机械地将两个声明的成员连接到具有相同名称的单个接口。

interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

let box: Box = {height: 5, width: 6, scale: 10};

接口的非功能成员应该是唯一的。
如果它们不是唯一的,则它们必须属于同一类型。
如果接口都声明了具有相同名称但具有不同类型的非函数成员,则编译器将发出错误。

对于函数成员,同名的每个函数成员都被视为描述同一函数的重载。
值得注意的是,在接口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;
}

请注意,每个组的元素保持相同的顺序,但组本身与稍后排序的后续重载集合在一起。

此规则的一个例外是专门签名。
如果签名的参数类型是单个字符串文字类型(例如,不是字符串文字的并集),那么它将被冒泡到其合并的重载列表的顶部。

例如,以下接口将合并在一起:

interface Document {
    createElement(tagName: any): Element;
}
interface Document {
    createElement(tagName: "div"): HTMLDivElement;
    createElement(tagName: "span"): HTMLSpanElement;
}
interface Document {
    createElement(tagName: string): HTMLElement;
    createElement(tagName: "canvas"): HTMLCanvasElement;
}

由此产生的合并声明文件将如下:

interface Document {
    createElement(tagName: "canvas"): HTMLCanvasElement;
    createElement(tagName: "div"): HTMLDivElement;
    createElement(tagName: "span"): HTMLSpanElement;
    createElement(tagName: string): HTMLElement;
    createElement(tagName: any): Element;
}

未完待续...

© 著作权归作者所有

共有 人打赏支持
durban
粉丝 98
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript基础入门之声明合并(三)

转发 TypeScript基础入门之声明合并(三) 声明合并 将命名空间与类,函数和枚举合并 命名空间足够灵活,也可以与其他类型的声明合并。 为此,命名空间声明必须遵循它将与之合并的声明。 生成的...

durban
10/18
0
0
TypeScript基础入门之Javascript文件类型检查(三)

转发 TypeScript基础入门之Javascript文件类型检查(三) 继续上篇文章【TypeScript基础入门之Javascript文件类型检查(二)】 支持JSDoc 下面的列表概述了使用JSDoc注释在JavaScript文件中提供类...

durban
10/31
0
0
TypeScript基础入门之命名空间(三)

转载 TypeScript基础入门之命名空间(三) 继续上篇文章[TypeScript基础入门之命名空间(二)] 别名 另一种可以简化名称空间使用方法的方法是使用import q = x.y.z为常用对象创建较短的名称。 不...

durban
10/07
0
0
TypeScript 之父简介:TS Anders Hejlsberg: Introducing TypeScript

Anders Hejlsberg: Introducing TypeScript https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分......

程序员诗人
2017/11/16
0
0
TypeScript基础入门 - 函数 - this(二)

转载 TypeScript基础入门 - 函数 - this(二) 项目实践仓库 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 后面自己在练习的时候可以这样使用 ...

durban
08/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue-router的HTML5 History 模式设置

VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方...

peakedness丶
15分钟前
0
0
Dubbo 源码分析 - 服务引用

1. 简介 在上一篇文章中,我详细的分析了服务导出的原理。本篇文章我们趁热打铁,继续分析服务引用的原理。在 Dubbo 中,我们可以通过两种方式引用远程服务。第一种是使用服务直联的方式引用...

小刀爱编程
25分钟前
0
0
redis_集群原理

数据分布 数据分布理论 分布式系统数据分区规则:常见的有哈希分区和顺序分区两种。 哈希分区 常见的hash分区规则有:节点取余分区,一致性hash分区,虚拟槽分区. redis数据分区 redis集群功能...

grace_233
25分钟前
0
0
数据库(mysql)业务用户表批量造测试用户密码数据[方案]

博主这几天在配合公司测试做商城商品秒杀场景的压测,由于秒杀需要登录,所以需要为测试创建多个用户密码。此项任务可能在今后还会遇到,先做个笔录。同时,让小伙伴们需要的时候也可以有个参...

em_aaron
40分钟前
1
0
JDK_jvisualvm访问远程weblogic服务

1.首先需要在远程的weblogic的域下面,找到/bin/ setDomainEnv.sh ,需要在此文件下加入如下内容: -Dcom.sun.management.jmxremote.port=1090 ##端口号可以自己指定 -Dcom.sun.management.j...

四年级小学生
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部