如何用TypeScript泛型为多React组件数组实现Props与组件类型匹配？

我们需要为无法修改源码的API编写TypeScript类型定义，其中add函数支持向主程序添加任意数量的React组件，要求每个子组件条目里的props属性必须与component指定的组件的props类型严格匹配。已知单个组件的重载类型定义，现在扩展到多组件场景。

解决方案 #

首先定义单个子组件的约束类型，再通过泛型数组（可变元组）实现任意数量子组件的类型检查：

1. 定义辅助类型 #

import type { ComponentType } from 'react';

// 单个子组件条目，确保props与component的props类型绑定
type ComponentEntry<P = unknown> = {
  id: string;
  component: ComponentType<P>;
  props: P;
};

2. 编写add函数的重载类型 #

保留已实现的单个组件重载，新增支持多组件的重载：

// 单个组件的重载（已实现）
function add<T>(id: string, component: ComponentType<T>, props: T): void;

// 多组件重载：支持任意数量子组件，每个子项的props与component严格匹配
function add<T extends ComponentEntry[]>(
  arg1: string, // 替换为arg1的真实类型，比如string/number等
  arg2: string, // 替换为arg2的真实类型
  options: {
    // 补充其他需要的属性
    children: [...T]; // 可变元组确保TS精确推断每个子项的类型
  }
): void;

// 声明函数实现（仅类型定义时使用）
declare function add(...args: any[]): void;

验证示例 #

正确调用（类型匹配） #

// 示例组件
const BackButton = (props: { onClick: () => void }) => <button {...props}>返回</button>;
const SkipButton = (props: { text: string }) => <button {...props}>跳过</button>;

add('arg1', 'arg2', {
  children: [
    {
      id: 'back-btn',
      component: BackButton,
      props: { onClick: () => console.log('返回') } // 符合BackButton的props类型
    },
    {
      id: 'skip-btn',
      component: SkipButton,
      props: { text: '跳过' } // 符合SkipButton的props类型
    }
  ]
});

错误调用（类型不匹配，TS会报错） #

add('arg1', 'arg2', {
  children: [
    {
      id: 'back-btn',
      component: BackButton,
      props: { text: '返回' } // TS报错：缺少BackButton要求的onClick属性
    }
  ]
});

关键说明 #

• ComponentEntry<P> 通过泛型P绑定component的props类型和props属性，确保两者完全匹配。
• 使用[...T]可变元组类型，让TypeScript能够精确推断数组中每个子项的具体类型，而不是将所有子项的props合并为宽泛的联合类型。
• 替换arg1和arg2的string类型为它们的真实类型（比如如果是数字或其他类型），保证参数类型的准确性。

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