score:7

Accepted answer

by doing in panel.tsx

panel.content = panelcontent;
panel.header = panelheader 

typescript complains since the properties content and header are custom and don't exist on the base forwardref type.

to fix it declare a custom interface that extends forwardref base type and add your custom properties header and content:

interface ipanel
  extends react.forwardrefexoticcomponent<
    panelprops & react.refattributes<htmldivelement>
  > {
  header: typeof panelheader;
  content: typeof panelcontent;
}

and use it like this:

const forwardref = react.forwardref<htmldivelement, panelprops>(
  (props, ref): jsx.element => {
    return (
      <panelcomponent
        {...props}
        forwardedref={ref}
        data-testid={panel_test_id}
      />
    );
  }
);

export const panel = {
  ...forwardref,
  header: panelheader,
  content: panelcontent
} as ipanel;

or... just do export const panel: any but you lose type checking by doing this

working codesandbox forked from yours.

score:3

you can fix this error by using object.assign. this works because object.assign is typed as assign<t, u>(target: t, source: u): t & u;, so the types t and u can be inferred, and the return type becomes a mix of the forwardref exotic component type and the object with header and content properties.

export const panel = object.assign(
  react.forwardref(
    (props: panelprops, ref: react.ref<htmldivelement>): jsx.element => {
      return (
        <panelcomponent
          {...props}
          forwardedref={ref}
          data-testid={panel_test_id}
        />
      );
    }
  ),
  {
    header: panelheader,
    content: panelcontent
  }
);

Related Query

More Query from same tag