為什么流程類型無法推斷正確的通用類型

Question

我們一直在嘗試用Flow在我們的代碼庫中注釋React中的高階組件，但沒有成功。

我們有

• adapt接受適配器作為參數的高階組件。
• adaptDataProp接受一個dataAdapter，該props.data僅在props.data對象上被調用

這是沒有實施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' /> 

上面的流程注釋使用通用類型 。

我們在單獨的文件中有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/