Angular中Typescript联合类型数组调用重载方法匹配失败如何解决

问题根因 #

你遇到的报错是因为User接口中的text属性被定义为Array<string | number>类型，而你当前getText方法仅提供了接收纯string[]和纯number[]的两个重载，没有匹配联合类型数组的重载规则，因此传入user.text时类型校验不通过。

方案1：补充对应重载声明 #

在user.service.ts的getText方法中新增联合类型数组的重载即可：

import { Injectable } from "@angular/core";
@Injectable({
  providedIn: "root"
})
export class UserService {
  public getText(text: Array<string>): Array<string>;
  public getText(text: Array<number>): Array<number>;
  // 新增适配联合类型数组的重载
  public getText(text: Array<string | number>): Array<string | number>;
  public getText(text: Array<string | number>): Array<string | number> {
    return text;
  }
}

修改后三种输入类型都会匹配到对应的重载，返回值类型和输入保持完全一致。

方案2：使用泛型简化实现（更推荐） #

如果不需要写多个重载，用泛型可以更简洁的实现相同效果，适配所有符合约束的输入类型：

import { Injectable } from "@angular/core";
@Injectable({
  providedIn: "root"
})
export class UserService {
  public getText<T extends string | number>(text: T[]): T[] {
    return text;
  }
}

该写法会自动根据输入的数组类型推导返回值类型：输入string[]返回string[]，输入number[]返回number[]，输入联合类型数组也返回对应的联合类型数组，无需手动声明多重重载。

临时兼容方案 #

如果你的业务场景中可以确定user.text运行时全为字符串或者全为数字，也可以临时用类型断言缩小类型来匹配现有重载：

// 确定是字符串数组的场景
this.userService.getText(user.text as string[]);
// 确定是数字数组的场景
this.userService.getText(user.text as number[]);

注意这种方式依赖开发者自行保证运行时类型正确性，类型安全性低于前两种方案。

内容的提问来源于stack exchange，提问作者Konstantin Schütte