没有合适的资源?快使用搜索试试~ 我知道了~
TypeScript中的方法重载详解
2 下载量 97 浏览量
2020-10-17
04:18:56
上传
评论
收藏 65KB PDF 举报
温馨提示
试读
3页
主要给大家介绍了关于TypeScript中方法重载的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用TypeScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
资源详情
资源评论
资源推荐
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);
}
weixin_38600460
- 粉丝: 5
- 资源: 955
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0