如何在React中为自定义元素phi-a的子元素做类型守卫

这个问题我之前也踩过坑，核心原因是没搞清楚React的JSX元素和自定义Web Component的类实例根本不是一回事。你直接把AAttrs里的children指定为B（自定义元素的类），TypeScript肯定会报错——因为JSX里的<phi-b/>对应的是React.ReactElement类型，是React对真实DOM元素的描述，而不是B类的实例本身。

下面是能解决问题的具体步骤和代码：

1. 正确定义子元素的类型 #

我们需要把AAttrs的children限制为只能是<phi-b/>对应的React元素，支持单个或多个子元素的写法如下：

interface AAttrs extends React.HTMLAttributes<HTMLElement> {
  children: React.ReactElement<BAttrs> | React.ReactElement<BAttrs>[];
}

2. 完善完整的类型声明逻辑 #

把自定义元素、属性接口和全局JSX扩展整合起来，确保类型链完整：

// 自定义Web Component类
class A extends HTMLElement {
  // 这里写你的自定义逻辑，比如connectedCallback等
}
customElements.define("phi-a", A);

class B extends HTMLElement {
  // 你的B元素自定义逻辑
}
customElements.define("phi-b", B);

// 元素属性接口
interface AAttrs extends React.HTMLAttributes<HTMLElement> {
  // 限制子元素只能是phi-b的React元素
  children: React.ReactElement<BAttrs> | React.ReactElement<BAttrs>[];
}

interface BAttrs extends React.HTMLAttributes<HTMLElement> {
  // 如果B有自定义属性，可以在这里添加类型定义
}

// 扩展全局JSX类型，让React识别自定义元素
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "phi-a": React.DetailedHTMLProps<AAtts, HTMLElement>;
      "phi-b": React.DetailedHTMLProps<BAttrs, HTMLElement>;
    }
  }
}

3. 为什么之前的写法会报错？ #

当你在JSX里写<phi-b/>时，React并不会直接创建B类的实例——它只会生成一个React.ReactElement对象，用来描述这个元素的信息，直到组件挂载到DOM后，React才会调用自定义元素的构造函数创建真实实例。你之前指定children: B，相当于要求子元素必须是B类的实例，这完全不符合React的工作机制，所以TypeScript会抛出类型不兼容的错误。

额外提示 #

这个写法会在编译阶段严格检查phi-a的子元素，任何非<phi-b/>的元素（包括文本节点）都会触发TypeScript报错，完全满足你限制子元素类型的需求。

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