如何使用 TypeScript 在 useRef 掛鈎中鍵入函數

Question

我有一個組件：

interface MyRef {
  foo: () => Promise<string>;
  bar: () => Promise<string>;
}

const Component: React.FunctionComponent = () => {
  const myRef = useRef<MyRef>({
    foo: async () => 'foo',
    bar: async () => myRef.current.foo(),
  });

  return <p>Comp</p>;
};

TypeScript 抱怨'myRef' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022) 。

我應該怎么做才能讓 TypeScript 知道myRef.current.foo()的類型？

Answer 1

您可以按如下方式設置myRef的類型。

const myRef: MutableRefObject<MyRef> = useRef<MyRef>({
    foo: async () => "foo",
    bar: async () => myRef.current.foo()
  });