“ResizeObserver”仅指一种类型，但在这里用作值

我收到错误：'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];
}

您应该安装@types/resize-observer-browser https://www.npmjs.com/package/@types/resize-observer-browsernpm 包，获取类型声明 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/resize-observer-browser/index.d.ts。如果你真的想推出自己的接口，你可以通过declare var in a *.d.ts file.

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;
}

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