AI 摘要：本文深入探讨了在 React 应用中如何正确使用 TypeScript 定义 children prop 的类型。文章首先介绍了 children prop 的基本用法和支持的各种内容类型，并强调了避免手动定义复杂 children 类型的必要性。随后，详细讲解了 ReactNode 超集类型、PropsWithChildren 和 React.ComponentProps 等实用工具类型，以及 ReactElement 和 JSX.Element 等具体类型的使用场景。文章还特别提到了 React 18/19 版本中关于 React.FC 和 children 类型定义的最新变化，建议显式定义 children prop，并展示了如何安全地处理 refs 和构建包装组件（wrapper components）。通过学习这些方法，开发者可以更有效地在 TypeScript 中管理 React 组件的 children prop，提升代码的类型安全性和可维护性。

1. children prop 基础
• JSX 中的 children ：解释 children prop 是如何接收并操作 JSX 表达式中标签之间的内容的。
• 支持的 children 类型：列举了 children prop 可以接受的常见内容类型，包括字符串（Strings）、JSX 元素、JavaScript 表达式（JavaScript expressions）和函数（Functions）。
• 避免手动定义复杂 children 类型：指出手动为 children 定义类型容易遗漏，推荐使用官方支持的类型。

2. children prop 的类型定义方法
• ReactNode 超集类型：介绍 ReactNode 是包含 React 所有可渲染值的超集类型，是定义 children 类型时的首选，并详细解释了 ReactNode 的内部定义。
• PropsWithChildren 类型：讲解 PropsWithChildren 如何方便地为现有 props 添加 children prop，避免手动定义。
• React.ComponentProps 类型：说明 ComponentProps 如何提取现有组件的 props 类型，尤其适用于构建可复用组件和 UI 库。
• React.ReactElement 类型：介绍 ReactElement 作为 ReactNode 的子集，在特定场景下如何用于定义 children prop。
• JSX.Element 类型：说明 JSX.Element 如何作为 children prop 的类型，并指出它只代表单个 React 元素且不包含假值。
• 类组件的 Component 类型：演示在类组件中如何使用 React.Component 定义 children prop，并说明 children 默认是可选的。

3. React 18/19 中 children prop 类型定义的最新变化
• 不再推荐使用 React.FC / FunctionComponent ：解释了 React.FC 因不再自动包含 children prop 而不再被推荐，并倡导显式定义 children。
• 在 TypeScript 中将组件作为 props 传递：展示了如何在不依赖 React.FC 的情况下，安全地将组件作为 props 传递并保持完整的类型安全。
• React 19 中 Refs 和 forwardRef ：比较了 React 18 及更早版本与 React 19 中处理 refs 和 children prop 时的类型定义方式的变化。

4. TypeScript 中的包装组件（Wrapper Components）
• 包装组件在类型安全方面的优势：通过一个待办事项应用示例，展示了包装组件如何通过定义接口来增强类型安全，并在编译时捕获类型错误。
• 处理复杂数据结构：说明 TypeScript 如何确保在组件间传递复杂数据结构时，所有必需属性都存在且类型正确。

LogRocket Blog

How to type React children correctly in TypeScript - LogRocket Blog

Learn best practices for typing React children in TypeScript, including ReactNode, PropsWithChildren, ComponentProps, and why React.FC is no longer recommended.