文档章节

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

durban
 durban
发布于 2018/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
粉丝 99
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript基础入门之声明合并(三)

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

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

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

durban
2018/10/31
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入门完全指南(基础篇)

本文来源于团队内分享。TypeScript的官方文档虽然较为全面,但通读下来却要耗时不少;另外,TypeScript中文资料本身也比较缺乏,本文可作为准备尝试TypeScript的同学入门使用,涵盖了上手Typ...

KianM
2018/12/07
0
0
TypeScript 入门

一、TypeScript    TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,兼容JavaScript,可以载入JS代码然后运行。它与JavaScript相比进步的地方包括:加入注释...

笔阁
2015/10/22
831
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 舔狗是没有好下场的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听什么# #今天听这个# 分享 Nirvana 的歌曲《Smells Like Teen Spi...》 《Smells Like Teen Spi...》- Nirvana 手机党少...

小小编辑
57分钟前
11
4
Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
2
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
5
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部