javascript - 使用静态字段为 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
的 React 组件
• 具有上述类型的静态字段 settings 的 React 组件

我该怎么做？我尝试了一些类似的事情:

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

经过更多研究，我似乎找到了解决方案(使用 flow-bin@0.63.1 )。

答案是流的 $Subtype<T> 实用程序类型:

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

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

虽然我要补充一点，虽然我以前的流程错误已经消失，并且在使用缺少静态字段的组件或访问不存在的字段时确实会出现错误，但我的编辑器(Atom + Nuclide)不会显示工具提示再打字。