如何使用Flow来强制执行缺少的prop类型

Question

The flow definition

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

The 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 a Title Component that takes two props, both strings, with one of them being optional.

I then 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 instance I expect flow to complain that I am using the component Title without the required props, but it does not do so. How do I configure flow that it actually checks for required types.

Answer 1

It's because the HOC (Higher Order Component) used to create Title from isometric-style-loader does not have associated flow types. Flow automatically converts untyped libraries to any , which is why you're not seeing any errors you'd normally expect to see from a component missing required props.

You can create bindings for its type using an example in the flow-typed repository for a similarly structured HOC, such as react-css-modules . You can also look around to see if someone else has released flow type definitions for this library, but I could not find any at the time of answering this question.