如何指定 Flowjs 中所需的两个道具之一？答案

【问题标题】：How to specify one of two props required in Flowjs?如何指定 Flowjs 中所需的两个道具之一？
【发布时间】：2017-01-27 14:54:04
【问题描述】：

我有各种 React 组件，当传入不同的 props 时，它们可以具有不同的功能。我经常遇到一些分支逻辑，如果存在 prop1，则做一件事，但如果存在 prop2，则做其他事情。

一个示例可以是一个元素的两个更改处理程序，其输入采用不同的参数。

有没有办法在 Flowjs 中指定需要两个处理程序之一？

【问题讨论】：

我认为您的问题应该适用于您的 Flow 代码所针对的任何环境，包括但不限于 React 和其他所有环境。排除 React 的问题标题和正文是否更有意义？我只是建议，仅此而已。

标签： flowtype

【解决方案1】：

枚举怎么样：

type Props = {
  ['prop1' | 'prop2']: string,
}

【讨论】：

【解决方案2】：

幸运的是，你想要的 Flow 类型注解可以应用在 React 之外的上下文中。一般来说，如果你想要一个异或类型检查，你可以这样做：

type Something = {
    prop1: number,
    prop2?: null
}

type Another = {
    prop1?: null,
    prop2: number
}

function foo(parameter: Something | Another) {

}

foo({ prop1: 10 }); // Good
foo({ prop2: 10 }); // Good
foo({ prop1: 10, prop2: 10 }); // Bad

如果你想要一个包容性或类型检查，你可以这样做：

type Something = {
    prop1: number,
    prop2?: null
}

type Another = {
    prop1?: null,
    prop2: number
}

type SomethingAndAnother = {
    prop1: number,
    prop2: number
}

function foo(parameter: Something | Another | SomethingAndAnother) {

}

foo({ something: 10, prop1: 10 }); // Good
foo({ something: 10 }); // Bad
foo({ prop1: 10 }); // Good
foo({ prop2: 10 }); // Good
foo({ prop1: 10, prop2: 10 }); // Good

在 React 中，您可以在 props 属性上定义类型，如下所示：

class TodoList extends React.Component {
  props: Something | Another;

  render(): React.Element {
    return (
      // ....
    )
  }
}

【讨论】：