【TypeScript】中关于 { 声明合并 } 的使用及注意事项

概念

在TS中,如果定义了多个相同命名的函数,接口或者class 类,那么它们会自动合并成一个类型

在这里插入图片描述

函数的合并:

前面章节讲解的函数重载就是使用了定义多个函数的类型进行合并:

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {if (typeof x === 'number') {return Number(x.toString().split('').reverse().join(''));} else if (typeof x === 'string') {return x.split('').reverse().join('');}
}

接口的合并:

interface Cat {name: string
}
interface Cat {age: number
}let obj: Cat = {name: "小花",age: 12
}
console.log(obj);  //{name: '小花', age: 12}

注意
合并时,如果出现同名的属性,类型必须要保持唯一一致

interface Cat {name: string
}
interface Cat {age: number,name:number  //此处,类型不唯一,会报错    //报错:后续属性声明必须属于同一类型。属性“name”的类型必须为“string”,但此处却为类型“number”。
}

接口中方法的继承,也是同理

interface Cat {name: string,alert(s: string, y: string): string
}
interface Cat {age: number,name: string,alert(s: string, y: string): string
}let obj: Cat = {name: "小花",age: 12,alert(perim, item) {return perim + item}}
console.log(obj.alert("吃饭", "睡觉"));    //吃饭睡觉

类的合并规则与接口的合并规则也要保持一致。


总结

以上就是在 TS 中有关在声明类型的时候,同名的类型规则会触发合并,不过也要注意其中的一些注意事项。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/29933.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在家构建您的迷你聊天Chat gpt

推荐:使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 什么是指令遵循模型? 语言模型是机器学习模型,可以根据句子的前一个单词预测单词概率。如果我们向模型请求下一个单词,并将其递减地反馈给模型以请求更多单词&#xff…

css3背景渐变

