how to type a prop from react-bootstrap typescript prop

Question

I'm creating a component CollapsableCard, I want to pass 3 fields in the props, headerText, children and headerStyle. The first two I understand and work just fine, but headerStyle is throwing me for a loop.

export interface CollapseCardOptions {
  headerText: string;
  children: ReactElement;
  headerStyle: ????;
}

export default function CollapsableCard(props: CollapseCardOptions) {
  return (
    <Card>
      <Card.Header as={props.headerStyle} className="ctnet-card-header">
        {props.headerText}
        <span className="float-right clickable" onClick={showHideCardBody}>
          <i className="fa fa-chevron-up"></i>
        </span>
      </Card.Header>
      <Card.Body className="card-body">{props.children}</Card.Body>
    </Card>
  );
}

I've traced the types on Bootstrap v5 back to their original interfaces but I can't decipher them.

Header: BsPrefixRefForwardingComponent<"div", import("./CardHeader").CardHeaderProps>

goes to

export interface CardHeaderProps extends BsPrefixProps, React.HTMLAttributes<HTMLElement> {}

goes to

export interface BsPrefixProps<As extends React.ElementType = React.ElementType> extends BsPrefixOnlyProps, AsProp<As> {}

goes to

export interface AsProp<As extends React.ElementType = React.ElementType> {
    as?: As;
}

But As, doesn't have a definition, and I can't import it into my collapsableCard.tsx.

Some insight would be greatly appreciated.

Answer 1

This is the correct typing for Bootstrap Header{as} React.ElementType<any> | undefined;

And the completed interface looks like this

export interface CollapseCardOptions {
  headerText: string;
  children: ReactElement;
  headerStyle: React.ElementType<any> | undefined;
}