TypeScript中的方法重载详解 - CSDN文库

165 浏览量更新于2023-03-03 收藏 65KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

TypeScript中的方法重载详解中的方法重载详解

主要给大家介绍了关于TypeScript中方法重载的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者

使用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 {

return data.filter(message => message.type === query);

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38600460

粉丝: 5
资源: 955

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