javascript - 如何修复自定义 Hook 中的 typescript 错误

Question

我在带有 typescript 的项目中使用了这个 ResizeObserver 钩子(Hook)

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>

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

类型 'Dispatch > |调整大小ObserverEntry | undefined' 不可分配给类型 'string | ((实例: HTMLTableHeaderCellElement | null) => void) |引用对象 |空 |不明确的'。类型 'ResizeObserverEntry' 不可分配给类型 'string | ((实例: HTMLTableHeaderCellElement | null) => void) |引用对象 |空 |不明确的'。“ResizeObserverEntry”类型中缺少属性“current”，但在“RefObject”类型中是必需的。

帮助修复

Answer 1

我发现问题出在我们混合数组 [setNode, entry] 时 typescript 推断为联合类型。因此，为了解决此问题，您只需将其设置为固定返回数组，如下所示:

return [setNode, entry] as const;

注意:此 const 断言仅从 v3.4 开始提供 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions