在TypeScript中使用高阶组件省略React组件属性

我来帮你解决这个高阶组件的类型问题！咱们先聊聊你原来代码里的小问题，再给出正确的实现方案。

原代码的问题点 #

你用了Exclude<P, "world">来移除属性，但Exclude是用来处理联合类型的，而P是一个对象类型，这里应该用专门处理对象属性的Omit<P, K>工具类型。另外，你的HOC返回类型是原组件类T，但实际上包装后的组件props已经变了，不能直接返回原类型，得定义一个新的组件类类型。

正确的实现方案 #

下面是一个通用的、类型安全的HOC，它可以接收任意React组件类，指定要省略的属性，返回一个不需要传该属性的新组件：

import React from 'react';

// 示例组件的Props和State
interface MyProps { hello: string; world: number; }
interface MyState { }

/**
 * 高阶组件：省略指定属性，自动为原组件提供该属性的值
 * @param Component 要包装的React组件类
 * @param propToOmit 要省略的属性名
 * @returns 新的组件类，props为原props移除指定属性后的类型
 */
function hocThatOmitsProperty<
  P extends object,
  S,
  K extends keyof P
>(
  Component: new (props: P, context?: any) => React.Component<P, S>,
  propToOmit: K
): new (props: Omit<P, K>) => React.Component<Omit<P, K>, S> {
  return class WrappedComponent extends React.Component<Omit<P, K>, S> {
    render() {
      // 这里可以写自动提供省略属性的逻辑，比如从context取、设默认值等
      const omittedPropValue = 42; // 示例默认值

      // 把当前props和补充的省略属性传给原组件
      return (
        <Component
          {...this.props}
          {...{ [propToOmit]: omittedPropValue } as Pick<P, K>}
        />
      );
    }
  };
}

// 定义原组件
const MyComponent = class extends React.Component<MyProps, MyState> {
  render() {
    return <div>{this.props.hello}, 数字是{this.props.world}</div>;
  }
};

// 使用HOC包装，省略"world"属性
const WrappedComponent = hocThatOmitsProperty(MyComponent, 'world');

// 正确用法：只需要传hello属性
<WrappedComponent hello="你好呀" />;

// 错误用法：TypeScript会报错，因为world属性已经被省略了
// <WrappedComponent hello="你好" world={123} />;

关键知识点解析 #

• Omit<P, K>：TypeScript内置工具类型，用来移除对象类型P中的K属性，正好符合我们的需求。
• 泛型参数K extends keyof P：确保要省略的属性名确实存在于原组件的props中，避免传错属性名。
• 返回类型：返回的新组件类，其props类型是Omit<P, K>，这样TypeScript会在使用时自动校验props的正确性。
• 属性补充：在HOC内部，我们需要把省略的属性补充后传给原组件，用as Pick<P, K>做类型断言，告诉TypeScript我们补充的属性是符合原组件要求的。

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