javascript - Begränsa typen på en React-komponents prop i Typescript

För att uppnå komposition i vår kodbas skickar vi komponenter som props. Är det möjligt att typkontrollera komponenten som skickas som en prop? Som ett exempel använder jag en Typography-komponent. Denna komponent används i hela kodbasen och skickas som en prop till många andra komponenter.

interface TypographyProps {
  variant:
      | 'h1'
      | 'small'
}

<Thumbnail
  name={
    <Typography variant="h4">John Doe</Typography>
  }
  secondaryLine={
    <Typography variant="small">Bakerstreet 122</Typography>
  }
/>

Jag vill begränsa egenskaperna name och secondaryLine så att de endast kan ta emot Typography-komponenten som en prop. Det skulle vara ännu bättre att begränsa name-propen så att den endast kan ta emot Typography-komponenten med detta specifika variant (h4): <Typography variant="h4">.

För närvarande definierar jag typen så här: name: ReactElement<typeof Typography>;. Det verkar som att varje komponent kan användas som en prop (inte bara Typography-komponenten).

Är det möjligt att begränsa den komponent som skickas som en prop till denna specifika typ?

Svar #1

Eftersom variant är en prop av Typography, kan du specificera Typography.props i Typography-implementeringen:

interface TypographyProps {
    variant: 'h1' | 'small',
    children: string | JSX.element
}

export const Typography = ({ variant, children }: TypographyProps) => (
    <div className={variant}>{ children}</div>
)