How to type correctly premitives with asChild

[hhkim0729]

Hi,
I'm trying to use Tooltip primitive and I'm struggling with types.
Here's my code below.

const TooltipTrigger = React.forwardRef<HTMLButtonElement>(
  (props, forwardedRef) => (
    <button disabled {...props} ref={forwardedRef}>
      someButtonText
    </button>
  )
);

interface TooltipProps {
  info: string;
}

const Tooltip = ({ info }: TooltipProps) => {
  return (
    <TooltipPrimitive.Provider>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild>
          <TooltipTrigger />
        </TooltipPrimitive.Trigger>
        <TooltipPrimitive.Content sideOffset={4}>
          <p>{info}</p>
        </TooltipPrimitive.Content>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  );
};

It works just fine.
However, I keep getting this error whether I use forwardRef or not.

Type '{ children: Element; asChild: true; }' is not assignable to type 'IntrinsicAttributes & TooltipTriggerProps & RefAttributes<HTMLButtonElement>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & TooltipTriggerProps & RefAttributes<HTMLButtonElement>'.ts(2322)

Any help would be appreciated.

[joaom00]

See Extending a primitive for how to type

[hhkim0729]

Thanks! Works perfectly.

[hhkim0729]

I'm not sure if it's correct, but I fixed my code like this and the error has gone.

const TooltipTrigger = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & {
    children: React.ReactNode;
    asChild?: boolean;
  }
>((props, forwardedRef) => (
  <TooltipPrimitive.Trigger {...props} ref={forwardedRef} />
));

interface TooltipProps {
  info: string;
}

const Tooltip = ({ info }: TooltipProps) => {
  return (
    <TooltipPrimitive.Provider>
      <TooltipPrimitive.Root>
        <TooltipTrigger asChild>
          <button disabled>
            some button text
          </button>
        </TooltipTrigger>
        <TooltipPrimitive.Content>
          <p>{info}</p>
        </TooltipPrimitive.Content>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  );
};

[joaom00]

yes, that's the way