TypeScript 之 函数重载

为什么使用函数重载【好处和应用场景】

一组具有相同名字，不同参数列表，和返回值无关，并且具有一个实现签名和多个重载签名的函数。

type Message = {
  id: number;
  type: MessageType;
  sendmessage: string;
};
enum MessageType {
  "Image" = ”Image“,
  "Audio" = "Audio",
};
let messages: Message[] = [
  {
    id: 1,
    type: MessageType.Image,
    sendmessage: "你好啊，今晚我们一起回家吧。1",
  },
  {
    id: 2,
    type: MessageType.Audio,
    sendmessage: "你好啊，今晚我们一起回家吧。2",
  },
  {
    id: 3,
    type: MessageType.Image,
    sendmessage: "你好啊，今晚我们一起回家吧。3",
  },
  {
    id: 4,
    type: MessageType.Audio,
    sendmessage: "你好啊，今晚我们一起回家吧。4",
  },
  {
    id: 5,
    type: MessageType.Image,
    sendmessage: "你好啊，今晚我们一起回家吧。5",
  },
];

function searchMsg(condition: MessageType | number): Message | undefined | Message[] {
  if (typeof condition === "number") {
    return messages.find(msg => condition === msg.id);
  } else {
    return messages.filter(msg => condition === msg.type);
  }
}

// console.log((searchMsg(1) as Message).sendmessage);
// (searchMsg(MessageType.Image) as Message[]).forEach(element => {
//   console.log(element);

// })

export { };

上方代码想查看返回的对象或者使用数组的方法，由于函数的返回类型太多，必须使用类型断言才能获取想要的属性和方法，但是类型断言并不是最优解。而且由于函数返回的类型有可能会增加，不利于阅读。

下方的函数重载解决了这两个问题。一组具有相同名字，不同参数列表，和返回值无关，并且具有一个实现签名和多个重载签名的函数。

实现签名的参数和返回值都必须兼容重载签名

type Message = {
  id: number;
  type: MessageType;
  sendmessage: string;
};
enum MessageType {
  "Image" = "Image",
  "Audio" = "Audio",
};
let messages: Message[] = [
  {
    id: 1,
    type: MessageType.Image,
    sendmessage: "你好啊，今晚我们一起回家吧。1",
  },
  {
    id: 2,
    type: MessageType.Audio,
    sendmessage: "你好啊，今晚我们一起回家吧。2",
  },
  {
    id: 3,
    type: MessageType.Image,
    sendmessage: "你好啊，今晚我们一起回家吧。3",
  },
  {
    id: 4,
    type: MessageType.Audio,
    sendmessage: "你好啊，今晚我们一起回家吧。4",
  },
  {
    id: 5,
    type: MessageType.Image,
    sendmessage: "你好啊，今晚我们一起回家吧。5",
  },
];

function searchMsg(condition: MessageType): Message[]; // 重载签名
function searchMsg(condition: number): Message | undefined;
function searchMsg(condition: MessageType | number) { // 实现签名
  if (typeof condition === "number") {
    return messages.find(msg => condition === msg.id);
  } else {
    return messages.filter(msg => condition === msg.type);
  }
}

console.log(searchMsg(3));

searchMsg(MessageType.Audio).forEach(msg => {
  console.log(msg);
})

export { };