TypeScript 高阶组件(HOC)开发指南：从 React 官方文档到类型安全实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00297/article/details/148325424

TypeScript 高阶组件(HOC)开发指南：从 React 官方文档到类型安全实践

react 项目地址: https://gitcode.com/gh_mirrors/reactt/react-typescript-cheatsheet

高阶组件基础概念

高阶组件（Higher-Order Component，简称 HOC）是 React 中用于复用组件逻辑的高级技术。本质上，HOC 是一个函数，它接收一个组件并返回一个新的组件。

在 TypeScript 中实现 HOC 时，我们需要特别注意类型系统的配合，以确保组件间的类型安全。下面我们将基于 React 官方文档中的示例，逐步讲解如何在 TypeScript 中正确实现各种 HOC 模式。

跨组件关注点分离的 HOC 实现

React 官方文档中展示了一个用于数据订阅的 HOC 示例，我们来看它的 TypeScript 实现：

// 定义将被 HOC 注入的 props 类型
interface WithDataProps<T> {
  data: T; // 使用泛型表示数据类型
}

// T: 数据类型
// P: 被包裹组件的 props 类型（需继承 WithDataProps）
// C: 被包裹组件本身的类型（用于获取 defaultProps）
export function withSubscription<T, P extends WithDataProps<T>, C>(
  WrappedComponent: React.JSXElementConstructor<P> & C,
  selectData: (
    dataSource: typeof DataSource,
    props: Readonly<React.JSX.LibraryManagedAttributes<C, Omit<P, "data">>>
  ) => T
) {
  type Props = React.JSX.LibraryManagedAttributes<C, Omit<P, "data">>;
  type State = { data: T };

  return class WithData extends React.Component<Props, State> {
    // ...实现生命周期方法和状态管理
    
    render() {
      // 注意：这里需要将 props 断言为 any 以解决类型展开问题
      return (
        <WrappedComponent data={this.state.data} {...(this.props as any)} />
      );
    }
  };
}

这个实现的关键点在于：

使用泛型 T 来表示数据类型，使 HOC 可以处理不同类型的数据
React.JSX.LibraryManagedAttributes 用于正确处理被包裹组件的默认属性
Omit<P, "data"> 确保被包裹组件不再需要自己提供 data 属性

避免修改原组件的 HOC 模式

React 推荐使用组合而非修改的方式实现 HOC。在 TypeScript 中，我们需要特别注意 props 的类型传递：

function logProps<T>(WrappedComponent: React.ComponentType<T>) {
  return class extends React.Component {
    componentWillReceiveProps(
      nextProps: React.ComponentProps<typeof WrappedComponent>
    ) {
      console.log("Current props: ", this.props);
      console.log("Next props: ", nextProps);
    }
    
    render() {
      // 使用类型断言确保 props 类型正确
      return <WrappedComponent {...(this.props as T)} />;
    }
  };
}

这里的关键点是使用 React.ComponentProps 获取被包裹组件的 props 类型，并在渲染时正确传递这些 props。

可组合的 HOC 实现

更复杂的 HOC 可以实现为返回高阶组件的函数，类似于 react-redux 的 connect 函数。下面是一个简化版的 connect 实现：

function connect(mapStateToProps: Function, mapDispatchToProps: Function) {
  return function <T, P extends WithSubscriptionProps<T>, C>(
    WrappedComponent: React.ComponentType<T>
  ) {
    type Props = React.JSX.LibraryManagedAttributes<C, Omit<P, "data">>;
    
    return class ComponentWithTheme extends React.Component<Props> {
      public render() {
        const mappedStateProps = mapStateToProps(this.state, this.props);
        const mappedDispatchProps = mapDispatchToProps(this.state, this.props);
        
        return (
          <WrappedComponent
            {...this.props}
            {...mappedStateProps}
            {...mappedDispatchProps}
          />
        );
      }
    };
  };
}

这种模式允许我们创建高度可配置的 HOC 工厂函数，同时保持类型安全。

调试友好的 HOC 实现

为了方便调试，我们应该为 HOC 生成的组件设置显示名称：

function withSubscription<
  T extends WithSubscriptionProps = WithSubscriptionProps
>(WrappedComponent: React.ComponentType<T>) {
  class WithSubscription extends React.Component {
    /* ...实现细节... */
    
    public static displayName = `WithSubscription(${getDisplayName(
      WrappedComponent
    )})`;
  }
  
  return WithSubscription;
}

// 辅助函数：获取组件显示名称
function getDisplayName<T>(WrappedComponent: React.ComponentType<T>) {
  return WrappedComponent.displayName || WrappedComponent.name || "Component";
}