reactjs - 在将 "useCallback"用作回调引用时，您将如何正确设置 TypeScript 声明？

Question

我正在开发一个 React + TypeScript 项目，我在其中引入了提供的“How can I measure a DOM node?”示例，但我似乎无法让 React 的类型确认有人会通过的场景在 useCallback 的返回值中作为 ref。我在 this CodeSandbox 中重新创建了它的基本用法.如果打开它，您应该会在这一行看到 TypeScript 错误指示器:

<div ref={ref} className="App">

究竟应该如何设置类型才能使其有效，或者 @types/react 包中是否缺少某些内容？

Answer 1

首先将 null 添加到 useCallback 中的节点类型，并将 as const 添加到返回的数组，这会将返回的数组类型化为一个元组(记住类型的顺序)而不是将其制成多种类型的数组

function useClientRect() {
  const [rect, setRect] = useState<DOMRect>();

  const ref = useCallback((node: HTMLElement | null) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);

  return [rect, ref] as const;
}