如何使用TypeScript限制React组件children为指定函数组件？

React的JSX.Element是组件渲染后的输出类型，TypeScript默认采用结构类型系统，无法直接区分同结构的不同组件元素，我们可以通过标称类型（Brand Type） 给指定组件加唯一标识，实现静态类型校验： #

第一步：给目标组件Props加唯一品牌标识 #

import React, { ReactElement } from 'react';

// 用Symbol做唯一标识，不会和其他属性重名
const HumanBrand = Symbol('HumanComponent');

interface HumanProps {
  // 可选品牌属性，用户使用组件时无需主动传入
  [HumanBrand]?: true;
  children: React.ReactNode;
}

const Human = (props: HumanProps) => <>{props.children}</>;

// 定义Human组件渲染后对应的元素类型
type HumanElement = ReactElement<HumanProps, typeof Human>;

第二步：声明HumanParent的children类型 #

interface HumanParentProps {
  // 支持单个或多个Human元素
  children: HumanElement | HumanElement[];
}

const HumanParent = (props: HumanParentProps) => {
  return <Human>{props.children}</Human>;
};

校验效果验证 #

// ✅ 合法用法
const App1 = () => (
  <HumanParent>
    <Human>小明</Human>
    <Human>小红</Human>
  </HumanParent>
);

// ❌ 报错：类型“Element”不可分配给类型“HumanElement”
const App2 = () => (
  <HumanParent>
    <div>我不是Human组件</div>
  </HumanParent>
);

补充说明 #

如果需要运行时也做校验，可以额外写类型谓词函数判断元素类型：

function isHumanElement(element: React.ReactNode): element is HumanElement {
  return React.isValidElement(element) && element.type === Human;
}

在HumanParent组件内部遍历children执行校验即可。

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