React实现带禁用消息的包装组件的TypeScript类型错误解决

核心思路 #

明确约束高阶组件接收的组件类型（必须包含disabled: boolean属性），同时重新定义增强后的Props类型，将disabled扩展为boolean | string，确保传递给原组件的参数类型完全匹配，避免类型断言。

完整实现代码 #

import React from 'react';

// 约束基础组件必须包含 disabled: boolean 属性
type DisabledBaseProps = { disabled: boolean };

// 生成增强后的Props：替换原disabled类型为 boolean | string
type EnhancedComponentProps<T extends DisabledBaseProps> = 
  Omit<T, 'disabled'> & { disabled: boolean | string };

export function withDisabledMessage<T extends DisabledBaseProps>(
  Component: React.ComponentType<T>
): React.ComponentType<EnhancedComponentProps<T>> {
  return (props) => {
    const { disabled, ...restProps } = props;
    // 转换为原组件需要的boolean类型disabled值
    const componentDisabled = typeof disabled !== 'boolean' || disabled;
    // 提取禁用提示文本
    const disabledTip = typeof disabled === 'string' ? disabled : undefined;

    return (
      <div className="disabled-wrapper">
        {disabledTip && <span className="disabled-tip">{disabledTip}</span>}
        {/* 无需类型断言：restProps 是 Omit<T, 'disabled'>，componentDisabled 是 boolean，完全匹配原组件的Props */}
        <Component {...restProps} disabled={componentDisabled} />
      </div>
    );
  };
}

用法示例 #

// 定义一个支持disabled的基础组件
type CustomButtonProps = {
  disabled: boolean;
  text: string;
  onClick?: () => void;
};

const CustomButton: React.FC<CustomButtonProps> = ({ disabled, text, onClick }) => (
  <button disabled={disabled} onClick={onClick}>
    {text}
  </button>
);

// 用高阶组件增强
const ButtonWithTip = withDisabledMessage(CustomButton);

// 调用增强后的组件
function App() {
  return (
    <div>
      {/* 传入字符串作为disabled，显示提示+禁用状态 */}
      <ButtonWithTip disabled="请先完成实名认证" text="提交申请" />
      {/* 传入boolean值，正常禁用/启用 */}
      <ButtonWithTip disabled={true} text="保存" />
      <ButtonWithTip disabled={false} text="编辑" onClick={() => alert('编辑')} />
    </div>
  );
}

错误原因分析 #

之前出现TS2322错误，大概率是因为：

1. 泛型T没有明确约束为必须包含disabled: boolean，导致类型检查无法确认原组件接受的disabled类型
2. 传递给原组件的props类型没有正确拆分，导致TS无法识别restProps与原组件Props的匹配关系

通过上述实现，我们通过Omit和交叉类型明确了增强后的Props结构，同时确保传递给原组件的disabled是严格的boolean类型，完全符合原组件的类型要求，因此无需类型断言即可通过TS检查。

内容的提问来源于stack exchange，提问作者THX-1138