Javascript 流式高阶组件（HOC）支柱类型保存

这一次我的头撞到墙上了。我正在尝试将flowtype合并到一些react项目中。在大多数情况下，打字似乎效果很好。然而，我正在使用一个库（react jss），它使用一个HOC将样式表类注入到组件中。问题是，这个模块没有流类型，因此它取消了我的组件上的任何道具验证，因为我的所有组件都是用这个HOC包装的

我已经能够根据我看到的一些github iUse添加一些类型，所以至少我知道我从react jss HOC获得了一个组件，但是从flow的角度来看，这个新组件没有与之相关的道具，所以我不会因为未能提供所需道具或错误类型的道具而出错（消除了流的许多好处）。以下是我复制粘贴的内容，以获得基本的react jss HOC定义：

declare type FunctionComponent<A> = (props: A) => ?React$Element<any>;

declare type ClassComponent<D, A, S> = Class<React$Component<D, A, S>>;

declare type Component<A> = FunctionComponent<A> | ClassComponent<any, A, any>;

declare type Fn1<A, B> = (a: A) => B;

declare type HOC<A, B> = Fn1<Component<A>, Component<B>>;

declare module 'react-jss' {
  declare module.exports: (styleSheet: Object) => HOC<A, B>;
}

declare-type-FunctionComponent=（props:A）=>？React$元素；
声明类型ClassComponent=Class；
声明类型组件=函数组件|类组件；
声明类型Fn1=（a:a）=>B；
声明类型HOC=Fn1；
声明模块'react jss'{
declare module.exports：（样式表：Object）=>HOC；
}

请记住react jss默认导出（injectStyles）的粗糙签名如下：

函数注入样式（样式表：AnObject）（组件：ReactComponent）：ReactComponent

您可以尝试以下定义：

declare module 'react-jss' {
  // Export these
  declare type FunctionComponent<P> = (props: P) => ?React$Element<any>;
  declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;

  declare type Klasses<CSS> = {
    [classname: $Keys<CSS>]: string,
  };

  declare type JSSProps<CSS> = {
    classes: Klasses<CSS>,
    sheet: {
      attached: boolean,
      classes: Klasses<CSS>,
      deployed: boolean,
      linked: boolean,
      options: Object,
      renderer: mixed,
      rules: mixed,
    },
  };

  declare type Injector = {
    <Props, State, DefaultProps, CSS>(component: ClassComponent<DefaultProps, Props, State>): ClassComponent<DefaultProps, $Diff<Props, JSSProps<CSS>>, void>;
    <Props, CSS>(component: FunctionComponent<Props>): FunctionComponent<$Diff<Props, JSSProps<CSS>>>;
  };

  declare function exports<Props, State, DefaultProps, CSS>(
    CSS: CSS,
  ): Injector
}

声明模块'react jss'{
//出口这些
声明类型FunctionComponent
=（props:P）=>？React$元素；
声明类型ClassComponent=Class；
声明类型Klass={
[classname:$Keys]：字符串，
};
声明类型JSSProps={
课程：克拉斯，
工作表：{
附：布尔，
课程：克拉斯，
部署：布尔，
链接：布尔，
选项：对象，
渲染器：混合，
规则：混合，
},
};
声明类型注入器={
（组件：ClassComponent）：ClassComponent；
（组件：FunctionComponent）：FunctionComponent；
};
声明函数导出(
CSS:CSS，
)：喷油器
}

请注意，导入注入组件时，flow会出现一些问题。使用类时，一切正常：

// Test.js
class Test extends React.Component<void, { text: string }, void> {
    ...
}
export const StyledTest = injectSheet(style)(Test)

// Main.js
...
render() {
    return <StyledTest /> // ERROR here, missing `text` prop
}

//Test.js
类测试扩展了React.Component{
...
}
export const StyledTest=injectSheet（样式）（测试）
//Main.js
...
render（）{
return//此处出错，缺少'text'属性
}

但对于函数组件，您需要显式键入它：

// Test.js
const Test = (props: { text: string }) => {
    ...
}
export const StyledTest: FunctionComponent<{ text: string }> = injectSheet(style)(Test) // Explicitly type this

// Main.js
...
render() {
     return <StyledTest /> // ERROR here, so it works!
}

//Test.js
常量测试=（属性：{text:string}）=>{
...
}
export const StyledTest:FunctionComponent=injectSheet（style）（Test）//显式键入此
//Main.js
...
render（）{
return//ERROR在这里，这样它就可以工作了！
}

我不确定这些问题是否在flow中得到了解决，但这个设置对我来说很好

// Test.js
const Test = (props: { text: string }) => {
    ...
}
export const StyledTest: FunctionComponent<{ text: string }> = injectSheet(style)(Test) // Explicitly type this

// Main.js
...
render() {
     return <StyledTest /> // ERROR here, so it works!
}