Question

我正在为Apollo Client生成流类型，而我现在有这个：

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

您可以import and export Flow types使用类似于导入和导出实际模块的语法。对于您的情况，可以将assignments提取为另一种类型，并执行以下操作：

Component1.js ：

export type FetchModuleQueryAssignments = ?Array<?{|
  // Created date
  createdAt: any,
  // ID
  id: string,
  // Name
  name: string
|}>;

export type FetchModuleQuery = {|
  ...,
  assignments: FetchModuleQueryAssignments,
|};

Component2.js ：

import type { FetchModuleQueryAssignments } from './Component1';

Answer 2

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

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

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

这基本上与TypeScript的FetchModuleQuery["module"]["assignments"]（在评论中建议的 Jonas W。）相同。

分解Flow对象类型？

2 个答案: