限制 Typescript 中 React Component prop 的类型

Question

To achieve composition in our codebase we pass components as props. Is it possible to type check the component that is passed as a prop? As an example, I make use of a Typography component. This component is used in the entire codebase and is passed as a prop to many other components.

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

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

I want to restrict the properties name and secondaryLine to only receiving the Typography component as a prop. It would be even better to restrict the name prop to only receive the Typography component with this specific variant ( h4 ): <Typography variant="h4"> .

Currently I define the type like this: name: ReactElement<typeof Typography>; . It seems that every component can be used as a prop (not only the Typography component).

Is it possible to restrict the component being passed as a prop to this specific type?

Answer 1

Since variant is a prop of Typography , you can specify the of Typography.props in the Typography implementation:

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

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