TypeScript и React: как перегрузить компонент / декоратор более высокого порядка?

Question

Я создаю приложение React с использованием TypeScript.

Я пишу компонент более высокого порядка, и я хотел бы перегрузить его аргументы. Как я могу это сделать?

Позвольте мне дать вам то, что я пытался, чтобы вы могли лучше понять это:

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,

Редактировать:

Этот вопрос был помечен как возможный дубликат этого. Но мой вопрос другой, потому что речь идет о компонентах высшего порядка. Отмеченный вопрос касается только простых функций, а не функций, которые возвращают другую функцию, возвращающую класс.

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