使用高阶组件时，如何用TypeScript定义Props解决属性注入类型报错？

嘿，我来帮你搞定这个TypeScript类型报错的问题！这个错误本质上是因为你的高阶组件（HOC）withPropsB的类型定义没有正确保留原始组件的Props信息，导致TypeScript误以为包装后的组件只接受HOC注入的PropB，不识别父组件传入的PropA。

下面是具体的解决方案，一步步来：

1. 先明确各个Props的类型定义 #

首先把PropA和PropB的接口清晰定义出来，这是类型推导的基础：

// 父组件需要传入的Props
interface PropA {
  propA: string; // 根据你的实际业务调整类型，比如number、boolean等
}

// HOC要注入的Props
interface PropB {
  propB: number; // 同样按需修改类型
}

2. 给withPropsB定义正确的泛型类型 #

核心是用泛型让HOC能适配任意需要PropB的组件，同时保留原始组件的其他Props（也就是PropA）：

import React from 'react';

// HOC的类型定义：
// - 接收一个需要PropB的组件（组件的Props P必须包含PropB）
// - 返回一个只需要原始组件去掉PropB后的Props的组件（也就是只需要PropA）
function withPropsB<P extends PropB>(
  Component: React.ComponentType<P>
): React.ComponentType<Omit<P, keyof PropB>> {
  // 这里是你的HOC实现逻辑，注入PropB
  return (props) => {
    // 模拟注入PropB的逻辑，实际可以根据业务动态生成
    const injectedPropB: PropB = { propB: 42 };
    // 把父组件传入的props和注入的PropB一起传给原始组件
    return <Component {...props} {...injectedPropB} />;
  };
}

3. 正确使用HOC和组件 #

你的目标组件需要声明同时接受PropA和PropB，然后用HOC包装后，客户端只需要传入PropA即可：

// 目标组件：需要同时接收PropA和PropB
const MyComponent: React.FC<PropA & PropB> = ({ propA, propB }) => {
  return <div>PropA: {propA}, PropB: {propB}</div>;
};

// 用HOC包装组件，此时WrappedComponent只需要传入PropA
const WrappedComponent = withPropsB(MyComponent);

// 客户端使用时，传入PropA就不会报错了
const App = () => {
  return <WrappedComponent propA="Hello from Parent" />;
};

为什么这样能解决问题？ #

• 泛型P extends PropB确保传入HOC的组件确实依赖PropB，TypeScript会做类型检查。
• Omit<P, keyof PropB>告诉TypeScript：包装后的组件不需要再传入PropB（因为HOC已经注入了），只需要传入原始组件Props中除了PropB之外的部分——也就是PropA，这样就不会再出现“Property 'propA' does not exist”的报错了。

如果你的HOC需要额外的配置参数，也可以扩展泛型，比如：

// 带配置参数的HOC类型
function withPropsB<Config, P extends PropB>(
  config: Config
): (Component: React.ComponentType<P>) => React.ComponentType<Omit<P, keyof PropB>> {
  return (Component) => {
    return (props) => {
      // 根据config生成注入的PropB
      const injectedPropB: PropB = { propB: config.someValue };
      return <Component {...props} {...injectedPropB} />;
    };
  };
}

// 使用方式
const WrappedComponent = withPropsB({ someValue: 100 })(MyComponent);

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