reactjs - Generiğin, bir React bileşeninin props’u olabilecek bir tür olmasını nasıl kısıtlayabilirim?

Şu anda, başka bir bileşeni prop olarak alan ve sonra o bileşenin tüm prop'larını ona geçirmek için prop olarak gerektiren bir bileşen oluşturmak için TypeScript derleyicisiyle uğraşmayı yeni bitirdim. (Kullanım durumu, Gatsby <PrivateRoute> bileşenleri içindir).

Aslında bunu çalıştırmayı başardım, ama sorun şu ki neden çalıştığını çözemedim.

İşte basitleştirilmiş bir örnek:

Sarmalayıcı bileşen ve tanımlı özellikler:

type WrapperProps<T> = { component: React.ComponentType<T> } & T;

const Wrapper = <T extends object>({
    component: Component,
    ...rest
}: WrapperProps<T>) => {
    return <Component {...(rest as T)} />;
};

ve amaçlanan kullanım:

interface person {
    name: string;
    age: number;
}

const ShowPerson = ({ name, age }: person) => {
    return (
        <h1>
            {name}, {age}
        </h1>
    );
};

const Display = () => {
    return <Wrapper component={ShowPerson} name="T" age={12} />;
};

Çalıştığını neden çözemediğim kısım, sarmalayıcı bileşendeki genel sınırlamada. <T extends object>'i kaldırırsam, şu hatayı alacağım: "type 'Omit<WrapperProps<T>, "component">' türünün 'T' türüne dönüştürülmesi bir hata olabilir çünkü hiçbir tür diğerinin üzerine yeterince örtüşmüyor

Şimdi, generic'in kısıtlanması gerektiği mantıklı, ama <T extends object> kullanmaktan daha iyi bir kısıtlama var mı? Neden <T extends {}> çalışmıyor? Bir React bileşeninin props'u olarak çalışacak kabul edilebilir ve daha iyi bir generic kısıtlaması ne olurdu? extends object bana doğru çözüm gibi gelmiyor.

Düzenle Bu, ...rest as unknown as T olarak dönüştürerek de işlevsel hale getirilebilir, ama yine de bunu anlamaya çalışıyorum:

const Wrapper = <T,>({
    component: Component,
    ...rest
}: WrapperProps<T>) => {
    return <Component {...(rest as unknown as T)} />;
};

Typescript Oynatma Alanı örneği