如何获得多个联合接口类型的属性值？

Question

我有以下代码：

  const arrayFromForm: IFirst[] | ISecond[] | IThird[]; // = ... it's initialized
  const arrayDB: IFirst[] | ISecond[] | IThird[]; // = ... it's initialized
  const entitiesFromDb = arrayDB.filter(
    (entity: IFirst | ISecond | IThird) =>
      !(arrayFromForm.map(({ id }) => id))
      .includes(entity.id)
  );

它给了我一个错误："The map expression is not callable"。

如果我错了，请纠正我，但我认为这是因为它不知道在联合中的所有接口中都有一个名为id的属性。

我以前使用过类型保护，但是我认为您只能在一个联合中的两个类型之间创建一个类型保护，因为您必须返回一个布尔值？

我想用类型记录(用户定义的类型保护、类型、实例等)来解决这个问题，但我不确定这是否可能，不是吗？instanceof类型保护不能为接口创建，对吗？

什么是好的解决方案？

编辑:我刚刚解决了一个接口的问题，它具有联合中的接口所具有的属性，我只是用新的接口更改了类型联合。这不是很好的解决方案，因为我希望在类型联合中使用不同接口中的特定方法/属性。

所以我不会删除这个问题，因为知道是否存在用户定义的类型联合(其中包含超过2种类型)的类型保护是有帮助的。

Answer 1

这似乎是打字稿中的一个已知问题。见这里。

但现在你可以这样做：

const arrayFromForm: IFirst[] | ISecond[] | IThird[]; // = ... it's initialized
const entitiesFromDb = arrayDB.filter(
  (entity: IFirst | ISecond | IThird) =>
    !(arrayFromForm as {id: number}[]).map(item => item.id).includes(entity.id) // Pay attention to the brackets
);

我们将arrayFromForm转换为一个适当的类型，而不是类型的联合。这与你想出的解决方案很接近，但我认为用这种方式维护它更容易。

Answer 2

试试这个:-

const elementsIds = arrayFromForm.filter(arrItem => arrItem.id).map((item)=>item.id); 
  const entitiesFromDb = arrayDB.filter(
    (entity: IFirst | ISecond | IThird) =>
      !elementsIds.includes(entity.id)
  )