高阶组件连接Redux时无法实现强类型定义问题求助

Let's break down the TypeScript type issues you're facing and fix them step by step. The core problem is mismatched prop type definitions between your HOC, the Redux-connected component, and your base component. Here's a robust solution that lets your HOC access the Redux store, dispatch actions, and plays nicely with TypeScript:

Step 1: Clarify Prop Type Definitions #

First, explicitly separate the different categories of props to avoid confusion:

• ReduxProps: Props injected by Redux's connect (state and dispatch)
• InjectedProps: Props injected directly by your HOC
• ExternalProps: Props passed to the wrapped component from outside the HOC

import React from 'react';
import { connect, ConnectedProps } from 'react-redux';

// Redux-related props: state from mapState, dispatch/actions from mapDispatch
type ReduxStateProps = { reduxProp: string };
type ReduxDispatchProps = {
  // Add your action creators here, or just include dispatch if needed
  dispatch: React.Dispatch<any>;
};
type ReduxProps = ReduxStateProps & ReduxDispatchProps;

// Props injected by your HOC
type InjectedProps = { injectedProp: string };

// Base component props: combines external props, HOC-injected props, and any Redux props you want to pass through
type BaseComponentProps<ExternalProps> = ExternalProps & InjectedProps & ReduxStateProps;

Step 2: Rewrite the HOC with Correct Typing #

We'll use Redux's ConnectedProps helper (available in react-redux@7.1+) to automatically infer the props injected by connect, which simplifies type handling. The HOC will:

1. Accept a base component that expects BaseComponentProps
2. Create an internal component that receives external props + Redux props
3. Connect to Redux, then inject both Redux data and your custom injectedProp into the base component

const SomeHoc = <ExternalProps extends {}>(
  BaseComponent: React.ComponentType<BaseComponentProps<ExternalProps>>
) => {
  // Internal component that holds Redux access and injects props
  class InjectorHoc extends React.Component<ExternalProps & ReduxProps> {
    // Example: Use Redux dispatch directly in the HOC
    componentDidMount() {
      // this.props.dispatch({ type: 'YOUR_ACTION_TYPE' });
    }

    render() {
      // Split props to avoid passing redundant data to the base component
      const { reduxProp, dispatch, ...externalProps } = this.props;

      return (
        <BaseComponent
          {...externalProps as ExternalProps}
          reduxProp={reduxProp} // Pass Redux state prop to base component (optional)
          injectedProp="custom-injected-value" // Your HOC's injected prop
        />
      );
    }
  }

  // Map Redux state to props
  const mapStateToProps = (state: any): ReduxStateProps => ({
    reduxProp: state.yourReducer.targetValue, // Replace with your actual state selector
  });

  // Map dispatch (or action creators) to props
  const mapDispatchToProps = (dispatch: React.Dispatch<any>): ReduxDispatchProps => ({
    dispatch,
    // Example: Map an action creator:
    // yourAction: () => dispatch(yourActionCreator()),
  });

  // Connect to Redux, and use ConnectedProps to infer the injected props
  const connector = connect(mapStateToProps, mapDispatchToProps);
  type ConnectedInjectorProps = ConnectedProps<typeof connector> & ExternalProps;

  // Fix type mismatch by asserting the connected component's props
  const ConnectedInjectorHoc = connector(InjectorHoc) as React.ComponentType<ExternalProps>;

  return ConnectedInjectorHoc;
};

Why This Fixes Your Original Errors #

1. First Type Error: Your original code tried to cast Omit<P, InjectedProps> & ReduxProps directly to P, which TypeScript rejected because it couldn't confirm overlap. By splitting props explicitly and merging them into the exact shape the base component expects (BaseComponentProps), we eliminate unsafe type casts and satisfy TypeScript's type checker.

2. Second Connect Error: The connect function was receiving ambiguous prop types. By using ConnectedProps to infer the props injected by Redux, and explicitly separating external vs. injected props, we align the types between the connected component and the HOC's input/output.

Usage Example #

// Define external props your component needs
type MyComponentExternalProps = { someClassProp: string };

// Base component that uses all combined props
class BaseClass extends React.Component<BaseComponentProps<MyComponentExternalProps>> {
  render() {
    return (
      <div>
        <p>External Prop: {this.props.someClassProp}</p>
        <p>Injected Prop: {this.props.injectedProp}</p>
        <p>Redux Prop: {this.props.reduxProp}</p>
      </div>
    );
  }
}

// Wrap the base component with your HOC
const WrappedComponent = SomeHoc(BaseClass);

// Use the wrapped component: only pass external props
<WrappedComponent someClassProp="Hello from external!" />;

Key Takeaways #

• Separate Prop Categories: Clear separation of external, Redux, and HOC-injected props avoids type confusion.
• Leverage Redux Type Helpers: ConnectedProps simplifies inferring the props injected by connect.
• Avoid Unsafe Casts: Explicitly merge props instead of relying on broad type assertions.

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