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

Question

我正在开发一个 React + TypeScript 项目，我在其中引入了提供的“ 我如何测量 DOM 节点？ ”示例，但我似乎无法让 React 的类型承认有人会将useCallback的返回值作为ref useCallback 。 我在这个 CodeSandbox 中重新创建了它的基本用法。 如果你打开它，你应该在这一行看到 TypeScript 错误指示器：

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

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

Answer 1

首先在useCallback中的节点类型中添加null并将as const添加到返回的数组中，这会将返回的数组类型为元组（记住类型的顺序），而不是使其成为多种类型的数组

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

将useClientRect钩子的返回类型设置为[ClientRect | undefined, (node: HTMLDivElement) => void] [ClientRect | undefined, (node: HTMLDivElement) => void]并将useCallback参数类型useCallback为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

在您的use-client-react您已将ClientRect作为不存在的类型传递。 以下对我来说很好。

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;