React Typescript - Types problem | One component that renders sub component

Question

Parent Component: Font
Sub Component: FontHeading, FontText, FontSubTitle.

  return (
    <>
      {type === "title" && <FontTitle as={as} variant={variant as HeadingVariants}>{children}</FontTitle>}
      {type === "subtitle" && <FontSubtitle>{children}</FontSubtitle>}
      {type === "iperlink" && <FontIperLink>{children}</FontIperLink>}
    </>
  );

export type IFont = {
  type: 'title' | 'subtitle' | 'link',
  children: React.ReactNode,
  variant: HeadingVariants | TextVariants | LinkVariants;
  setRef?: React.Ref<HTMLDivElement>;
}

export type IFontTitle = {
  as?: "h1" | "h2" | "h3" | "h4" | "h5";
  variant: HeadingVariants
}

export type IFontSubTitle = {
  variant: TextVariants
}

export type IFontLink = {
  href: string;
  variant: LinkVariants;
}

How can I tell that if <Field type="title" .... /> then it needs to accept props that are of IFontTitle ? Viceversa with type="variant" or type="link". Also would be great if it's auto select the correct variant, any help is appreciated..

Thanks

Answer 1

You can use union types for that:

type SharedProps = {
  children: React.ReactNode,
  setRef?: React.Ref<HTMLDivElement>;
}
type TFontTitle = {
    type: 'title'
    as?: "h1" | "h2" | "h3" | "h4" | "h5";
    variant: HeadingVariants
}
type TFontSubTitle = {
    type: 'subtitle'
    variant: TextVariants
}
type TFontLink = {
    type: 'link'
    href: string;
    variant: LinkVariants;
}
type UnionProps = TFontTitle | TFontSubTitle | TFontLink
type Props = UnionProps & SharedProps