使用静态字段为React组件创建流类型

Question

我期待像这样的React组件：

class MySetting extends React.Component<{}> {
  static name = 'My Setting';

  render() {
    return (<div>{'setting here'}</div>);
  }
}

class Widget extends React.Component<{}> {
  static settings = [ MySetting ]

  render() {
    return (<div>{'widget here'}</div>);
  }
}

我想为它们制定流程定义，这基本上意味着：

• 具有静态场name的反应组分
• 具有上述类型的静态场settings的反应组分

我该怎么做呢？我尝试了几件事：

interface Settings {
  name: string;
}

export type SettingsComponent = React.ComponentType<Object> & Settings

interface Widget {
  settings: Array<SettingComponent>;
}

export type WidgetComponent = React.ComponentType<Object> & Widget

要么

declare class SettingsComponent<Props, State = void> extends React$Component<Props, State> {
  static name: string;
}

declare class WidgetComponent<Props, State = void> extends React$Component<Props, State> {
  static settings: Array<Class<SettingsComponent<any, any>>>
}

但它们不可避免地会抛出各种流程错误，这些错误很难解读。有一种普遍接受的方式吗？

Answer 1

看起来更多的研究我发现了一个解决方案（使用[email protected]）。

答案是flow的$Subtype<T>实用程序类型：

export type SettingsComponent = {
  name: string;
} & $Subtype<React.ComponentType<Object>>

export type VisualizationComponent = {
  settings: Array<SettingsComponent>;
} & $Subtype<React.ComponentType<Object>>

虽然我会添加，但是当我使用缺少静态字段的组件或访问不存在的字段时，我之前的流错误消失并且错误确实出现，我的编辑器（Atom + Nuclide）不再显示该类型的工具提示。