使用可选 id 操作 Flow 泛型类型列表

Question

我想要一个函数，它接受一个数组，其中包含可能具有id 属性的对象。该函数将删除具有id 的第一个对象，并且它匹配函数的第二个参数。

这是我的存根：

// @flow

function removeFromArrayByObjectId<T: {id?: string}>(array: Array<T>, id: any): Array<T> {
  for (let i = 0; i < array.length; i++) {
    if (array[i].id && array[i].id === id) { 
      array.splice(i, 1);
      break;
    }
  }
  return array;
}

export {
  removeFromArrayByObjectId,
};

当我通过 arr 定义为（下）我得到 ​​p>

type Obj = { id: string, value: string };
const arr: Array<Obj> = [obj1, obj2];

无法使用绑定到array 的数组字面量调用removeFromArrayByObjectId，因为字符串[1] 与数组element.Flow(InferError) 的属性id 中的未定义[2] 不兼容

但是，当我从 id? 中删除 ? 时，它可以正常工作。我期望某些数组将包含没有id 的元素，因此希望它是可选的。有什么建议吗？

Answer 1

该错误与Why can't `{ a: string }` flow into `{ a?: string }` 中提到的错误非常相似。本质上，Flow 并不知道removeFromArrayByObjectId 不会操纵array 的元素（例如，删除一个属性）。您需要将 T 标记为“只读”，以便 Flow 知道该函数不会这样做。

function removeFromArrayByObjectId<T: $ReadOnly<{id?: string}>>(array: Array<T>, id: any): Array<T> {
  for (let i = 0; i < array.length; i++) {
    if (array[i].id && array[i].id === id) { 
      array.splice(i, 1);
      break;
    }
  }
  return array;
}

type Obj = { id: string, value: string };
declare var obj1: Obj;
declare var obj2: Obj;
const arr: Array<Obj> = [obj1, obj2];
const modified_arr: Array<Obj> = removeFromArrayByObjectId(arr);

Try Flow