TypeScript函数重载

知识点：

TypeScript函数重载

TypeScript 中的函数重载

示例：

type MessageType = "string" | "image" | "audio";

type Message = {
    id: number;
    type: MessageType;
    content: string;
};

const data = [
    {
        id: 1,
        type: "image",
        content: "a image"
    },
    {
        id: 2,
        type: "string",
        content: "a 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);
    }
}

const result = getMessage("string");

这里面存在几个问题

getMessage 返回参数存在多个类型，这种返回值无法直接使用，需要指定其具体类型，像这种返回值并没有价值。
在函数内部，返回一个值时，还存在返回值不能同时满足所有定义的返回类型会出现报错提示
在使用函数时，参数的提示信息，不够具体，并且无法表达出输入不同类型的不同输出类型

使用重载改进

type MessageType = "string" | "image" | "audio";

type Message = {
    id: number;
    type: MessageType;
    content: string;
};

const data = [
    {
        id: 1,
        type: "image",
        content: "a image"
    },
    {
        id: 2,
        type: "string",
        content: "a string"
    }
];

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);
    }
}