TypeScript中openModal函数传参类型不兼容问题咨询

问题原因 #

你遇到的类型错误核心在于：TypeScript无法确认你手动传入的onClose和用户提供的props合并后，能完全匹配泛型I的约束。虽然I extends Closeable<any>，但I可以是Closeable的任意子类型——比如它的onClose可能有更严格的参数类型，或者包含其他与你传入的key、onClose不兼容的属性，TypeScript出于类型安全会抛出错误。

修复方案 #

调整泛型参数的定义逻辑，让TypeScript能明确推导props和onClose合并后的类型与模态组件的props类型匹配。具体实现如下：

// 保持原Closeable接口不变
export interface Closeable<T = undefined> {
  onClose: (result: T) => void
}

const openModal = <
  P extends Record<string, unknown>,
  R = P extends Closeable<infer T> ? T : undefined
>(
  Modal: React.ComponentType<P & Closeable<R>>,
  ...props: keyof Omit<P, 'onClose'> extends never ? [] : [Omit<P, 'onClose'>]
): Promise<R> =>
  new Promise<R>(resolve => {
    const id = uuidv4();
    const onClose = (result: R): void => {
      resolve(result);
      // 这里可添加自定义关闭逻辑
    };

    // TypeScript现在能确认合并后的props符合组件要求
    const element = <Modal key={id} onClose={onClose} {...(props[0] || {})} />;
    // 补充渲染逻辑（如添加到DOM或上下文）
  });

关键调整点 #

• 将用户传入的props（不含onClose）作为第一个泛型参数P，让TypeScript优先推导这个更具体的类型
• 组件props类型定义为P & Closeable<R>，明确组件需要的是用户props加上onClose
• 用Omit<P, 'onClose'>约束传入的props，确保用户不会传入onClose属性
• 基于P与Closeable的关系推导R，保证返回类型与onClose的参数类型一致

如果不需要单独提取P，还可以用更简洁的写法：

const openModal = <R = undefined>(
  Modal: React.ComponentType<Closeable<R> & Record<string, unknown>>,
  props?: Omit<React.ComponentProps<typeof Modal>, 'onClose'>
): Promise<R> =>
  new Promise<R>(resolve => {
    const id = uuidv4();
    const onClose = (result: R): void => {
      resolve(result);
    };

    const element = <Modal key={id} onClose={onClose} {...props} />;
  });

这种写法直接用ComponentProps提取模态组件的props类型，再通过Omit去掉onClose，类型推导更直接。

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