22、TypeScript实战：全局扩展、非JS模块引入及React组件类型处理

TypeScript实战：全局扩展、非JS模块引入及React组件类型处理

1. 全局扩展（Augmenting Globals）

在使用浏览器特性（如 ResizeObserver ）时，可能会发现当前 TypeScript 配置中该特性不可用。此时可通过自定义类型定义来扩展全局命名空间。

TypeScript 将所有 DOM API 的类型存储在 lib.dom.d.ts 文件中，该文件由 Web IDL 文件自动生成。Web IDL 是 W3C 和 WHATWG 用于定义 Web API 接口的格式，自 2016 年起成为标准。

当规范足够完善且被主流浏览器支持后，相关资源会被添加到 TypeScript 中。若等不及，可自行添加类型定义。

假设生成了 ResizeObserver 的类型，可将输出存储在 resize-observer.d.ts 文件中，内容如下：

type ResizeObserverBoxOptions =
  "border-box" |
  "content-box" |
  "device-pixel-content-box";

interface ResizeObserverOptions {
  box?: ResizeObserverBoxOptions;
}

interface ResizeObservation {
  readonly lastReportedSizes: ReadonlyArray<