22、TypeScript 开发实用技巧：全局扩展与 React 组件类型处理

TypeScript 开发实用技巧：全局扩展与 React 组件类型处理

在 TypeScript 开发中，我们常常会遇到一些类型定义和组件使用的问题。本文将详细介绍如何通过全局扩展来解决特定浏览器特性在 TypeScript 配置中不可用的问题，以及如何在 React 开发中处理组件类型，让代码更加健壮和易于维护。

1. 全局扩展：解决浏览器特性类型缺失问题

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

1.1 问题分析

TypeScript 将所有 DOM API 的类型存储在 lib.dom.d.ts 文件中，该文件是从 Web IDL 文件自动生成的。Web IDL 是 W3C 和 WHATWG 用于定义 Web API 接口的格式。当规范足够完善且被主流浏览器支持后，新的资源会被添加到 TypeScript 中，但这需要时间。如果我们等不及，可以自己为当前项目添加类型定义。

1.2 解决方案

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

type ResizeObserverBoxOptions =
  "border-box" |
  "content-box" |
  "device-p