TypeScript и React: как перегрузить компонент / декоратор более высокого порядка?
Я создаю приложение 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.
Редактировать:
Этот вопрос был отмечен как возможный дубликат это. Но у меня другой вопрос, потому что он касается компонентов более высокого порядка. Отмеченный вопрос касается только простых функций, а не функций, которые возвращают другую функцию, возвращающую класс.
@ TitianCernicova-Dragomir Да, это правильно! Я добавил это явно.
Возможный дубликат Есть ли способ выполнить перегрузку методов в TypeScript?
Ответы 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} />
}
Ваш синтаксис не проясняет мне ваше намерение, какие будут перегрузки? Один, который принимает
(value: string, anotherValue: number) => (WrappedComponent: ComponentClass) =>..., а другой(completeProps: SomeProps) => (WrappedComponent: ComponentClass)=>...?