javascript - Jak deklarovat typ pro funkční React komponentu při použití destrukturalizace objektu v props?

Stále se učím TypeScript a deklaraci (pokročilých) typů. Snažím se převést svůj projekt CRA na TypeScript a mám v něm následující komponentu. Jak bych měl deklarovat typy pro tuto komponentu?

Tato komponenta je téměř 1:1 z příkladů react-router-dom, ale nemohl jsem najít žádný příklad, který by ukazoval, jak to napsat v TypeScriptu

// ProtectedContent.tsx

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import Auth from '../services/Auth';

const ProtectedContent = ({ component: Component, ...rest }) => {
  return (
    <Route {...rest} render={(props) => {
      if (Auth.isAuthenticated()) {
        return (
          <Component {...props} />
        );
      } else {
        return (
          <Redirect to={{
            pathname: '/auth/signin',
            state: { from: props.location },
          }} />
        );
      }
    }} />
  );
};

export default ProtectedContent;

Zkoušel jsem vytvořit rozhraní pro parametry:

interface PCProps extends HTMLAttributes<HTMLElement>{
  component: React.Component;
}

const ProtectedContent = ({ component: Component, ...rest }: PCProps) => {
   // .......
}

Ale pak jsem měl problém s linkou

return (
  <Component {...props} />
);

jelikož se objevila chyba s textem

Typ JSX elementu 'Component' nemá žádné konstruktory ani volací signatury. ts(2604)

Pak když jsem se snažil to opravit, skončil jsem v šílené králičí noře a ztratil jsem sled a pochopení toho, co se vlastně děje.

Jak bych měl deklarovat typy pro toto, aby komponenta mohla být jakoukoli React komponentou a pak hezky destrukturovat zbytek props?

Verze TS je 3.8.3

Upravit: (Možné řešení)

Z hlubin internetu jsem našel toto „řešení“. Mohu deklarovat komponentu v rozhraní PCProps jako 'ReactType' a pak ji použít takto:

interface PCProps {
  component: React.ReactType;
}

const ProtectedContent = ({ component: Component, ...rest }): PCProps => {
  ...
}

Tím se odstraní chyba, ale proč? Co je tohle 'ReactType'? Prošel jsem dokumentaci a nic s tímto nesouvisejícího jsem nenašel. Je tu někdo zkušený s Reactem a TS, kdo by to mohl vysvětlit a také jak by měla být taková komponenta typována?

Opravdu nepoužívám toto řešení, protože nemám tušení, co se děje.

Zdroj řešení

Úprava2:

Pískoviště ukazující původní, navrhované řešení pomocí React.FC a možné řešení pomocí React.ReactType. Zkontrolujte všechny tři soubory v tomto pískovišti.

Pískoviště pro tuto otázku

Odpověď č. 1

Ujistěte se, že vaše přípona souboru je .tsx a ne .ts a že deklarujete component: React.FC;. Funkční příklad: codesandbox.io/s/silly-hamilton-1xuyu?file=/src/App.tsx:95-97