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


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


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


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


相关推荐
3秒一个大几秒前
Vue 任务清单开发:数据驱动 vs 传统 DOM 操作
前端·javascript·vue.js
阿蒙Amon几秒前
JavaScript学习笔记:2.基础语法与数据类型
javascript·笔记·学习
an8695001几秒前
vue自定义组件this.$emit(“refresh“);
前端·javascript·vue.js
Avicli1 分钟前
Gemini3 生成的基于手势控制3D粒子圣诞树
前端·javascript·3d
GinoWi1 分钟前
HTML标签 - 列表标签
前端
o__A_A2 分钟前
渲染可配置报告模板+自适应宽度(vue3)
前端·vue.js
鹏北海2 分钟前
Vue 组件解耦实践:用回调函数模式替代枚举类型传递
前端·vue.js
San304 分钟前
拒绝做 DOM 的“搬运工”:从 Vanilla JS 到 Vue 3 响应式思维的进化
javascript·vue.js·响应式编程
JienDa4 分钟前
JienDa聊PHP:从Laravel到ThinkPHP的现代Web开发实践
前端·php·laravel
软件技术NINI7 分钟前
盒模型在实际项目中有哪些应用场景?
前端·css·html