使用 TypeScript 对 React 高阶组件进行类型注释 [英] Type annotation for React Higher Order Component using TypeScript

问题描述

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

I am writing a Higher Order Component for my React project using Typescript which is basically a function accepts a React component as an argument and return a new component that wraps around it.

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

Yet as it works as expected, TS is complaining that "Return type of exported function has or is using private name "Anonymous class".

有问题的功能:

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} />;
        }
    };
}

这个错误是合理的，因为包装函数的返回类没有导出，其他模块导入这个函数无法知道返回值是什么.但是我不能在这个函数之外声明返回类，因为它需要包装一个组件传递给外部函数.

The error is reasonable as the returning class of wrapper function is not exported and other module imports this function has no way of knowing what the return value would be. But I cannot declare the return class outside of this function as it requires to wrap a component pass to the outer function.

显式指定返回类型 typeof React.Component 的试验，如下所示确实可以抑制此错误.

A trial with explicitly specifying return type typeof React.Component like below do suppress this error.

显式返回类型有问题的函数:

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 中这个特定错误的正确方法吗?(或者我是否在其他地方产生了意想不到的副作用?或者有更好的方法吗?)

However, I am not certain about validity of this approach. Is it considered a right approach for tackling this particular error in TypeScript? (Or am I creating unintended side effects elsewhere? Or any better way of doing such?)

(编辑)根据 Daniel 的建议更改引用的代码.

(Edit) Change quoted code as per Daniel's suggestion.

推荐答案

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

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

The return type typeof React.Component is truthful, but not very helpful for users of the wrapped component. It discards information about what props the component accepts.

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

The React typings provide a handy type for this purpose, React.ComponentClass. It’s the type of a class, rather than the type of the component created from that class:

React.ComponentClass<Props>

(注意 state 类型没有被提及，因为它是一个内部细节).

(Note that the state type isn’t mentioned as it’s an internal detail).

就你而言:

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 参数做同样的事情.根据你在 render 中使用它的方式，我猜它也应该被声明:

However, you’re doing the same thing with the WrappedComponent parameter. Based on how you’re using it inside render, I’m guessing that it should also be declared:

WrappedComponent: React.ComponentClass<Props & State>,

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

But this is wild guess as I assume this is not the complete function (CompState isn’t used, and Props & State may as well be a single type parameter as it always appears in that combination).

这篇关于使用 TypeScript 对 React 高阶组件进行类型注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！