Использование Flowtype с реагирующих-CSS-модули украшенных компонентов

Question

Ниже приведен простой компонент для отображения сообщений об ошибках:

// @flow 
import styles from 'styles/components/Error'; 
import React from 'react'; 
import CSSModules from 'react-css-modules'; 

type Props = { 
    message: string 
} 

const Error = ({ message }: Props) => { 
    return (
    <div styleName="error"> 
     {message} 
    </div> 
); 
}; 

export default CSSModules(Error, styles); 

Обратите внимание, что это требует message собственности. Теперь, если я использую этот компонент где-то:

<Error />; 

Flowtype должен предупредить меня, что Error отсутствует требуемое свойство message, но это не так. Если я не обертываю свой компонент Error с помощью реакционных css-модулей, Flowtype работает так, как ожидалось.

Я думаю, что мне нужно объявить тип Flowtype, чтобы он мог понять завернутые компоненты, но мой Google-fu не дал никаких результатов.

То, что я нашел:

• https://github.com/facebook/flow/issues/1601
• Flow Type: HOC with cloneElement

Answer 1

Это было недавно обсуждали на GitHub. Вот соответствующая проблема: https://github.com/facebook/flow/issues/2536

Короче говоря, проблема в том, что Flow не имеет информации о типе для функции CSSModules, поэтому тип возвращаемого значения определяется как any.

Другими словами:

export default Error; // the type of this export is (_: P) => ?React$element<any> 
export default CSSModules(Error, styles); // the type of this export is any 

Короче говоря, вы можете предоставить собственное определение типа. Я вставить здесь один предложенный @gcanti в первоначальном выпуске:

declare module 'react-css-modules' { 

    declare type CssOptions = { 
    allowMultiple?: boolean, 
    errorWhenNotFound?: boolean, 
    }; 

    declare type FunctionComponent<P> = (props: P) => ?React$Element<any>; 
    declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>; 

    declare function exports<D, P, S, C: ClassComponent<D, P, S> | FunctionComponent<P>>(reactClass: C, styles: Object, cssOptions?: CssOptions): C; 
} 

Сохранить выше в decls/react-css-modules.js или что-то подобное, а затем настроить ваш .flowconfig как:

[libs] 
decls/.js 

Это позволит сохранить тип информацию при упаковке компонента в CSSModules и разрешить поток для обнаружения предполагаемых ошибок.