How to use Redux 4.0 TypeScript bindings with redux-thunk

Question

I'm having trouble using the new TS bindings for Redux 4.0 with redux-thunk. I've recreated the issue by converting the basic Redux "Todo List" example to TypeScript (repo here), and making the Add Todo action a thunk. The problem is the same as reported here: Argument of type 'ThunkAction' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type 'ThunkAction'.

Basically, I can get it to work, but I'm using any in a couple of places where I don't think I should. One place is index.tsx#L14, where I add the thunk middleware to the store:

const store = createStore(
  rootReducer,
  applyMiddleware(thunk as ThunkMiddleware<IRootState, any>)
);

If I use anything other than any there, then the next line throws the error:

store.dispatch(addTodo('Use redux-thunk'));

The other place is AddTodo.tsx#L7, where I declare the dispatch prop which is injected by the connect function:

interface IAddTodoProps {
  dispatch: Dispatch<any>;
}

const AddTodo = ({ dispatch }: IAddTodoProps) => {
  ...
}
export default connect()(AddTodo);

In both places, the any overrides a type that must extend Action<any>. Action requires a type attribute, which of course a thunk does not have. How can I declare these types so that the dispatch function accepts a thunk?

Related question
Relevant PR

Answer 1

diff --git a/src/containers/AddTodo.tsx b/src/containers/AddTodo.tsx
index e49ac4a..20a93d6 100644
--- a/src/containers/AddTodo.tsx
+++ b/src/containers/AddTodo.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
+import { AnyAction } from 'redux';
 import { addTodo } from '../actions';
+import { IRootState } from '../reducers/index';

 interface IAddTodoProps {
-  dispatch: Dispatch<any>;
+  dispatch: ThunkDispatch<IRootState,any,AnyAction>;
 }

 const AddTodo = ({ dispatch }: IAddTodoProps) => {