Reactjs react-typescript：没有与此调用匹配的重载-连接react-redux到组件

我有一个带有计数器减缩器的计数器组件，并在typescript中存储、实现。 我无法通过键入将组件连接到存储。 我在商店中定义状态时遇到了一个问题

我也在使用连接的react路由器，它包裹了组合减速器，但我仍然得到以下错误：

错误：

No overload matches this call.
  The last overload gave the following error.
    Argument of type '(state: AppState) => { counter: number; router: RouterState<PoorMansUnknown>; }' is not assignable to parameter of type 'MapStateToPropsParam<StateProps, RouteComponentProps<any, StaticContext, PoorMansUnknown>, DefaultRootState>'.
      Type '(state: AppState) => { counter: number; router: RouterState<PoorMansUnknown>; }' is not assignable to type 'MapStateToPropsFactory<StateProps, RouteComponentProps<any, StaticContext, PoorMansUnknown>, DefaultRootState>'.
        Types of parameters 'state' and 'initialState' are incompatible.
          Type 'DefaultRootState' is missing the following properties from type 'AppState': router, counter

---

尝试：

使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（主页））

并删除此行：

router:state.router

。但是我需要我的存储中的路由器。您可以使用

with router

HOC将其注入组件，而不是

router:state.router

。仍然出现相同的错误

export default connect<StateProps, DispatchProps, RouteComponentProps<any>>(
  mapStateToProps,
  mapDispatchToProps
)(Home);

const Home = (props: StateProps & DispatchProps) => {
  function handleClick() {
    props.increment();
  }

  const { decrementAction } = props;

  return (
    <div>
      Home {JSON.stringify(props.counter.number)}
      <button type="button" onClick={handleClick}>
        Increment
      </button>
      <button type="button" onClick={decrementAction}>
        Decrement
      </button>
    </div>
  );
};

interface StateProps {
  counter: number;
}

interface DispatchProps {
  increment: () => void;
  decrementAction: () => void;
}

function mapStateToProps(state: AppState) {
  return {
    counter: state.counter,
    router: state.router
  };
}

export default connect<StateProps, DispatchProps, RouteComponentProps<any>>(
  mapStateToProps,
  mapDispatchToProps
)(Home);

export interface AppState {
  router: RouterState;
  counter: number;
}

export const rootReducer = (history: History) =>
  combineReducers({
    counter: counterReducer,
    router: connectRouter(history)
  });

// export type AppState = ReturnType<typeof rootReducer>;

export default function configureStore(history: History) {
  const middlewares = [routerMiddleware(history), thunkMiddleware];

  if (process.env.NODE_ENV === `development`) {
    /* eslint-disable global-require */
    /*  @typescript-eslint/no-var-requires */
    const { logger } = require(`redux-logger`);
    middlewares.push(logger);
  }

  const middleWareEnhancer = applyMiddleware(...middlewares);

  const store = createStore(
    rootReducer(history),
    composeWithDevTools(middleWareEnhancer)
  );

  return store;
}

import {
  CounterState,
  CounterActionTypes,
  INCREMENT,
  DECREMENT
} from './types';

const initialState: CounterState = {
  number: 0
};

export const counterReducer = (
  state = initialState,
  action: CounterActionTypes
): CounterState => {
  switch (action.type) {
    case INCREMENT:
      return { number: state.number + 1 };
    case DECREMENT:
      return { number: state.number - 1 };
    default:
      return state;
  }
};