泛型类型约束问题：如何定义兼容BaseModalProps的组件类型

问题分析 #

你需要限制dynamicModal只能接收props继承自BaseModalProps的React组件，原代码的泛型写法不符合TypeScript语法规范，需要调整类型定义逻辑。

正确实现方案 #

利用TypeScript的子类型协变特性，结合React.ComponentType（或FC）来约束组件的props类型：

import { FC, ComponentType } from 'react';

interface BaseModalProps {
  name: string;
}

interface AddToListModalProps extends BaseModalProps {
  name: string;
  age: number;
}

export const AddToListModal: FC<AddToListModalProps> = ({ name, age }) => (
  <h1>{`${name} ${age.toString()}`}</h1>
);

// 正确写法：约束组件props必须是BaseModalProps的子类型
export const dynamicModal: ComponentType<BaseModalProps> = AddToListModal;

为什么这样可行？ #

• ComponentType<P>是React提供的通用组件类型，代表接受props类型P的组件。
• 当组件的props类型（如AddToListModalProps）是BaseModalProps的子类型时，符合TypeScript的子类型赋值规则，可以安全赋值给ComponentType<BaseModalProps>类型的变量。
• 如果尝试赋值props不继承BaseModalProps的组件，TypeScript会直接触发类型错误：

// 示例：不符合要求的组件会报错
interface BadModalProps {
  title: string;
}
export const BadModal: FC<BadModalProps> = ({ title }) => <h1>{title}</h1>;

// 此处会触发类型错误：类型'FC<BadModalProps>'不能赋值给类型'ComponentType<BaseModalProps>'
export const dynamicModal: ComponentType<BaseModalProps> = BadModal;

可选：抽离专用类型 #

如果需要更清晰的语义，可以抽离一个专用类型：

// 定义专用类型，约束组件props必须继承BaseModalProps
type ModalComponent<T extends BaseModalProps = BaseModalProps> = ComponentType<T>;

export const dynamicModal: ModalComponent = AddToListModal;

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