reactjs - Hvordan erklære type korrekt for React wrapper-komponent (HOC) ved bruk av Typescript

Jeg prøver å implementere en enkel HOC for å forbedre komponenter med egendefinerte verktøytips. Selv om koden fungerer fint, klarer jeg ikke å finne ut hvordan jeg riktig skal erklære typer. En forenklet versjon av min HOC ser slik ut:

const withTooltip = <P extends {}>(
  BaseComponent: React.ComponentType<P>
): React.FC<P & { title?: string }> => ({ title, ...rest }) => {
  
  return (
    <>
      <BaseComponent {...rest} />
      <Tooltip title={title}/>
    </>
  );
};

Men jeg får en Typescript-feil:

Type 'Omit<PropsWithChildren<P & { title?: string | undefined; }>, "title">' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
  Type 'Omit<PropsWithChildren<P & { title?: string | undefined; }>, "title">' is not assignable to type 'P'.
    'Omit<PropsWithChildren<P & { title?: string | undefined; }>, "title">' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint '{}'.

Hvordan kan jeg korrekt deklarere typer for en slik HOC?

Svar #1

Du må bruke typen av infererte rest-props:

import React, { ComponentType } from 'react'

const Tooltip = (props: { title?: string }) => null

type OptionalTitle = { title?: string };

const withTooltip = <P extends object = object>(
  BaseComponent: ComponentType<Omit<P & OptionalTitle, "title">>
): React.FC<P & OptionalTitle> => ({ title, ...rest }) => {

  return (
    <>
      <BaseComponent {...rest} />
      <Tooltip title={title} />
    </>
  );
};

Relaterte artikler