Я пытаюсь обернуть функцию response-redux connect
в вспомогательную функцию для тестовой утилиты.
Ниже приведен упрощенный пример:
interface IProps {
number: number
}
class NumberDisplay extends React.PureComponent<IProps> {
render() {
return `${this.props.number}`
}
}
function mapStateToProps(state: any) {
return {number: 1}
}
Следующее работает как ожидалось:
const ConnectedNumberDisplay1 = connect(mapStateToProps)(NumberDisplay)
export const display1 = <ConnectedNumberDisplay1 />
и предоставляет полезные проверки типов: если number
никогда не задано, компиляция завершится неудачей.
Моя функция обтекания выглядит следующим образом:
function wrap<StateProps, ComponentProps>(
mapStateToProps: (state: any) => StateProps,
Component: React.ComponentType<ComponentProps>
) {
return connect(mapStateToProps)(Component)
// ^^^^^^^^^ Error happens here
}
const ConnectedNumberDisplay2 = conn(mapStateToProps, NumberDisplay)
export const display2 = <ConnectedNumberDisplay2 />
Это ошибка:
Argument of type 'ComponentType<ComponentProps>' is not assignable to parameter of type 'ComponentType<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>>'.
Type 'ComponentClass<ComponentProps, any>' is not assignable to type 'ComponentType<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>>'.
Type 'ComponentClass<ComponentProps, any>' is not assignable to type 'ComponentClass<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>, any>'.
Types of property 'propTypes' are incompatible.
Type 'WeakValidationMap<ComponentProps> | undefined' is not assignable to type 'WeakValidationMap<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>> | undefined'.
Type 'WeakValidationMap<ComponentProps>' is not assignable to type 'WeakValidationMap<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>>'.
Type '(null extends ComponentProps[K] ? Validator<ComponentProps[K] | null | undefined> : undefined extends ComponentProps[K] ? Validator<ComponentProps[K] | null | undefined> : Validator<ComponentProps[K]>) | undefined' is not assignable to type '(null extends Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] ? Validator<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] | null | undefined> : undefined extends Matching<...>[K] ? Validator<...> : Validator<...>) | undefined'.
Type 'null extends ComponentProps[K] ? Validator<ComponentProps[K] | null | undefined> : undefined extends ComponentProps[K] ? Validator<ComponentProps[K] | null | undefined> : Validator<ComponentProps[K]>' is not assignable to type '(null extends Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] ? Validator<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] | null | undefined> : undefined extends Matching<...>[K] ? Validator<...> : Validator<...>) | undefined'.
Type 'Validator<ComponentProps[K] | null | undefined> | (undefined extends ComponentProps[K] ? Validator<ComponentProps[K] | null | undefined> : Validator<ComponentProps[K]>)' is not assignable to type '(null extends Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] ? Validator<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] | null | undefined> : undefined extends Matching<...>[K] ? Validator<...> : Validator<...>) | undefined'.
Type 'Validator<ComponentProps[K] | null | undefined>' is not assignable to type 'null extends Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] ? Validator<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] | null | undefined> : undefined extends Matching<...>[K] ? Validator<...> : Validator<...>'.
Type 'null extends ComponentProps[K] ? Validator<ComponentProps[K] | null | undefined> : undefined extends ComponentProps[K] ? Validator<ComponentProps[K] | null | undefined> : Validator<ComponentProps[K]>' is not assignable to type 'null extends Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] ? Validator<Matching<StateProps & DispatchProp<AnyAction>, ComponentProps>[K] | null | undefined> : undefined extends Matching<...>[K] ? Validator<...> : Validator<...>'.
В качестве временного решения я использую что-то вроде этого:
function wrap<StateProps, ComponentProps>(
mapStateToProps: (state: any) => StateProps,
Component: React.ComponentType<ComponentProps>,
): React.ComponentType<
Omit<ComponentProps, keyof StateProps & keyof ComponentProps>> {
return connect(mapStateToProps)(Component as any) as any
Но я бы предпочел не использовать any
, если это возможно. Я не уверен, что мне здесь не хватает. Любая помощь приветствуется!