TypeScript 中的函数重载与使用联合类型

Question

我正在阅读有关函数重载的内容。从本质上讲，您正在创建 3 个具有相同名称的函数，它们传递 3 个不同的参数和返回类型。我是 TS 的新手，我想知道以下问题：传递联合类型和返回联合类型不会相同吗？或者是完全不同的东西？

这就是我脑海中出现的例子。这行不行？

超载：

function f1(a: string) {
}
function f1(a: number) {
}

使用联合类型：

function f1(a: string | number):string | number  {

}

Answer 1

函数重载将特定的输入类型映射到特定的返回类型。使用联合，您只知道返回是有效类型之一，但您失去了输入和输出之间的关联。这可能是问题，也可能不是问题，具体取决于您使用该功能的方式和位置。但这就是区别。

这是重载时的样子。签名的最后一行不是重载之一，它描述了实现的类型。有时您会看到any，但您也可以在此处使用 union 。

function overloaded(a: string): string
function overloaded(a: number): number
function overloaded(a: any): any {
    return a;
}

不同的参数根据它们匹配的重载返回特定类型。

const oNum: number = overloaded(0);
const oStr: string = overloaded("");
const oBool = overloaded(true); //error

在我们的联合中，两种输入类型都只返回联合，因此我们失去了特殊性。

function union(a: string | number): string | number {
    return a;
}

const uNum: string | number = union(0);
const uStr: string | number = union("");
const uBool = union(true); //error

还有第三个选项是typescript generics。这使我们能够在接受无限多种类型的同时保持特异性。该boolean示例现在可以运行了。我们告诉打字稿“查看参数的类型a并调用它T”。然后我们得到这个类型变量T，我们可以在返回类型中使用它。在这里，我们只是直接返回相同的类型T，但它比你能做的要多得多。

function generic<T>(a: T): T {
    return a;
}

const gNum: number = generic(0);
const gStr: string = generic("");
const gBool: boolean = generic(true);

Typescript Playground 链接