有这样的一个场景
根据ID或者文件类型查找聊天记录
下面是我们的代码
type MessageType = 'image' | 'vedio' | string
type Message = {
id: number,
type: MessageType,
sendMessage: string
}
let message:Message[] = [
{
id: 1,
type: 'image',
sendMessage: '张三犯法了吗'
},
{
id: 2,
type: 'vedio',
sendMessage: '李四犯法了吗'
},
{
id: 3,
type: 'image',
sendMessage: '王五犯法了吗'
}
]
function getMessage (type: number | MessageType ):Message | Message[] | undefined {
if(typeof type === "number") {
return message.find((v)=> v.id === type)
} else {
return message.filter((v)=> v.type === type)
}
}
// 将这个函数返回的值转换成我们一直定义函数的返回值
let msg = (<Message>getMessage(1)).sendMessage
如果我们这样取函数的返回值是会报错的
使用下面代码的写法
对函数的返回值做一个类型限定
let msg = (<Message>getMessage(1)).sendMessage
接下来我们使用函数重载来实现
// 根据ID查询记录
// 根据类型查询记录
function getMessage(type: number):Message // 根据ID查询记录
function getMessage(type: MessageType):Message[] // 根据类型查询记录
function getMessage (type: any ):Message | Message[] | undefined {
if(typeof type === "number") {
return message.find((v)=> v.id === type)
} else {
return message.filter((v)=> v.type === type)
}
}
// 将这个函数返回的值转换成我们一直定义函数的返回值
let msg = (getMessage(1)).sendMessage
下面有这样的一种要求
根据类型查询记录,但是限制了记录的数量
function getMessage(type: number):Message
function getMessage(type: MessageType, readNum: number):Message[]
function getMessage (type: any, readNum: number = 2 ):Message | Message[] | undefined {
if(typeof type === "number") {
return message.find((v)=> v.id === type)
} else {
return message.filter((v)=> v.type === type).splice(0, readNum)
}
}
// 将这个函数返回的值转换成我们一直定义函数的返回值
console.log(getMessage("image", 3));
函数重载有一下几种规则
- 有一个实现签名 + 一个或多个重载签名合成
- 但外部调用函数重载定义的函数时,只能调用重载签名,不能调用实现签名
- 调用重载签名的函数时,会根据传递的参数来判断你调用的是哪一个函数
- 只有一个函数体,只有实现签名配备了函数体,所有的重载签名都只有签名, 没有配备函数体
函数重载的优势
- 结构分明
- 各司其职,自动提示方法和属性
- 更利于功能拓展