如何在TypeScript中约束React子组件为指定类型？

你之前使用的React.ReactElement<Props> | React.ReactElement<Props>[]写法无法触发类型错误，核心原因是TypeScript对JSX元素的默认类型检查规则和Flow不同：React.ReactElement的泛型参数仅做标记，不会严格校验传入元素的实际props匹配度，所有合法React元素都会被判定为符合类型，自然不会抛错。

可以通过「编译时类型约束+运行时校验」结合的方式实现和Flow示例一致的效果，具体方案如下：

实现步骤 #

1. 定义基础类型约束 #

首先明确允许传入的子组件对应的Props类型，再为父组件的children做基础类型标注：

import React, { ReactElement, Children, isValidElement } from 'react';

// 子组件必须满足的Props类型
interface ChildComponentProps {
  size: 'sm' | 'md' | 'lg';
  title: string;
}

// 父组件Props类型
interface ContainerProps {
  children: ReactElement<ChildComponentProps> | ReactElement<ChildComponentProps>[];
}

仅靠上述类型标注无法实现严格校验，必须配合后续的类型守卫和运行时检查

2. 添加类型守卫+运行时校验 #

TypeScript的类型会在编译后完全擦除，纯静态类型无法拦截所有非法传参（比如动态拼接的子元素、跨模块传入的非预期组件），需要通过校验React元素的type字段做精确判断：

// 你允许传入的合法子组件
const ValidChild = ({ size, title }: ChildComponentProps) => {
  return <div className={`card-${size}`}>{title}</div>;
};

// 自定义类型守卫，收窄子元素类型
const isValidChild = (
  node: React.ReactNode
): node is ReactElement<ChildComponentProps> => {
  return isValidElement(node) && node.type === ValidChild;
};

// 父组件实现
const Container = ({ children }: ContainerProps) => {
  const verifiedChildren = Children.map(children, (child) => {
    if (!isValidChild(child)) {
      throw new Error('Container仅支持传入ValidChild作为直接子元素');
    }
    return child;
  });

  return <div className="container">{verifiedChildren}</div>;
};

这种实现下，如果你传入非ValidChild的其他组件，开发阶段TS会做类型提示，运行时也会直接抛错，和Flow示例的行为完全一致。

补充：纯编译时校验优化 #

如果希望尽可能在编译阶段拦截错误，可以在tsconfig.json中开启严格JSX检查配置：

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "exactOptionalPropertyTypes": true
  }
}

注意：即使开启严格模式，对于动态生成的子元素、高阶组件包裹的元素，静态检查仍然可能漏判，生产环境建议保留运行时校验逻辑。

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