TS函数重载

有这样的一个场景
根据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));

函数重载有一下几种规则

1. 有一个实现签名 + 一个或多个重载签名合成
2. 但外部调用函数重载定义的函数时，只能调用重载签名，不能调用实现签名
3. 调用重载签名的函数时，会根据传递的参数来判断你调用的是哪一个函数
4. 只有一个函数体，只有实现签名配备了函数体，所有的重载签名都只有签名， 没有配备函数体

函数重载的优势

1. 结构分明
2. 各司其职，自动提示方法和属性
3. 更利于功能拓展