TypeScript中的方法重载详解
171 浏览量
2020-12-01
07:04:49
上传
评论 1
收藏 93KB PDF 举报
TypeScript中的方法重载详解中的方法重载详解
前言前言
方法重载（overload）在传统的静态类型语言中是很常见的。JavaScript 作为动态语言， 是没有重载这一说的。一是它的参数没有类型的
区分，二是对参数个数也没有检查。虽然语言层面无法自动进行重载，但借助其动态的特性，我们可以在代码中手动检查入参的类型，或
者通过 arguments 获取到参数个数，从而实现根据不同的入参做不同的操作。
比如有一个获取聊天消息的方法，根据传入的参数从数组中查找数据。如果入参为数字，则认为是 id，然后从数据源中找对应 id 的数据并
返回，否则当成类型，返回这一类型的消息。
function getMessage(query) {
if (typeof query === "nunber") {
return data.find(message => message.id === query);
} else {
return data.filter(message => message.type === query);
}
}
TypeScript 中，假如我们的消息数据为如下结构：
type MessageType = "string" | "image" | "audio";
type Message = {
id: number;
type: MessageType;
content: string;
};
上面获取数据的方法等价于：
function getMessage(
query: number | MessageType
): Message[] | Message | undefined {
if (typeof query === "number") {
return data.find(message => message.id === query);
} else {
return data.filter(message => message.type === query);
}
}
这样做一是类型书写上比较丑陋，二是没有发挥出 TypeScript 类型检查的优势，这里我们是可以根据入参的类型明确知道返回的类型的，
即如果传入的是 id，返回的是单个数据或undefined，如果是根据类型查找，返回的是数组。而现在调用方法后，得到的类型太过宽泛，这
和使用 any 做为返回没多大差别。
函数返回类型不够紧凑
因为类型的不明朗，返回的结果都不能直接操作，需要进行类型转换后才能继续。
const result1 = getMessage("audio");
/** 不能直接对 result1 调用数组方法 */
console.log((result1 as Message[]).length);
const result2 = getMessage(1);
if (result2) {
/** 不能对 result2 直接访问消息对象中的属性 */
console.log((result2 as Message).content);
}
重载的实现重载的实现
这时候可通过提供多个函数类型的声明来解决上面的问题，最后得到的结果就是间接实现了函数的重载。当然这个重载只是 TypeScript 编
译时的。
function getMessage(id: number): Message | undefined;
function getMessage(type: MessageType): Message[];
function getMessage(query: any): any {
if (typeof query === "number") {
return data.find(message => message.id === query);
} else {
资源评论
weixin_38736760
- 粉丝: 5
- 资源: 980
最新资源
- 微信小程序源码 车源宝 二手车交易平台 源码下载
- 微信小程序源码 实现 城市切换 demo 根据城市首字母排序城市 选择城市 源码下载
- VMware7.0虚拟机硬盘无法编辑，无法连接到Profile-Driven Storage Service
- arm64内核的mongo镜像
- 基于stm32f103c单片机+MPU6050+0.96英寸OLED显示屏双柄遥控器硬件（原理图+PCB）工程文件.zip
- 整理的关于少儿编程的学习路径，以及如何在小升初，初升高和大学充分的利用起来编程经验的优势
- nhit完整源码+论文学习
- 足球比赛结果统计表2006-2011年大约28W场比赛
- 基于PHP+mysql的社区交流系统（源代码）
- yolov5,SSD 可能使用到的一些代码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
