通用功能組件，類型“U”不可分配給類型“T”。 如何正確合並類型？

Question

我用谷歌搜索了這個問題並遇到了一些類似的問題，但是通用卷積讓我對每個例子都頭疼不已。 我嘗試了一些事情； 我認為最有前途的是我推測的Omit會像這樣工作：

function PassPropertiesAndRender<ComponentProperties>(props: Omit<ComponentProperties, 'element'> & iPPR) {

但是也得到typescript錯誤TS2322: Type '{ element: ComponentType; }' is not assignable to type 'Omit '. TS2322: Type '{ element: ComponentType; }' is not assignable to type 'Omit '.

這是我當前的錯誤消息和完整代碼。 錯誤源於<PassPropertiesAndRender<T>調用。 提前感謝您的關注！

TS2322: Type '{ element: ComponentType<any>; }' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to '{ element: ComponentType<any>; }'.

import React from "react";
import {Outlet, useLocation, useNavigate, useParams} from "react-router-dom";
import Bootstrap, {iBootstrapProperties, iBootstrapState} from "src/Bootstrap";
import {Location} from "history";
import {NavigateFunction} from "react-router";

interface WithRouter {
    location: Location;
    navigate: NavigateFunction;
    params: any
}

export type iAmBootstrapDescendant = iBootstrapState & iBootstrapProperties & WithRouter;

interface iPPR {
    element: React.ComponentType<any>
}

function PassPropertiesAndRender<ComponentProperties>(props: ComponentProperties & iPPR) {

    const Component = props.element;
    const bootstrap = Bootstrap.bootstrap;
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    console.info(Component.displayName || Component.name, {location, navigate, params});

    return <Component {...bootstrap.props}
                      {...bootstrap.state}
                      location={location}
                      navigate={navigate}
                      params={params}
                      {...props}>
        <Outlet/>
    </Component>; // never change the order

}
PassPropertiesAndRender.displayName = 'PassPropertiesAndRender';

export const ppr = <T,>(Element: React.ComponentType<any>, props = {}) => <PassPropertiesAndRender<T> element={Element} {...props}/>;

export default ppr

Answer 1

所以，在玩了一些之后，我找到了解決方案。

import React from "react";
import {Outlet, useLocation, useNavigate, useParams} from "react-router-dom";
import Bootstrap, {iBootstrapProperties, iBootstrapState} from "src/Bootstrap";
import {Location} from "history";
import {NavigateFunction} from "react-router";

interface WithRouter {
    location: Location;
    navigate: NavigateFunction;
    params: any
}

export type iAmBootstrapDescendant = iBootstrapState & iBootstrapProperties & WithRouter;

interface iPPR {
    element: React.ComponentType<any>
}

function PassPropertiesAndRender<ComponentProperties>(props: ComponentProperties & iPPR) {

    const Component = props.element;
    const bootstrap = Bootstrap.bootstrap;
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    console.info(Component.displayName || Component.name, {location, navigate, params});

    return <Component {...bootstrap.props}
                      {...bootstrap.state}
                      location={location}
                      navigate={navigate}
                      params={params}
                      {...props}>
        <Outlet/>
    </Component>; // never change the order

}
PassPropertiesAndRender.displayName = 'PassPropertiesAndRender';

export const ppr = <T,>(Element: React.ComponentType<any>, props: T) => <PassPropertiesAndRender<T> element={Element} {...props}/>;

export default ppr