如何用TypeScript正确实现多类型数组的按ID过滤删除方法？

问题场景 #

我有一个Basket类，包含vegetables（BaseVegetable[]类型）和fruits（BaseFruit[]类型）两个字段，两个数组的元素类型不同，但都拥有共同的id字段。希望实现removeItem方法，根据传入的id和ItemType枚举值过滤数组，移除对应id的元素。

当前实现代码：

enum ItemType {
  VEGETABLES = 'vegetables',
  FRUITS = 'fruits'
}

class BaseVegetable {
  id: string = '';
  color: string = '';
}
class BaseFruit {
  id: string = '';
  description?: any;
}

class Basket {
  vegetables: BaseVegetable[] = [];
  fruits: BaseFruit[] = [];

  removeItem(id: string, type: ItemType) {
    this[type] = this[type].filter(item => id !== item.id);
  }
}

遇到的错误 #

This expression is not callable.
Each member of the union type '{ (predicate: (value: BaseVegetable, index: number, array: BaseVegetable[]) => value is S, thisArg?: any): S[]; (predicate: (value: BaseVegetable, index: number, array: BaseVegetable[]) => unknown, thisArg?: any): BaseVegetable[]; } | { ...; }' has signatures, but none of those signatures are compatible with each other.(2349)

同时filter回调中的item被推断为any，但单独赋值const a = this[type]时，能得到正确的BaseVegetable[] | BaseFruit[]类型。

错误原因 #

TypeScript对联合类型的方法调用会做严格的签名兼容性检查。BaseVegetable[]和BaseFruit[]的filter方法签名虽然结构一致，但回调函数的参数类型（BaseVegetable vs BaseFruit）不兼容，导致TypeScript无法确定应该使用哪个签名，因此抛出调用错误。此外，由于无法确定元素具体类型，item被降级为any，失去类型校验能力。

解决方案 #

方案1：类型断言缩小范围 #

通过类型断言明确数组类型，让filter能正确推断参数：

class Basket {
  vegetables: BaseVegetable[] = [];
  fruits: BaseFruit[] = [];

  removeItem(id: string, type: ItemType) {
    const items = this[type] as (BaseVegetable | BaseFruit)[];
    this[type] = items.filter(item => id !== item.id) as typeof this[type];
  }
}

先将数组断言为包含共同属性的联合数组，过滤后再断言回原类型，保证赋值类型匹配。

方案2：泛型约束统一处理 #

定义包含id的接口，用泛型约束统一所有带id的类型：

interface HasId {
  id: string;
}

enum ItemType {
  VEGETABLES = 'vegetables',
  FRUITS = 'fruits'
}

class BaseVegetable implements HasId {
  id: string = '';
  color: string = '';
}
class BaseFruit implements HasId {
  id: string = '';
  description?: any;
}

class Basket {
  vegetables: BaseVegetable[] = [];
  fruits: BaseFruit[] = [];

  removeItem(id: string, type: ItemType) {
    const items = this[type] as HasId[];
    this[type] = items.filter(item => id !== item.id) as typeof this[type];
  }
}

通过HasId接口明确共同属性，让TypeScript清晰识别元素的可操作字段。

方案3：分支判断直接处理 #

通过枚举值分支，分别处理两个数组，完全规避联合类型问题：

class Basket {
  vegetables: BaseVegetable[] = [];
  fruits: BaseFruit[] = [];

  removeItem(id: string, type: ItemType) {
    if (type === ItemType.VEGETABLES) {
      this.vegetables = this.vegetables.filter(item => id !== item.id);
    } else {
      this.fruits = this.fruits.filter(item => id !== item.id);
    }
  }
}

这种方式类型推断最准确，代码逻辑也更直观，适合字段数量不多的场景。

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