如何修复自定义挂钩中的typescript错误

Question

我在带有typescript 的项目中使用了这个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>

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

键入"Dispatch<SetStateAction<元素|null>gt；|ResizeObserverEntry|undefined"不可分配给类型"string|((实例：HTMLTableHeaderCellElement|null(=>void(|RefObject|null|undefined'。类型"ResizeObserverEntry"不可分配给类型"string|((实例：HTMLTableHeaderCellElement|null(=>void(|RefObject|null|undefined'。类型"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-断言

Answer 2

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

setNode不能用作ref，请参阅此处关于如何使用引用