TypeScript 和 React：如何重载高阶组件/装饰器？

Question

我正在使用 TypeScript 构建一个 React 应用程序。

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

让我把我试过的东西告诉你，以便你能更好地理解它：

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 的参数？

顺便说一句： 这个 HOC 将一个组件与另一个组件组合在一起：

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

我想重载 HOC 的参数，因为有几个值很可能被修改（value 和 anotherValue），如果不是组件应该可以通过 completeProps.

完全自定义

编辑：

此问题已被标记为可能与this重复。但是我的问题是不同的，因为它是关于高阶组件的。标记的问题只涉及简单的功能，而不是 return 另一个 return 一个 class.

的功能

Answer 1

箭头函数没有明确的重载语法，您可以使用常规函数代替：

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

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

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：如何重载高阶组件/装饰器？

TypeScript and React: How to overload a higher order component / decorator?

reactjs

typescript

typescript-typings

higher-order-components

typescript-types