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

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

0 голосов
/ 28 ноября 2018

Я создаю приложение 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?

BTW: Этот HOC группирует компонент с другим: 

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

Я хотел бы перегрузить параметры HOCпотому что есть пара значений, которые имеют высокую вероятность изменения (value и anotherValue), и если нет, компонент должен быть полностью настраиваемым с помощью completeProps.

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

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

1 Ответ

0 голосов
/ 28 ноября 2018

Функции стрелок не имеют явного синтаксиса перегрузки, вместо этого вы можете использовать обычную функцию: 

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