набрав компонент HO C, который использует как withRouter, так и connect - PullRequest
Новая
       84

набрав компонент HO C, который использует как withRouter, так и connect

1 голос
/ 10 июля 2020

У меня есть следующий стек: 

react@16.13.1
react-dom@16.13.1
react-redux@7.2.0
react-router-dom@5.2.0

Я следовал подходу, предложенному в этом ответе о том, как проверить тип компонента HO C, созданного с помощью withRouter и работает нормально. Например, следующие проверки типов компонентов: 

import React from "react";
import { withRouter } from "react-router-dom";
import { RouteComponentProps } from "react-router-dom";

type Props = RouteComponentProps<any>;

class Test extends React.Component<Props, {}> {
  componentDidMount = () => {
    this.props.history.push("foo");
  };

  render() {
    return <div>foo</div>;
  }
}

export default withRouter(Test);

Проблема возникает, когда я использую sh, чтобы также связать компонент с хранилищем Redux, используя connect. Следующий код не может проверить тип: 

import React from "react";
import { connect, ConnectedProps } from "react-redux";

import { withRouter } from "react-router-dom";

import { RouteComponentProps } from "react-router-dom";

type RootState = { foo: number };

const mapStateToProps = (state: RootState) => {
  foo: state.foo;
};

const connector = connect(mapStateToProps, null);

type PropsFromRedux = ConnectedProps<typeof connector>;

type Props = PropsFromRedux & RouteComponentProps<any>;

class Test extends React.Component<Props, {}> {
  componentDidMount = () => {
    this.props.history.push("foo"); // TS2339: Property 'history' does not exist on type 'never'.
  };

  render() {
    return <div>foo</div>;
  }
}

export default withRouter(connector(Test));

В частности, я получаю: 

TS2339: Property 'history' does not exist on type 'never'.

Два вопроса:

  1. почему тип props оценивается как never?
  2. как правильно проверить тип компонента HO C, созданного с последовательным применением как withRouter, так и connect?
...