How to use Flow to enforce missing skip types

Flow definition

declare type ReactComponent<Props> = Class<React$Component<void, Props, *>> | (props: Props) => React$Element<*>;

Title component

/* @flow */
import React from 'react';
import Helmet from 'react-helmet';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import styles from './Title.css';

type Props = {
    title: string,
    subTitle?: string,
};

function Title({ title, subTitle }: Props) {
    return (
        <section>
            <Helmet title={title} />
            <h1>{title}</h1>
            {subTitle && <h2>{subTitle}</h2>}
        </section>
    );
}

export default (withStyles(styles)(Title): ReactComponent<Props>);

So, now we have the Title component, which takes two details, both lines, and one of them is optional.

Then I will try to use the above component in another component.

/* @flow */
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import styles from './TextureDetail.css';
import Title from '../../Title';

type Props = {
    postData: Map<*, *>,
    postTags: Array<*>,
};

function TextureDetail() {
    return (
        <div>
            <Title />
        </div>
    );
}

export default (withStyles(styles)(TextureDetail): ReactComponent<Props>);

In this case, I expect the thread to consider that I am using the Title component without the necessary details, but it does not. How to set up a stream, which it actually checks for the required types.

+4
source share
1 answer

, HOC ( ), Title isometric-style-loader, . Flow any, , , .

, flow-typed HOC, react-css-modules, , - , .

0

Source: https://habr.com/ru/post/1677000/


All Articles