将“useCallback”用于回调引用时，您将如何正确设置 TypeScript 声明？

Question

I'm working on a React + TypeScript project where I've pulled in the provided " How can I measure a DOM node? " example, but I don't seem to be able to get React's types to acknowledge a scenario where someone would be passing in the return value of useCallback as a ref . I've recreated a bare-bones usage of it in this CodeSandbox . If you open this you should see the TypeScript error indicator on this line:

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

How exactly should the types be set up to make this valid, or is there something missing in the @types/react package?

Answer 1

First add null to the type of the node inside useCallback and add as const to the returned array which will type the returned array as a tuple(remember the order of types) instead of making it an array of multiple types

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

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

  return [rect, ref] as const;
}

Answer 2

Set returning type for useClientRect hook to [ClientRect | undefined, (node: HTMLDivElement) => void] [ClientRect | undefined, (node: HTMLDivElement) => void] and change arguments type for useCallback to HTMLDivElement :

// packages
import { useCallback, useState } from "react";

function useClientRect(): [
  ClientRect | undefined,
  (node: HTMLDivElement) => void
] {
  const [rect, setRect] = useState<ClientRect>();

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

  return [rect, ref];
}

export default useClientRect;

Answer 3

In your use-client-react you have passed ClientRect as a type which doesn't exist. The following works for me fine.

import { useCallback, useState } from "react";

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

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

  return [rect, ref];
}

export default useClientRect;