1.线性渐变 <style>.box {width: 200px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;}.box1 {background-image: linear-gradient(green, yellow, red);}/* 右上 */.box2 {background-image: linear-gradient(to right top, green, yellow, re…

【前端 | CSS】aligin-items与aligin-content的区别

align-items 描述 CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式 align-items是针对每一个子项起作用&#xff0c;它的基本单位是每一个子项&#xff0c;在所有情况下都有效果&…

js案例:1.简单计算器

目录 一.效果图 二.实现思路 整体思路 ​ 1.关键是dom操作 ​ 2.设置点击事件 3.数据类型的隐式转换和赋值 三.完整代码 一.效果图 二.实现思路 整体思路 1.关键是dom操作 通过 document.getElementById(id) 获取html中的dom元素 每一个html标签都是一个对象&…

java【native关键字】

描述&#xff1a; native只能修饰方法&#xff0c;表示这个方法的方法体代码不是用java语言实现的&#xff0c;而是由c/c语言编写的。但是对于java程序员来说&#xff0c;可以当作java的方法一样正常去调用它&#xff0c;或者子类重写它 语法&#xff1a; 用在方法的返回值类…

【腾讯云 Cloud Studio 实战训练营】一个新的趋势已来

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…

二分法的应用

文章目录 什么是二分法&#x1f3ae;二分查找的优先级二分查找的步骤&#x1f4a5;图解演示&#x1f9e9; 代码演示&#x1fad5;python程序实现&#x1f408;‍⬛C程序实现&#x1f415;‍&#x1f9ba;C程序实现&#x1f42f;Java程序实现&#x1f433; 非常规类二分查找&…

vue3 - 使用reactive定义响应式数据进行列表赋值时,视图没有更新的解决方案

文章目录 1&#xff0c;问题2&#xff0c;原因3&#xff0c;解决方案一、再封装一层数据&#xff0c;即定义属性名&#xff0c;在后期赋值的时候&#xff0c;对此属性进行直接赋值三、使用数组的splice来直接更改原数组三、使用 ref 来定义数据 1&#xff0c;问题 在Vue 3.0 中…

【VS Code插件开发】通用功能(二)

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;2022年度博客之星前端领域TOP 2&#xff0c;前端领域优质作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步…

word横向页面侧面页码设置及转pdf后横线变竖线的解决方案

在处理材料的时候&#xff0c;会遇到同一个文档里自某一页开始&#xff0c;页面布局是横向的&#xff0c;这时候页码要设置在侧面&#xff0c;方法是双击页脚&#xff0c;然后在word工具栏上选择“插入”——>“文本框”——>“绘制竖版文本框”&#xff0c;然后在页面左…

Python-OpenCV中的图像处理-几何变换

Python-OpenCV中的图像处理-几何变换 几何变换图像缩放图像平移图像旋转仿射变换透视变换 几何变换 对图像进行各种几个变换&#xff0c;例如移动&#xff0c;旋转&#xff0c;仿射变换等。 图像缩放 cv2.resize() cv2.INTER_AREAv2.INTER_CUBICv2.INTER_LINEAR res cv2.r…

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测 桥梁作为交通运输的重要节点&#xff0c;其安全性一直备受关注。不同于其他建筑物&#xff0c;桥梁所处的环境复杂多变&#xff0c;同时&#xff0c;其所需承受的负荷也相对较大&#xff0c;这就需要对桥梁的安全进…

北京多铁克FPGA笔试题目

1、使用D触发器来实现二分频 2、序列检测器&#xff0c;检测101&#xff0c;输出1&#xff0c;其余情况输出0 module Detect_101(input clk,input rst_n,input data, //输入的序列output reg flag_101 //检测到101序列的输出标志 );parameter S0 2d0;S1 2d1;S2 2d2;S4 …

2023-08-07 LeetCode每日一题(反转字符串)

2023-08-07每日一题 一、题目编号 344. 反转字符串二、题目链接 点击跳转到题目位置 三、题目描述 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、…

SpringBoot3文件管理

标签&#xff1a;上传.下载.Excel.导入.导出&#xff1b; 一、简介 在项目中&#xff0c;文件管理是常见的复杂功能&#xff1b; 首先文件的类型比较多样&#xff0c;处理起来比较复杂&#xff0c;其次文件涉及大量的IO操作&#xff0c;容易引发内存溢出&#xff1b; 不同的…

redis的配置和使用、redis的数据结构以及缓存遇见的常见问题

目录 1.缓存 2.redis不仅仅可以做缓存&#xff0c;只不过说他的大部分场景&#xff0c;是做缓存。本地缓存重启后缓存里的东西就没有了&#xff0c;但是redis有。 3.redis有几个特性:查询快&#xff0c;但是是放到内存里的〈断电或者重启&#xff0c;数据就丢了)&#xff0c…

Vue组件化开发思想;Vue的全局组件;Vue的局部组件;Vue的开发模式和解析;Vue CLI安装和使用;Vue项目的创建方式–Vite

目录 1_Vue组件化开发思想1.1_认识组件化开发1.2_Vue的组件化1.3_注册组件的方式 2_Vue的全局组件3_Vue的局部组件4_Vue的开发模式和解析4.1_Vue的开发模式4.2_单文件的特点4.3_如何支持SFC4.4_VSCode对SFC文件的支持 5_Vue CLI安装和使用5.1_Vue CLI脚手架5.2_Vue CLI 安装和使…

基于react-native的简单消息确认框showModel

基于react-native的简单消息确认框showModel 效果示例图组件代码ShowModel/index.jsx使用案例device.js安装线性渐变色 效果示例图 组件代码ShowModel/index.jsx import React, {forwardRef, useImperativeHandle, useState} from react; import {View,Text,Modal,TouchableOp…

06微服务间的通信方式

一句话导读 微服务设计的一个挑战就是服务间的通信问题&#xff0c;服务间通信理论上可以归结为进程间通信&#xff0c;进程可以是同一个机器上的&#xff0c;也可以是不同机器的。服务可以使用同步请求响应机制通信&#xff0c;也可以使用异步的基于消息中间件间的通信机制。同…

Vue2-简介、模板语法、数据绑定、MVVM、数据代理、事件处理

&#x1f954;&#xff1a;成功之后就能光明正大地回望所有苦难 VUE-Day1 Vue简介1、Vue是什么&#xff1f;2、谁开发的&#xff1f; 发展历程&#xff1f;3、Vue的特点4、容器和实例、实例中的el和data总结 Vue模板语法插值语法指令语法 数据绑定1.单向数据绑定&#xff08;v-…