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

概念

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

函数的合并:

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

typescript 复制代码
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('');
    }
}

接口的合并:

typescript 复制代码
interface Cat {
    name: string
}
interface Cat {
    age: number
}

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

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

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

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

typescript 复制代码
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 中有关在声明类型的时候,同名的类型规则会触发合并,不过也要注意其中的一些注意事项。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!


🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!


🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】


相关推荐
JaysonJin几秒前
一文搞懂 Vue Router 的钩子函数和实战用法!
前端
DoraBigHead4 分钟前
for...in 和 for...of 的终极区别:一文彻底解决你的困惑
前端·javascript·面试
FairyDiana7 分钟前
【JavaScript】✨0、1与"true"的恋爱物语:JS类型转换大揭秘
javascript·面试
JaysonJin7 分钟前
教你如何用 localStorage+Vue 状态管理玩转数据持久化!
前端·面试
0wioiw08 分钟前
Flutter基础(前端教程⑦-Http和卡片)
前端·flutter·http
小猫由里香8 分钟前
CSS `filter` 属性详解:图像滤镜效果全解析
前端
ice8511 分钟前
LLM流式输出实现
前端·人工智能·面试
柳如烟@16 分钟前
零基础,使用Idea工具写一个邮件报警程序
java·服务器·前端
用户408128120038123 分钟前
音频格式
前端
胡gh23 分钟前
React组件实用,每个组件各司其职,成为信息管理大师
前端·react.js