如何用函数式组件实现Hook从T中剔除指定Props

在TypeScript+React项目中，类组件版本的withHook函数可以正常从泛型T中剔除someProps类型，返回的组件只需传入剩余Props即可。但改成函数式组件的withHookFn时，出现类型错误：Property 'boo' is missing in type '{ msg: string; }' but required in type 'someProps'，核心问题是Subtract工具类型没有正确生效。

错误根源 #

原withHookFn存在两个关键问题：

• 返回的函数组件接收的props类型错误地写为T，导致调用时仍要求传入someProps中的属性
• 返回类型定义不符合实际元素类型

修正后的完整代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Subtract } from "utility-types";
import reportWebVitals from './reportWebVitals';

interface upperMsgProps {
  msg: string;
}

class upperMsg extends React.Component<upperMsgProps & someProps> {
  render() {
    return <div>msg is: {this.props.msg} / boo is: {this.props.boo}</div>;
  }
}

// 现在用修正后的withHookFn可正常工作
const UpperMsgWHOC = withHookFn(upperMsg);

function App() {
  return <UpperMsgWHOC msg={"asd"}/>;
}

interface someProps {
  boo: string;
}

// 类组件版本高阶组件（正常工作）
function withHook<T extends someProps>(WComp: React.ComponentType<T>) {
  return class extends React.Component<Subtract<T, someProps>> {
    render() {
      return <WComp
        {...this.props as T}
        boo={"boo-val"}
      />;
    }
  };
}

// 修正后的函数式高阶组件
function withHookFn<T extends someProps>(WComp: React.ComponentType<T>) {
  // 接收剔除someProps后的Props类型
  return function (props: Subtract<T, someProps>) {
    // 合并传入Props与注入的boo，断言为T以满足组件要求
    return <WComp {...props} boo={"boo-val"} as T />;
  };
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);
reportWebVitals();

关键修正点 #

1. Props类型修正：将返回函数的参数类型从T改为Subtract<T, someProps>，确保调用组件时只需传入剩余Props
2. 类型断言：合并传入Props与手动注入的boo后，通过as T断言为组件所需的完整Props类型，让TypeScript通过检查
3. 返回类型简化：无需显式定义返回类型，TypeScript会自动推断出正确的React.ReactElement类型

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