如何使用Flow强制执行缺少的属性类型

Question

流程定义

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

Title组件

/* @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>);

现在，我们有了一个带有两个属性的Title组件，两个属性都是字符串，其中一个是可选的。

然后我尝试在另一个组件中使用上面的组件。

/* @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>);

在这种情况下，我预计flow会抱怨我使用的组件标题没有必要的道具，但它并没有这样做。如何配置它实际检查所需类型的流。

Answer 1

这是因为用于从isometric-style-loader创建Title的HOC (高阶组件)没有相关的流类型。Flow自动将非类型库转换为any，这就是为什么你看不到任何你通常期望从缺少所需属性的组件中看到的错误。

您可以使用类似结构的HOC (如react-css-modules )的flow-typed存储库中的示例为其类型创建绑定。你也可以四处看看是否有人发布了这个库的流类型定义，但在回答这个问题时我没有找到任何定义。