如何为含React组件及其Props的数组定义TypeScript类型？

你需要实现组件与对应Props类型强关联的数组，无需手动为每个项标注props类型，以下是两种可行方案：

方案一：用辅助函数自动推导类型（推荐） #

通过辅助函数让TypeScript自动推导数组元素的类型，扩展性更强，新增组件时无需手动更新类型定义：

import type { ComponentType } from 'react';

// 保留你定义的泛型类型
type ComponentWithProps<T> = {
  Component: ComponentType<T>;
  props: T;
};

// 辅助函数：自动推导传入项的类型关联
const createComponentsArray = <T extends ComponentWithProps<any>[]>(...items: T) => items;

// 示例组件与Props类型
type Component1Props = { foo: string };
const Component1 = (props: Component1Props) => <div>{props.foo}</div>;

type Component2Props = { bar: number };
const Component2 = (props: Component2Props) => <div>{props.bar}</div>;

// 创建数组：无需手动标注props类型，TypeScript自动校验匹配关系
const componentsArray = createComponentsArray(
  { Component: Component1, props: { foo: '示例文本' } },
  { Component: Component2, props: { bar: 456 } }
);

// 安全使用数组
componentsArray.map(({ Component, props }, index) => (
  <Component key={index} {...props} />
));

方案二：手动定义联合类型数组 #

如果组件列表固定，可直接手动定义包含所有组件类型的联合数组：

import type { ComponentType } from 'react';

type ComponentWithProps<T> = {
  Component: ComponentType<T>;
  props: T;
};

// 示例组件与Props类型
type Component1Props = { foo: string };
const Component1 = (props: Component1Props) => <div>{props.foo}</div>;

type Component2Props = { bar: number };
const Component2 = (props: Component2Props) => <div>{props.bar}</div>;

// 手动定义数组的联合类型
type ComponentsArray = Array<
  ComponentWithProps<Component1Props> | ComponentWithProps<Component2Props>
>;

// 创建数组时自动校验类型匹配
const componentsArray: ComponentsArray = [
  { Component: Component1, props: { foo: '示例文本' } },
  { Component: Component2, props: { bar: 456 } }
];

// 安全使用数组
componentsArray.map(({ Component, props }, index) => (
  <Component key={index} {...props} />
));

核心原理 #

两种方案都利用TypeScript泛型的强关联特性，让Component的ComponentType<T>与props的T绑定，确保每个数组项的组件和props类型完全匹配，避免手动断言带来的类型风险。

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