如何修复自定义钩子中的打字稿错误答案

【问题标题】：How fixed typescript error in custom hook如何修复自定义钩子中的打字稿错误
【发布时间】：2020-11-22 14:40:37
【问题描述】：

我在我的项目中使用这个 ResizeObserver 钩子和 typescript


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>

当我在我的组件中使用这个钩子时，我得到了这个错误

帮助修复

【问题讨论】：

我不知道为什么，但是这个钩子在 js 项目中有效，并且不适用于 typescript

标签： javascript reactjs typescript react-hooks

【解决方案1】：

我发现问题来自 typescript infer as union types，因为我们混合了数组 [setNode, entry]。因此，为了解决此问题，您只需将其设置为固定返回数组，如下所示：

return [setNode, entry] as const;

注意：此 const 断言仅在 v3.4 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions 中具有特色

【讨论】：

【解决方案2】：

您将 setNode 作为返回数组中的第一个元素返回，并尝试将其用作 TableHeader ref。

setNode 不能用作ref，请参阅here 了解如何使用 refs

【讨论】：

LegacyAPI 仍然允许我们通过回调函数设置 ref