javascript - 解构 Flow 对象类型？

Question

我正在为 Apollo Client 生成 Flow 类型，我目前有这个:

type FetchModuleQuery = {|
  // Fetch single module
  module: ?{|
    // ID
    id: string,
    // Name
    name: string,
    // Fetch list of assignments for module
    assignments: ?Array<?{|
      // Created date
      createdAt: any,
      // ID
      id: string,
      // Name
      name: string
    |}>
  |}
|};

但是，这个数据位于我的父组件中<Component1 /> ，然后我像这样渲染它的子组件:

<Component2 assignments={this.props.module.assignments} />

这很好用；我正在做我需要做的所有检查来让 Flow 开心。但是，我想不出最干净的方式来输入我的 <Component2 /> ;理想情况下，我想使用这个现有的 FetchModuleQuery对象类型，而不是创建任何新的东西。

有什么想法吗？

Answer 1

IMO 最干净的方法是提取一个“助手”类型并使用它，就像 Ross Allen 的回答一样。

或者，您可以使用 $PropertyType实用程序类型。

type Component2Props = {
  assignments: $PropertyType<$PropertyType<FetchModuleQuery, 'module'>, 'assignments'>
}

这与 TypeScript 的 FetchModuleQuery["module"]["assignments"] 基本相同，Jonas W. 在评论中提出了建议。