'ResizeObserver' 仅指一种类型，但在此处用作值

Question

我收到错误消息：'ResizeObserver' only refers to a type, but is being used as a value here 尝试在 React 中与 TypeScript 一起使用 ResizeObserver。

我将以下接口定义为 TypeScript 不包含定义：

interface ResizeObserver {
    observe(target: Element): void;
    unobserve(target: Element): void;
    disconnect(): void;
}

我在以下组件中使用它：

const useWidth = () => {

    const ref = useRef<HTMLObjectElement>(null);

    const [width, setWidth] = useState(0);

    useLayoutEffect(() => {

        var resizeObserver = new ResizeObserver(() => console.log("blah blah blah"))
        resizeObserver.observe(ref.current)

        return () => resizeObserver.disconnect()

    }, [ref.current])

    return [ref, width];
}

Answer 1

您应该安装@types/resize-observer-browser npm 包to get the type declarations。如果你真的想自己动手，你可以通过declare var 在*.d.ts 文件中定义一个新的接口。

declare interface ResizeObserver {
  observe(target: Element): void;
  unobserve(target: Element): void;
  disconnect(): void;
}

declare var ResizeObserver: {
  prototype: ResizeObserver;
  new(callback: ResizeObserverCallback): ResizeObserver;
};

interface ResizeObserverSize {
    inlineSize: number;
    blockSize: number;
}

type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;

interface ResizeObserverEntry {
    readonly target: Element;
    readonly contentRect: DOMRectReadOnly;
    readonly borderBoxSize: ResizeObserverSize;
    readonly contentBoxSize: ResizeObserverSize;
}

然后它将在全球范围内可用（我相信它在浏览器中）并且您可以对其进行更新：