TypeScript 和 React:如何重载高阶组件/装饰器? [英] TypeScript and React: How to overload a higher order component / decorator?

问题描述

我正在使用 TypeScript 构建一个 React 应用.

I'm building a React app using TypeScript.

我正在编写一个高阶组件，我想重载它的参数.我该怎么做?

I'm writing a higher order component and I would like to overload it's arguments. How can I do that?

让我给你我尝试过的东西，以便你能更好地理解它:

Let me give you what I've tried so that you can understand it better:

const myHOC = ((value: string, anotherValue: number) | completeProps: SomeProps) => (WrappedComponent: ComponentClass) => // ... HOC code

所以应该是:

const myHOC = (value: string, anotherValue: number) => (WrappedComponent: ComponentClass) => // ...

或

const myHOC = (completeProps: SomeProps) => (WrappedComponent: ComponentClass) => // ...

显然 TypeScript 在这里抱怨，因为它期望 => 出现在围绕 value 和 anotherValue 的括号之后(因为它认为是一个函数).但是我怎样才能重载这个 HOC 的参数呢?

Obviously TypeScript complains here, because it expects a => to come after the brackets surrounding value and anotherValue (because it thinks that is a function). But how can I overload this HOC's parameters?

顺便说一句:此 HOC 将一个组件与另一个组件分组:

BTW: This HOC groups a component with another:

<React.Fragment>
  <WrappedComponent {this.props} />
  <ComponentInjectedByHOC valueProp={value} anotherValueProp={anotherValue} {...completeProps} />
</React.Fragment>

我想重载 HOC 的参数，因为有几个值很可能被修改(value 和 anotherValue)和如果不是，则该组件应该可以通过 completeProps 完全自定义.

I would like to overload the parameters of the HOC, because there are a couple of values that have a high likely hood of being modified (value and anotherValue) and if not the component should just be completely customisable via the completeProps.

此问题已被标记为可能与这个.但我的问题是不同的，因为它是关于高阶组件.标记的问题只涉及简单的函数，而不是返回另一个返回类的函数的函数.

This question has been marked as a possible duplicate ofthis. But my question is different, because it is about higher order components. The marked question only deals with simple functions, not functions than return another function that return a class.

推荐答案

箭头函数没有显式的重载语法，您可以使用常规函数代替:

Arrow functions don't have explicit overload syntax, you can use a regular function instead:

interface SomeProps {value: string, anotherValue: number}
function myHOC (value: string, anotherValue: number) : (WrappedComponent: ComponentClass) => JSX.Element
function myHOC (completeProps: SomeProps) : (WrappedComponent: ComponentClass) => JSX.Element
function myHOC (valueOrCompleteProps: string| SomeProps, maybeAnotherValue?: number) : (WrappedComponent: ComponentClass) => JSX.Element {
    let completeProps: SomeProps;
    if(typeof valueOrCompleteProps ==='string') {
        completeProps = { value: valueOrCompleteProps, anotherValue: maybeAnotherValue! }
    }else{
        completeProps =valueOrCompleteProps;
    }

    return (WrappedComponent: ComponentClass) => <WrappedComponent {... completeProps} />
}

您也可以使用箭头函数，但需要明确输入:

You can also use an arrow function but you need to type it explicitly:

interface SomeProps {value: string, anotherValue: number}
const myHOC : {
    (value: string, anotherValue: number) : (WrappedComponent: ComponentClass) => JSX.Element
    (completeProps: SomeProps) : (WrappedComponent: ComponentClass) => JSX.Element
} = (valueOrCompleteProps: string| SomeProps, maybeAnotherValue?: number) => {
    let completeProps: SomeProps;
    if(typeof valueOrCompleteProps ==='string') {
        completeProps = { value: valueOrCompleteProps, anotherValue: maybeAnotherValue! }
    }else{
        completeProps =valueOrCompleteProps;
    }

    return (WrappedComponent: ComponentClass) => <WrappedComponent {... completeProps} />
}

这篇关于TypeScript 和 React:如何重载高阶组件/装饰器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！