Как исправлена ​​ошибка машинописного текста в пользовательском хуке

Question

Я использую этот перехватчик ResizeObserver в своем проекте с машинописным текстом

const useResizeObserver = () => {
  const [entry, setEntry] = useState<ResizeObserverEntry>();
  const [node, setNode] = useState<Element | null>(null);
  const observer = useRef<ResizeObserver | null>(null);

  const disconnect = useCallback(() => {
    const { current } = observer;
    if (current) {
      current.disconnect();
    }
  }, []);

  const observe = useCallback(() => {
    observer.current = new ResizeObserver(([entry1]) => setEntry(entry1));
    if (node) {
      observer.current.observe(node);
    }
  }, [node]);

  useLayoutEffect(() => {
    observe();
    return () => disconnect();
  }, [disconnect, observe]);

  return [setNode, entry];
};

const [node, entry] = useResizeObserver();
<div ref={node}>content</div>

Когда я использую этот перехватчик в своем компоненте, я получаю эту ошибку

Type 'Dispatch > | ResizeObserverEntry | undefined 'нельзя присвоить типу' строка | ((экземпляр: HTMLTableHeaderCellElement | null) => void) | RefObject | null | undefined '. Тип ResizeObserverEntry не может быть назначен типу string | ((экземпляр: HTMLTableHeaderCellElement | null) => void) | RefObject | null | undefined '. Свойство current отсутствует в типе ResizeObserverEntry, но обязательно в типе RefObject.

Исправлена ​​справка

Answer 1

Я понял, что проблема возникла из-за вывода машинописного текста как типов объединения, когда мы смешиваем массив [setNode, entry]. Итак, чтобы решить эту проблему, вы просто устанавливаете это как фиксированный возвращаемый массив, как показано ниже:

return [setNode, entry] as const;

Примечание. Эти константные утверждения представлены только в v3.4 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const -assertions

Answer 2

Вы возвращаете setNode в качестве первого элемента в возвращаемом массиве и пытаетесь использовать его как TableHeader ref.

setNode не может использоваться как ref, см. здесь как используются ссылки