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

问题描述

我正在尝试实现一个包含选项列表并显示它们的 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)

错误：

无法调用绑定到，List因为属性1中缺少但存在于数组元素的 [2] 中。plansoptionsdescriptionOption ImplementsOption

尝试铸造：

List((plans: Option[]))

还有类：

class ComplexOption implements Option {
  id: string
  name: string
}

const complexOptions: ComplexOption[] = []

List(complexOptions)

似乎没有任何效果！

已经有一个包含所有这些片段的游乐场。

标签： reactjsflowtype

解决方案

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

要解决此问题，您可以键入plansa $ReadOnlyArray<Option>，它告诉 Flow 该List函数不会修改元素（尝试 flow）。

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

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

问题描述

解决方案

推荐阅读