TypeScript中如何为React.FC类型组件定义必填（非可选）的children属性？

核心思路 #

目前React官方提供的原生类型已经覆盖了两个极端场景：

• React.FC：默认接受可选children传入
• React.VFC：明确不接受任何children传入

针对“children为必填项”的场景，不需要从零手写整套函数组件的类型签名，直接复用React官方内置的类型工具，仅对Props结构做最小修改即可，和全量手写类型的效果完全一致，但代码量少、版本兼容性更强。

两步简洁实现 #

1. 定义带必填children的Props交叉类型

   type PropsWithRequiredChildren<P = unknown> = P & { children: React.ReactNode };
   

2. 基于原生React.FC生成带必填children的组件类型

   type FCWithRequiredChildren<P = unknown> = React.FC<PropsWithRequiredChildren<P>>;
   

这种写法完全复用了React对函数组件的所有类型校验规则，自动兼容propTypes、contextTypes、defaultProps、displayName等静态属性的类型校验，会随着React版本的类型迭代自动同步更新，不需要手动维护冗余的类型定义。

使用示例 #

以一个必须传入children的弹窗组件为例：

// 业务自定义属性接口
interface ModalProps {
  title: string;
  onClose: () => void;
}

// 使用自定义类型标注组件
const Modal: FCWithRequiredChildren<ModalProps> = ({ title, onClose, children }) => {
  return (
    <div className="modal">
      <header>{title}</header>
      <button onClick={onClose}>关闭</button>
      <div className="modal-content">{children}</div>
    </div>
  )
}

// 类型校验生效：省略children会直接报类型错误
// <Modal title="操作提示" onClose={() => {}} />
// 合规用法
<Modal title="操作提示" onClose={() => {}}>确认删除当前条目吗？</Modal>

版本适配说明 #

若使用React 18及以上版本的官方类型定义，原生React.FC已经不再自动向Props注入可选的children属性，这种场景下不需要额外定义包装类型，直接在业务Props接口中把children标为必填即可：

interface ModalProps {
  title: string;
  onClose: () => void;
  children: React.ReactNode;
}
const Modal: React.FC<ModalProps> = (props) => { /* 组件逻辑 */ }

内容的提问来源于stack exchange，提问作者Tobbe