Как правильно использовать response-redux connect с машинописным шрифтом @ 3?

Question

Я пытаюсь создать типобезопасный HOC, используя TypeScript и response-redux.

hoc / with-is-visible-range.tsx

import React from "react";
import { Subtract } from "utility-types";
import { connect } from "react-redux";
import { rangeVisibilitySelector } from "./date-range.selectors";

interface IInjectedProps {
  visible: boolean;
}

interface IMappedProps {
  isVisible: boolean;
}

const withIsVisibleRange = <T extends IInjectedProps>(
  Component: React.ComponentType<T>
) => {
  const WrappedComponent: React.SFC<
    Subtract<T, IInjectedProps> & IMappedProps
  > = ({ isVisible, ...rest }: IMappedProps) => {
    return <Component {...rest} visible={isVisible} />;
  };

  const mapStateToProps = (state: ApplicationState) => ({
    isVisible: rangeVisibilitySelector(state)
  });

  return connect(
    mapStateToProps,
    null
  )(WrappedComponent);
};

export default withIsVisibleRange;

Но я всегдаполучить ту же ошибку:

Сообщение об ошибке:

Ошибка: (30, 5) TS2345: Аргумент типа 'StatelessComponent> & IMappedProps>' не может быть назначен параметру типа 'ComponentType> & IMappedProps >> '.Тип «StatelessComponent> & IMappedProps>» нельзя назначить типу «StatelessComponent> & IMappedProps >>».Тип 'Pick> & IMappedProps' нельзя назначить типу 'Matching <{isVisible: boolean;} & null, Pick> & IMappedProps> '.Тип '(Pick> & IMappedProps) [P]' не присваивается типу 'P расширяет "isVisible"?({isVisible: boolean;} & null) [P] extends (Pick> & IMappedProps) [P]?(Pick> & IMappedProps) [P]: ({...;} & null) [P]: (Pick <...> & IMappedProps) [P] '.

Answer 1

Хотя манипуляции с типами (Matching и т. Д.), Используемые в объявлении connect в @types/react-redux, работают для любого заданного типа реквизита, компилятор TypeScript не может символически рассуждать о том, чтопроисходит, когда они применяются к типу реквизита, включающему параметр типа T.К сожалению, вам придется использовать утверждение типа, то есть WrappedComponent as any.