Как бы вы правильно настроили объявление TypeScript при использовании «useCallback» для ссылки обратного вызова?

Question

Я работаю над проектом React + TypeScript, в котором я использовал предоставленный пример " Как я могу измерить узел DOM? ", но мне кажется, что я не могу получить Типы реагирования для подтверждения сценария, в котором кто-то передает возвращаемое значение useCallback как ref. Я воссоздал его использование в этом CodeSandbox . Если вы откроете это, вы увидите индикатор ошибки TypeScript в этой строке:

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

Как именно следует настроить типы, чтобы сделать это допустимым, или в пакете @types/react что-то отсутствует?

Answer 1

Сначала добавьте null к типу узла внутри useCallback и добавьте 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

В вашем 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;

Answer 3

Установить тип возврата для useClientRect hook на [ClientRect | undefined, (node: HTMLDivElement) => void] и изменить тип аргумента для 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;