Question

我们一直试图在我们的代码库中使用Flow在React中注释我们的高阶组件，但没有取得多大成功。

我们有

adapt接受适配器作为参数的高阶组件。
adaptDataProp接受只会在props.data对象上调用的dataAdapter

这是没有Flow实现的实现

function adapt(adapter) {
    return (Component) {
        return (props) => <Component {...adapter(props)} />;
    };
}

function adaptDataProp(dataAdapter) {
    function adapter(inputProps) {
        const { data, ...rest } = inputProps;
        return ({ ...dataAdapter(data), ...rest });
    }

    return adapt(adapter);
}

 const TestFunction = ({ moo, className }) => <div className={className}>{ moo }</div>

const dataAdapter = ({ a }) => ({ moo: a });
const AdaptedTestFunction = adaptDataProp(dataAdapter)(TestFunction);

// rendering
<AdaptedTestFunction data={{ a: 'a' }} className='b' />

以下是我们的测试案例：

// Test example 1: Should fail as data prop passed in is wrong
<AdaptedTestFunction data={{ b: 'b' }} className='b' /> 

// Test example 2: Should fail as missing className prop
<AdaptedTestFunction data={{ a: 'a' }} />

// Test example 3: Should pass  
<AdaptedTestFunction data={{ a: 'a' }} className='b' />

以上使用Generic Types的流注释。

我们在单独的文件中有adapt，adaptDataProp。

// Functional Component for React
type FunctionalComponent<Props> = (props: Props) => ?React$Element<any>;
// Union of Functional Component or a Class React Component
type ComponentDefinition<DefaultProps, Props, State> = FunctionalComponent<Props> | Class<React$Component<DefaultProps, Props, State>>;


type AdaptReturnType<AdaptedProps, Props> = ComponentDefinition<void, AdaptedProps, *> => FunctionalComponent<Props>;

function adapt<
  Props: Object, 
  AdaptedProps: Object
>(adapter: Props => AdaptedProps): AdaptReturnType<AdaptedProps, Props> {
    return (Component: ComponentDefinition<void, AdaptedProps, *>): FunctionalComponent<Props> => {
        return (props: Props) => <Component {...adapter(props)} />;
    };
}

function adaptDataProp<
    Data: Object,
    AdaptedData: ?Object,
    Rest: Object
>(dataAdapter: Data => AdaptedData): 
    AdaptReturnType<
        Rest & AdaptedData,
        Rest & { data: Data }
    > {
    function adapter(inputProps: Rest & { data: Data }): Rest & AdaptedData {
        const { data, ...rest } = inputProps;
        return ({ ...dataAdapter(data), ...rest });
    }

    return adapt(adapter);
}

type Props = {
    moo: string,
    className: string
};

type AdaptedProps = {
   moo: string
};

type Data = {
    a: string
};

const TestFunction = ({ moo, className }: Props) => <div className={className}>{ moo }</div>

const dataAdapter = ({ a }: Data): AdaptedProps => ({ moo: a });
const AdaptedTestFunction = adaptDataProp(dataAdapter)(TestFunction);

但是，对于测试示例3，我收到以下错误：

 const TestFunction = ({ moo, className }: Props) => <div className={className}>{ moo }</div>
                                            ^ property `moo`. Property not found in
 <AdaptedTestFunction data={{ a: 'a' }} className='b' /> 
  ^ props of React element `AdaptedTestFunction`

我们希望上面的内容能够通过，因为AdaptedTest只有在不符合Rest & { data: Data }的情况下才会失败。

这是Flow本身的问题还是我做错了什么？

Answer 1

警告：流无法推断通用类型。

如果您希望某些东西具有通用类型，请对其进行注释。否则，Flow可能会推断出比您期望的少的多态类型。

通过：https://flow.org/en/docs/types/generics/

为什么Flow Type不能推断出正确的Generic Type

1 个答案: