score:3

Accepted answer

new typings introduced to @types/react in response to react 16.6 include the following types:

type componentprops<t extends keyof jsx.intrinsicelements | jsxelementconstructor<any>> =
    t extends jsxelementconstructor<infer p>
        ? p
        : t extends keyof jsx.intrinsicelements
            ? jsx.intrinsicelements[t]
            : {};

type componentpropswithref<t extends elementtype> =
    t extends componentclass<infer p>
        ? propswithoutref<p> & refattributes<instancetype<t>>
        : propswithref<componentprops<t>>;

type componentpropswithoutref<t extends elementtype> = propswithoutref<componentprops<t>>;

which reference the types of a component's props. you should be able to achieve your desired interface using one of these new types:

interface formgroupprops {
    label: string;
    name: string;
    component: react.componentprops<typeof component>;
}

this is super handy if you want to avoid exporting prop interfaces all over the place, or for extracting props interfaces from libraries which don't export them. also, unlike component['props'], it also works for functional components.


Related Query

More Query from same tag