TypeScript泛型扩展默认类型时出现类型冲突问题求助

问题背景 #

我正在实现一个返回Modal组件的Hook，通过泛型给注入的Body组件添加额外类型定义。Hook内部会提供onClose函数传递给Body组件，但遇到了TypeScript类型错误。

相关类型定义 #

// Body组件默认接收的props
export type DefaultBodyComponentProps = { onClose: () => void };

// Hook的配置类型，bodyComponent接收B和默认props的联合类型
export type ConnectModalConfig<B extends object> = {
  bodyComponent?: React.ComponentType<B & DefaultBodyComponentProps>;
};

// 返回的Modal组件接收的props，用于传递给Body组件的自定义属性
export type ModalProps<B> = { bodyProps?: B };

Hook使用方式 #

const [Modal, modalActions] = useConnectedModal<BodyProps>({
  bodyComponent: Body,
});

Modal组件使用：

<Modal bodyProps={/* 符合BodyProps类型的属性 */} />

Hook内部实现 #

export default function useConnectedModal<B extends object = object>(
  props: ConnectModalConfig<B>,
) {
  const { bodyComponent: BodyComponent = DefaultBodyComponent } = props;
  
  const Modal = (props: ModalProps<B>) => {
    const { bodyProps } = props;
    const onClose = () => { /* 关闭逻辑 */ };
    
    return (
      <Wrapper>
        <BodyComponent {...bodyProps} onClose={onClose} />
      </Wrapper>
    );
  };
  
  return [Modal];
}

遇到的TypeScript错误 #

Type '{ onClose: () => void; }' is not assignable to type 'B'.
'{ onClose: () => void; }' is assignable to the constraint of type 'B', but 'B' could be instantiated with a different subtype of constraint 'object'.

解决方案 #

问题根源是TypeScript无法确认泛型B是否兼容混入的onClose——因为B可能被定义为明确排除onClose的类型（比如{ onClose?: never }），导致合并后的props类型不匹配。这里提供两种解决思路：

方案一：重构类型约束（推荐，类型更安全） #

把泛型B定义为Body组件的完整props类型（必须包含默认的onClose），再提取用户需要传入的自定义props部分：

1. 调整类型定义

export type DefaultBodyComponentProps = { onClose: () => void };

// bodyComponent的props必须包含默认的onClose
export type ConnectModalConfig<B extends DefaultBodyComponentProps> = {
  bodyComponent?: React.ComponentType<B>;
};

// Modal接收的bodyProps是B中排除默认props后的部分
export type ModalProps<B extends DefaultBodyComponentProps> = {
  bodyProps?: Omit<B, keyof DefaultBodyComponentProps>;
};

2. 修改Hook实现

export default function useConnectedModal<B extends DefaultBodyComponentProps = DefaultBodyComponentProps>(
  props: ConnectModalConfig<B>,
) {
  // 类型断言确保默认组件符合泛型B的约束
  const { bodyComponent: BodyComponent = DefaultBodyComponent as React.ComponentType<B> } = props;
  
  const Modal = (props: ModalProps<B>) => {
    const { bodyProps } = props;
    const onClose = () => { /* 关闭逻辑 */ };
    
    // 合并自定义props和内部onClose，完全匹配B的类型
    const mergedProps = { ...bodyProps, onClose } as B;
    
    return (
      <Wrapper>
        <BodyComponent {...mergedProps} />
      </Wrapper>
    );
  };
  
  return [Modal];
}

3. 使用示例

// 定义Body组件的完整props类型
type BodyComponentProps = {
  title: string;
  onClose: () => void; // 必须包含默认props
};

const [Modal] = useConnectedModal<BodyComponentProps>({
  bodyComponent: Body,
});

// 使用时只需传入自定义属性，onClose由Hook内部提供
<Modal bodyProps={{ title: "示例弹窗" }} />

方案二：类型断言（快速修复，类型安全稍弱） #

如果不想改动原有泛型逻辑，可以通过类型断言告诉TypeScript，合并后的props符合B & DefaultBodyComponentProps类型：

// 在Modal组件的return中修改：
<BodyComponent {...(bodyProps as B & DefaultBodyComponentProps)} onClose={onClose} />

这种方式跳过了部分类型检查，适合快速解决问题，但长期来看不如方案一健壮。

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