如何使用带有打字稿的useRef将函数分配给ref

Question

我是打字稿的新手。我想为自定义钩子中的 ref 分配一个函数。这样函数就不会在渲染过程中发生变化。

代码沙盒链接。 https://codesandbox.io/s/918l0wro4r

function something(params?: any) {
  console.error('params: ', params);
}
const someRef = React.useRef(null); //how do i assign type here.
async function someAsyncFunc() {
  try {
    const a = await something();
    something(a);
  } catch (error) {
    something(error);
  }
}
someRef.current = someAsyncFunc; // ts error here. need help here

Answer 1

useRef是一个

泛型类型。您需要添加一个类型参数来告诉 TypeScript 您想要使用哪些值。在您的情况下，ref 的初始化代码将如下所示：

const someRef = React.useRef<Function>()

Function类型允许将任何函数用作参考。您可能希望缩小它的范围，以防您有特定的形状。例如，在您的情况下，它会是这样的：

const someRef = React.useRef<() => Promise<void>>();
async function someAsyncFunc() {
  // ...
}
someRef.current = someAsyncFunc;