reactjs - Använd React.forwardRef i Typescript utan props

Jag försöker vidarebefordra en ref till en Typescript-komponent som inte tar några props. När jag använder React.forwardRef tar den två parametrar: props och ref. Min komponent använder inga props. Hur kan jag deklarera min komponent utan linting- eller kompileringsfel?

Just nu har jag:

// this says "props is declared but its value is never used"
const MyComponent = React.forwardRef((props = {}, ref: Ref<HTMLDivElement>): JSX.Element => {
  return (
      <div ref={ref}>
        Fun stuff
      </div>
  );
});

Om jag deklarerar ett tomt gränssnitt för mina props på detta sätt:

interface myProps {}

Då får jag An empty interface is equivalent to '{}' men när jag försöker deklarera med bara {} och ingen faktisk interface får jag:

Don't use `{}` as a type. `{}` actually means "any non-nullish value".
- If you want a type meaning "any object", you probably want `Record<string, unknown>` instead.
- If you want a type meaning "any value", you probably want `unknown` instead.

Finns det något sätt som jag kan deklarera ett interface/typ för dessa props som förväntar sig ett tomt objekt och inte orsakar lintingproblem?

Uppdatering: När jag använder en tom objekttyp som rekommenderas i denna diskussionstråd orsakar det ett typerrors där komponenten används.

Type '{ ref: RefObject<HTMLDivElement>; }' is not assignable to type 'Pick<NoElements<Record<string, never>>, string>'.
  Property 'ref' is incompatible with index signature.
    Type 'RefObject<HTMLDivElement>' is not assignable to type 'never'.

Visas på:

<MyComponent ref={refToForward} />

Det verkar som att det är en kycklingäggssituation.

Svar #1

Om du vill använda forwardRef men inte behöver props, kan du prova detta:

const MyComponent = forwardRef((_: unknown, ref: Ref<HTMLDivElement>) => {
  return (
      <div ref={ref}>
        ...
      </div>
  );
});

Svar #2

Du kan prefixa props med ett understreck som detta _props för att bli av med props deklareras men dess värde används aldrig.

Och för de tomma gränssnitten brukar jag vanligtvis använda typer, så i ditt fall skulle det vara type myProps={}.

UPD :

Vad sägs om att vi skickar typerna in i <>, som:

type Props = {};

const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
  return (
      <div ref={ref}>
        Fun stuff
      </div>
  );
});

Relaterade artiklar