Question

我正在尝试实现一个React组件，该组件包含一个选项列表并显示它们的id和name。我希望该组件可重用，因此我定义了一个接口Option以确保始终提供必填字段。

问题来了：如果我传递的任何类型的字段多于2个{ id, name, /* anything */}，Flow就会抱怨。这样无法在Flow中使用接口吗？

这是最小的相关代码：

interface Option {
  id: string,
  name: string
}

const List = (options: Option[]) => {
  options.forEach(o => null)
}

type ImplementsOption = {
  id: string,
  name: string,
  description: string
}

const plans: ImplementsOption[] = []

List(plans)

错误：

无法通过绑定到{{1}的List来调用plans，因为属性options在description 1中丢失，但在{{1}中却存在} [2]在数组元素中。

尝试投射：

Option

以及类：

ImplementsOption

似乎没有任何作用！

已经有一个playground，其中包含所有这些摘要。

Answer 1

想象一下，我们有一个ImplementsOption：[{ id: 'id', name: 'name', description: 'description' }, ...]的列表。现在，我们将其传递给具有签名List的{{1}}函数。从Option[] => void的角度来看，这是完全有效的，因为List是ImplementOption的超类型。但是，Option函数中不能保证它不会修改传入的列表。因此，该函数可以向列表中添加类型为List的元素，这将是有效的。对于Option无效，但对于Option[]无效。

要解决此问题，您可以输入ImplementsOption[]作为plans，这告诉Flow $ReadOnlyArray<Option>函数不会修改元素（try flow）。

参考问题#4425，#4483或#5206以获取更多信息。

如何在Flow中使用接口键入函数参数

1 个答案: