如何使用 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()
  });