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

Question

我正在阅读有关函数重载的信息。本质上它们是什么，假设您正在创建 3 个具有相同名称的函数，它们传递 3 个不同的参数和返回类型。我是 TS 的新手，我想知道以下问题：传递联合类型和返回联合类型不会相同吗？还是完全不同？

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

重载：

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

使用联合类型：

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

}

Answer 1

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

这是重载的样子。重载签名中的最后一行不是重载之一，它描述了实现的参数。有时你会看到any，但你也可以在这里使用联合。

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 示例现在可以使用。我们告诉 typescript “查看参数的类型 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 Link

Answer 2

对于函数参数类型，函数重载可以比联合类型和泛型类型更具体。

现实世界的例子：

createActivity 函数用于创建具有不同输入参数的三种类型的活动。 CreateRenewalActivityParams、CreateInsureActivityParams 和 CreateTrafficGenerationActivityParams。

interface CreateActivityParams {
  activityCode: string;
  activityName: string;
  activityDesc: string;
  activityType: number;
  activityTypeName: string;
  startTime: string;
  endTime: string;
  paymentType: string | null;
}
interface CreateRenewalActivityParams extends CreateActivityParams {
  installmentCases: any[];
}

interface CreateInsureActivityParams extends CreateActivityParams {
  cases: any[];
}

interface CreateTrafficGenerationActivityParams extends CreateActivityParams {
  cases: any[];
}
export async function createActivity(data: CreateTrafficGenerationActivityParams): Promise<boolean>;
export async function createActivity(data: CreateInsureActivityParams): Promise<boolean>;
export async function createActivity(data: CreateRenewalActivityParams): Promise<boolean>;
export async function createActivity(data: CreateActivityParams): Promise<boolean> {
  return true;
}

// TSC throw error
createActivity({
  activityCode: 'test code',
  activityName: 'test name',
  activityDesc: 'test desc',
  activityType: 8,
  activityTypeName: 'test type name',
  startTime: '2021-07-20 00:00:00',
  endTime: '2025-07-20 23:59:59',
  paymentType: null,
  cases: [
    {
      pictureCode: 'test pic code',
      authDesc: null,
    },
    {
      pictureCode: 'test pic code',
      authDesc: null,
    },
  ],
  installmentCases: [],
});


export async function createActivityUnion(data: CreateTrafficGenerationActivityParams | CreateInsureActivityParams | CreateRenewalActivityParams) {
    return true;
}

// TSC pass
createActivityUnion({
  activityCode: 'test code',
  activityName: 'test name',
  activityDesc: 'test desc',
  activityType: 8,
  activityTypeName: 'test type name',
  startTime: '2021-07-20 00:00:00',
  endTime: '2025-07-20 23:59:59',
  paymentType: null,
  cases: [
    {
      pictureCode: 'test pic code',
      authDesc: null,
    },
    {
      pictureCode: 'test pic code',
      authDesc: null,
    },
  ],
  installmentCases: [],
});

export async function createActivityGeneric<Data extends CreateActivityParams>(data: Data) {
    return true;
}

// TSC pass
createActivityGeneric({
  activityCode: 'test code',
  activityName: 'test name',
  activityDesc: 'test desc',
  activityType: 8,
  activityTypeName: 'test type name',
  startTime: '2021-07-20 00:00:00',
  endTime: '2025-07-20 23:59:59',
  paymentType: null,
  cases: [
    {
      pictureCode: 'test pic code',
      authDesc: null,
    },
    {
      pictureCode: 'test pic code',
      authDesc: null,
    },
  ],
  installmentCases: [],
})

现在，我们希望函数的参数在同时包含 installmentCases 和 cases 字段时报告类型不兼容错误，因为它们属于不同的活动类型，这可以使用函数重载来完成。

我们可以用上述三种参数类型为createActivity函数编写三个更具体的重载签名和一个CreateActivityParams类型的通用实现签名。

TypeScript Playground

Answer 3

只是扩展 @Linda Paiste 关于泛型类型的评论

const gNum: number = generic(0);

这基本上是在说

function generic<0>(a: 0): 0;

这有时可能不是您想要的。所以在使用泛型时，你要传入一个类型参数：

const gNum: number = generic<number>(0);