什么是 Resize Observer？
Resize Observer 是一个可以观察一个元素的尺寸变化的 API。它可以让你检索任何元素的尺寸变化，而不需要使用 window.onresize 事件或轮询来检查它。
它包含一个 ResizeObserver 接口，它在实例化后会被调用，并且可以监听该接口所观察的元素的大小是否发生变化，当元素大小变化时，就会激活回调函数。
为什么要使用 @types/resize-observer-browser 这个包？
为了大家更好的编写代码，使用 @types/resize-observer-browser 可以让你的 TypeScript 代码在编译时强制检查，而不是在运行时，这意味着当你添加或删除一个观察者时，你会收到来自 TypeScript 的错误通知。
安装步骤
安装 @types/resize-observer-browser：
npm install --save-dev @types/resize-observer-browser
用法
带有 @types/resize-observer-browser 的 Resize Observer 接口可以使用以下方式进行调用：
new ResizeObserver(callback)
这里是一个简单的示例(假设你正在使用React)：
-- -------------------- ---- -------
------ - ---------- ------ - ---- --------
----- ---------------- - -- -- -
----- ------ - -----------------------------
------------ -- -
-- --------------- --- ----- -
-------
-
----- -------------- - --- ------------------------ -- -
-- ------------------------- -
-------
-
-- --- ------- ---------
----------------------- -- -
-- -------------
----- - ------- ----- - - ------------------
---------------------- --------
--------------------- -------
---
---
---------------------------------------
-- ----- -- -------- ------
------ -- -- -
----------------------------
--
-- ----
------ ---- ------------------- ----------
--总结
在使用 Resize Observer API 监听元素大小变化时，@types/resize-observer-browser 的包能够很好的帮助我们写出类型安全的代码，避免出现错误，减少了代码的维护成本，提高了代码的可读性和健壮性。
如果你正在使用 TypeScript，并想监听元素的大小变化，我强烈建议你使用 @types/resize-observer-browser 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae9eb5cbfe1ea0610e8b