使用 TypeScript 对 React 高阶组件进行类型注释

IT技术 reactjs typescript
2021-04-25 10:34:49

我正在使用 Typescript 为我的 React 项目编写一个高阶组件，它基本上是一个函数，它接受一个 React 组件作为参数并返回一个围绕它的新组件。

然而，正如预期的那样，TS 抱怨“导出函数的返回类型具有或正在使用私有名称“匿名类”。

有问题的功能：

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component,
) {
    return class extends React.Component<Props & State, {}> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

该错误是合理的，因为包装函数的返回类未导出，并且其他module导入此函数无法知道返回值是什么。但是我不能在此函数之外声明返回类，因为它需要将组件传递包装到外部函数。

typeof React.Component像下面这样明确指定返回类型的试验确实抑制了这个错误。

具有显式返回类型的相关函数：

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component,
): typeof React.Component {                     // <== Added this
    return class extends React.Component<Props & State, {}> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

但是，我不确定这种方法的有效性。它被认为是解决 TypeScript 中这个特定错误的正确方法吗？（或者我是否在其他地方产生了意想不到的副作用？或者有更好的方法吗？）

（编辑）根据丹尼尔的建议更改引用的代码。

2个回答

使用 TypeScript 对 React 高阶组件进行类型注释

返回类型typeof React.Component是真实的，但对包装组件的用户帮助不大。它丢弃有关组件接受哪些 props 的信息。

React 类型为此目的提供了一个方便的类型，React.ComponentClass. 它是类的类型，而不是从该类创建的组件的类型：

React.ComponentClass<Props>

（请注意，state未提及类型，因为它是内部细节）。

在你的情况下：

export default function wrapperFunc <Props, State, CompState> (
    WrappedComponent: typeof React.Component,
): React.ComponentClass<Props & State> {
    return class extends React.Component<Props & State, CompState> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

但是，您对WrappedComponent参数执行相同的操作。根据您在 inside 中使用它的方式render，我猜它也应该声明：

WrappedComponent: React.ComponentClass<Props & State>,

但这是一个疯狂的猜测，因为我认为这不是完整的函数（CompState未使用，也Props & State可能是单个类型参数，因为它总是出现在该组合中）。

更适合输入参数的类型是React.ComponentType，因为它也处理无状态组件。

type ComponentType<P = {}> = ComponentClass<P> | StatelessComponent<P>

以下是阐明其用法的示例。

import * as React from 'react';

export default function <P = {}>(
  WrappedComponent: React.ComponentType<P>
): React.ComponentClass<P> {
  return class extends React.Component<P> {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}
其它你可能感兴趣的问题
上一篇电源供电的加热床安全 下一篇生命周期：在 componentDidMount 之前调用 componentWillReceiveProps