TypeScript如何解决同一函数处理不同类型数组时find调用报错

错误原因 #

你遇到的类型报错是因为当数组被定义为 Item[] | Task[] 联合类型时，TypeScript 无法自动推导联合数组的成员方法参数类型，回调函数的参数obj类型无法被正确识别，导致find方法被判定为不可调用。

解决方案 #

方案1：提取公共基础接口（最推荐） #

将两个接口的公共属性抽离为父接口，原有接口继承该父接口，函数入参直接声明为父接口数组类型：

// 提取公共属性
interface Countable {
  id: number;
  count: number;
}

export interface Item extends Countable {
  other: number
}
export interface Task extends Countable {
  more: string
}

// 入参直接用公共接口数组
function UpdateCount(items: Countable[], id: number, count: number) {
  let item = items.find(obj => obj.id === id);
  if (item) {
    item.count = count;
  }
}

方案2：使用泛型约束 #

如果不想修改原有接口定义，可以用泛型约束入参数组的成员必须包含id和count属性：

// 原有接口保持不变
export interface Item {
  id: number,
  count: number,
  other: number
}
export interface Task {
  id: number,
  count: number,
  more: string
}

// 泛型约束成员类型
function UpdateCount<T extends {id: number; count: number}>(items: T[], id: number, count: number) {
  let item = items.find(obj => obj.id === id);
  if (item) {
    item.count = count;
  }
}

方案3：类型断言（不推荐） #

临时绕过类型检查，缺点是会丢失部分类型校验能力，仅适合临时调试场景：

function UpdateCount(items: Item[] | Task[], id: number, count: number) {
  // 断言为公共结构数组
  let item = (items as Array<{id: number; count: number}>).find(obj => obj.id === id);
  if (item) {
    item.count = count;
  }
}

内容的提问来源于stack exchange，提问作者Kez