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

【问题标题】：Create flowtype for React component with static fields使用静态字段为 React 组件创建流类型
【发布时间】：2018-01-11 22:57:19
【问题描述】：

我期待这样的 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>>>
}

但它们不可避免地会引发各种难以解读的流程错误。有没有普遍接受的方法？

【问题讨论】：

标签： javascript reactjs flowtype

【解决方案1】：

看起来我通过更多研究找到了解决方案（使用flow-bin@0.63.1）。

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

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

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

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

【讨论】：