如何根据泛型接口P的属性情况控制函数参数props的必填性？

你需要实现的是根据泛型类型P是否包含onClose以外的属性，动态控制函数参数props的必填性或禁止传入，下面是具体的实现方案：

核心思路 #

通过条件类型判断泛型P是否仅包含onClose属性，再结合函数重载分别定义两种场景下的参数规则：

1. 当P存在onClose以外的属性时，props为必填项，类型为Omit<P, 'onClose'>
2. 当P仅包含onClose属性时，禁止传入props参数

完整代码实现 #

import type { ComponentType } from 'react';

export interface Closeable {
  onClose: () => void;
}

// 辅助类型：判断泛型P是否仅包含onClose属性
type IsOnlyCloseable<P extends Closeable> = Exclude<keyof P, 'onClose'> extends never ? true : false;

// 函数重载：分别定义两种场景的参数规则
export function openWindow<P extends Closeable>(window: ComponentType<P>, props: Omit<P, 'onClose'>): void;
export function openWindow<P extends Closeable>(window: ComponentType<P>, props?: never): void;

// 函数实际实现
export function openWindow<P extends Closeable>(window: ComponentType<P>, props?: Omit<P, 'onClose'>): void {
  // 这里添加你的业务逻辑，比如渲染弹窗、传递参数等
}

代码说明 #

• 辅助类型IsOnlyCloseable：通过Exclude<keyof P, 'onClose'>剔除onClose属性后，若剩余键为never，则说明P仅包含onClose
• 函数重载：
  • 第一个重载对应P包含额外属性的场景，强制要求传入props
  • 第二个重载对应P仅含onClose的场景，用props?: never禁止传入任何参数（包括空对象）
• 实现部分：用可选参数兼容两种场景，内部可根据props是否存在做对应处理

测试示例 #

// 场景1：仅包含onClose的组件
const SimpleWindow: ComponentType<Closeable> = ({ onClose }) => (
  <div onClick={onClose}>点击关闭</div>
);
openWindow(SimpleWindow); // ✅ 正确，无需传props
openWindow(SimpleWindow, {}); // ❌ 报错，禁止传入props

// 场景2：包含额外属性的组件
interface ComplexWindowProps extends Closeable {
  title: string;
  content: string;
}
const ComplexWindow: ComponentType<ComplexWindowProps> = ({ title, content, onClose }) => (
  <div>
    <h2>{title}</h2>
    <p>{content}</p>
    <button onClick={onClose}>关闭</button>
  </div>
);
openWindow(ComplexWindow); // ❌ 报错，必须传入title和content
openWindow(ComplexWindow, { title: '测试弹窗', content: '这是测试内容' }); // ✅ 正确

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