如何为泛型React组件数组及其属性编写正确的TypeScript类型

我来帮你搞定这个TypeScript严格模式下的类型兼容问题，核心是要让每个模态条目里的组件和props建立强类型绑定，同时保留SharedModalProps的泛型灵活性。下面是完整的可运行解决方案：

1. 先把基础类型定义做扎实 #

首先，我们明确所有模态组件的props必须继承自带泛型的SharedModalProps，然后定义一个ModalEntry类型，专门用来绑定某个组件和它对应的props类型：

import React, { ComponentType, ComponentProps } from 'react';

// 公共模态props，泛型TResult对应onHide回调的返回值类型
interface SharedModalProps<TResult> {
  show: boolean;
  onHide?: (result: TResult) => void;
}

// 单个模态条目：组件必须接收继承自SharedModalProps的props
type ModalEntry<TProps extends SharedModalProps<any>> = {
  Component: ComponentType<TProps>;
  props: TProps;
};

2. 改造ModalService的类型约束 #

接下来，我们给ModalService的modals数组和addModal方法加上严格的类型约束，确保传入的组件和props完全匹配：

class ModalService {
  // 存储所有模态条目，每个条目都是对应props类型的ModalEntry
  private modals: Array<ModalEntry<any>> = [];

  // 泛型方法：约束TProps必须符合SharedModalProps规范，同时绑定组件和props类型
  addModal<TProps extends SharedModalProps<any>>(
    component: ComponentType<TProps>,
    props: TProps
  ): void {
    this.modals.push({ Component: component, props });
  }

  // 提供一个安全的获取方法（避免外部直接修改modals数组）
  getModals(): Array<ModalEntry<any>> {
    return [...this.modals];
  }
}

3. 修正ModalManager的渲染逻辑 #

注意你原来的代码里用了forEach，它不会返回JSX元素，得改成map才能正确渲染：

const ModalManager = () => {
  const modalService = useInjector(ModalService);
  const modals = modalService.getModals();

  return (
    <div className="modal-collection">
      {modals.map(({ Component, props }, index) => (
        <Component key={index} {...props} />
      ))}
    </div>
  );
};

4. 给具体模态组件加上明确的props类型 #

保持你原来的组件逻辑，只需要给组件加上明确的props类型定义，确保它们继承自对应的SharedModalProps：

// AboutModal的props类型，继承自SharedModalProps<boolean>（onHide返回布尔值）
interface AboutModalProps extends SharedModalProps<boolean> {
  name: string;
}

// RandomNumberModal的props类型，继承自SharedModalProps<number>（onHide返回数字）
interface RandomNumberModalProps extends SharedModalProps<number> {
  min: number;
  max: number;
}

// 定义AboutModal组件，明确接收AboutModalProps
const AboutModal = (props: AboutModalProps) => {
  return (
    <div className={`about-modal ${props.show ? 'is-visible' : ''}`}>
      Hi {props.name}, welcome to this bizarre example
      <button onClick={() => props.onHide?.(true)}>Close</button>
    </div>
  );
};

// 定义RandomNumberModal组件，明确接收RandomNumberModalProps
const RandomNumberModal = (props: RandomNumberModalProps) => {
  const randomNum = Math.round(Math.random() * (props.max - props.min)) + props.min;
  return (
    <div className={`random-modal ${props.show ? 'is-visible' : ''}`}>
      Today's random number is: {randomNum}
      <button onClick={() => props.onHide?.(randomNum)}>Close</button>
    </div>
  );
};

5. 现在用起来就完全类型安全了 #

调用addModal的时候，TypeScript会自动推断组件的props类型，提供精准的代码补全，而且严格模式下会及时报错：

// ✅ 正确：props完全匹配AboutModalProps
modalService.addModal(AboutModal, { 
  show: false, 
  onHide: (result) => console.log(result), 
  name: "Uzair" 
});

// ✅ 正确：props完全匹配RandomNumberModalProps
modalService.addModal(RandomNumberModal, { 
  show: true, 
  onHide: (num) => saveResult(num), 
  min: 500, 
  max: 1000 
});

// ❌ 错误：缺少name属性，TypeScript会直接报错
modalService.addModal(AboutModal, { show: false });

核心原理说明 #

• ModalEntry<TProps>通过泛型把组件和它的props类型牢牢绑定，确保每个模态条目里的props和组件完全兼容。
• addModal的泛型约束TProps extends SharedModalProps<any>保证了所有添加的模态组件都遵守公共props规范，同时保留了TResult的灵活性（可以是boolean、number或者其他类型）。
• 严格模式下，TypeScript会自动做类型检查，编辑器也能提供完整的代码补全，完全不需要禁用严格模式。

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