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

Question

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

我定义了以下接口，因为 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-browsernpm 包来获取类型声明。如果您确实想推出自己的接口，可以通过文件declare var中的a 定义可更新的接口*.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;
}

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