Improve TypeScript types

Author: jedmao

package-lock.json

@@ -82,6 +82,7 @@
     "prettier": "^1.18.2",
     "rimraf": "^3.0.0",
     "rollup": "^1.20.3",
+    "redux-thunk": "^2.3.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",

package.json

@@ -1,8 +1,11 @@
 import compose from './compose'
-import { Middleware, MiddlewareAPI } from './types/middleware'
-import { AnyAction } from './types/actions'
-import { StoreEnhancer, StoreCreator, Dispatch } from './types/store'
-import { Reducer } from './types/reducers'
+import {
+  Middleware,
+  StoreEnhancer,
+  Dispatch,
+  MiddlewareAPI,
+  StoreEnhancerStoreCreator
+} from '.'
 
 /**
  * Creates a store enhancer that applies middleware to the dispatch method
@@ -23,40 +26,17 @@ import { Reducer } from './types/reducers'
  * @template Ext Dispatch signature added by a middleware.
  * @template S The type of the state supported by a middleware.
  */
-export default function applyMiddleware(): StoreEnhancer
-export default function applyMiddleware<Ext1, S>(
-  middleware1: Middleware<Ext1, S, any>
-): StoreEnhancer<{ dispatch: Ext1 }>
-export default function applyMiddleware<Ext1, Ext2, S>(
-  middleware1: Middleware<Ext1, S, any>,
-  middleware2: Middleware<Ext2, S, any>
-): StoreEnhancer<{ dispatch: Ext1 & Ext2 }>
-export default function applyMiddleware<Ext1, Ext2, Ext3, S>(
-  middleware1: Middleware<Ext1, S, any>,
-  middleware2: Middleware<Ext2, S, any>,
-  middleware3: Middleware<Ext3, S, any>
-): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 }>
-export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, S>(
-  middleware1: Middleware<Ext1, S, any>,
-  middleware2: Middleware<Ext2, S, any>,
-  middleware3: Middleware<Ext3, S, any>,
-  middleware4: Middleware<Ext4, S, any>
-): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 }>
-export default function applyMiddleware<Ext1, Ext2, Ext3, Ext4, Ext5, S>(
-  middleware1: Middleware<Ext1, S, any>,
-  middleware2: Middleware<Ext2, S, any>,
-  middleware3: Middleware<Ext3, S, any>,
-  middleware4: Middleware<Ext4, S, any>,
-  middleware5: Middleware<Ext5, S, any>
-): StoreEnhancer<{ dispatch: Ext1 & Ext2 & Ext3 & Ext4 & Ext5 }>
-export default function applyMiddleware<Ext, S = any>(
-  ...middlewares: Middleware<any, S, any>[]
-): StoreEnhancer<{ dispatch: Ext }>
-export default function applyMiddleware(
-  ...middlewares: Middleware[]
-): StoreEnhancer<any> {
-  return (createStore: StoreCreator) => <S, A extends AnyAction>(
-    reducer: Reducer<S, A>,
+export default function applyMiddleware<
+  S = any,
+  M extends Middleware = Middleware
+>(
+  ...middlewares: M[]
+): StoreEnhancer<
+  M extends Middleware<any, any, infer D> ? { dispatch: D } : never,
+  S
+> {
+  return (createStore: StoreEnhancerStoreCreator<any>) => (
+    reducer,
     ...args: any[]
   ) => {
     const store = createStore(reducer, ...args)

src/applyMiddleware.ts

@@ -97,7 +97,7 @@ export default function createStore<
     throw new Error('Expected the reducer to be a function.')
   }
 
-  let currentReducer = reducer
+  let currentReducer: Reducer<any, any> = reducer
   let currentState = preloadedState as S
   let currentListeners: (() => void)[] | null = []
   let nextListeners = currentListeners
@@ -273,11 +273,7 @@ export default function createStore<
       throw new Error('Expected the nextReducer to be a function.')
     }
 
-    // TODO: do this more elegantly
-    ;((currentReducer as unknown) as Reducer<
-      NewState,
-      NewActions
-    >) = nextReducer
+    currentReducer = nextReducer
 
     // This action has a similiar effect to ActionTypes.INIT.
     // Any reducers that existed in both the new and old rootReducer

src/createStore.ts

@@ -1,11 +1,19 @@
-import { createStore, applyMiddleware, Middleware, AnyAction, Action } from '..'
+import {
+  createStore,
+  applyMiddleware,
+  Middleware,
+  AnyAction,
+  Action,
+  Store
+} from '../src'
+import { rootActionTypes } from './helpers/actionTypes'
 import * as reducers from './helpers/reducers'
 import { addTodo, addTodoAsync, addTodoIfEmpty } from './helpers/actionCreators'
 import { thunk } from './helpers/middleware'
 
 describe('applyMiddleware', () => {
   it('warns when dispatching during middleware setup', () => {
-    function dispatchingMiddleware(store) {
+    function dispatchingMiddleware(store: Store<any, rootActionTypes>) {
       store.dispatch(addTodo('Dont dispatch in middleware setup'))
       return next => action => next(action)
     }
@@ -40,8 +48,8 @@ describe('applyMiddleware', () => {
     ])
   })
 
-  it('passes recursive dispatches through the middleware chain', () => {
-    function test(spyOnMethods) {
+  it('passes recursive dispatches through the middleware chain', async () => {
+    function test(spyOnMethods: jest.Mock) {
       return () => next => action => {
         spyOnMethods(action)
         return next(action)
@@ -51,16 +59,11 @@ describe('applyMiddleware', () => {
     const spy = jest.fn()
     const store = applyMiddleware(test(spy), thunk)(createStore)(reducers.todos)
 
-    // the typing for redux-thunk is super complex, so we will use an as unknown hack
-    const dispatchedValue = (store.dispatch(
-      addTodoAsync('Use Redux')
-    ) as unknown) as Promise<void>
-    return dispatchedValue.then(() => {
-      expect(spy.mock.calls.length).toEqual(2)
-    })
+    await store.dispatch(addTodoAsync('Use Redux'))
+    expect(spy.mock.calls.length).toEqual(2)
   })
 
-  it('works with thunk middleware', done => {
+  it('works with thunk middleware', async () => {
     const store = applyMiddleware(thunk)(createStore)(reducers.todos)
 
     store.dispatch(addTodoIfEmpty('Hello'))
@@ -91,27 +94,21 @@ describe('applyMiddleware', () => {
       }
     ])
 
-    // the typing for redux-thunk is super complex, so we will use an "as unknown" hack
-    const dispatchedValue = (store.dispatch(
-      addTodoAsync('Maybe')
-    ) as unknown) as Promise<void>
-    dispatchedValue.then(() => {
-      expect(store.getState()).toEqual([
-        {
-          id: 1,
-          text: 'Hello'
-        },
-        {
-          id: 2,
-          text: 'World'
-        },
-        {
-          id: 3,
-          text: 'Maybe'
-        }
-      ])
-      done()
-    })
+    await store.dispatch(addTodoAsync('Maybe'))
+    expect(store.getState()).toEqual([
+      {
+        id: 1,
+        text: 'Hello'
+      },
+      {
+        id: 2,
+        text: 'World'
+      },
+      {
+        id: 3,
+        text: 'Maybe'
+      }
+    ])
   })
 
   it('passes through all arguments of dispatch calls from within middleware', () => {
@@ -144,7 +141,7 @@ describe('applyMiddleware', () => {
       applyMiddleware(multiArgMiddleware, dummyMiddleware)
     )
 
-    store.dispatch(spy)
+    store.dispatch(spy as any)
     expect(spy.mock.calls[0]).toEqual(testCallArgs)
   })
 })

test/applyMiddleware.spec.ts

@@ -1,10 +1,10 @@
-import { bindActionCreators, createStore, ActionCreator } from '..'
+import { bindActionCreators, createStore, ActionCreator, Store } from '..'
 import { todos } from './helpers/reducers'
 import * as actionCreators from './helpers/actionCreators'
 
 describe('bindActionCreators', () => {
-  let store
-  let actionCreatorFunctions
+  let store: Store<typeof todos>
+  let actionCreatorFunctions: Partial<typeof actionCreators>
 
   beforeEach(() => {
     store = createStore(todos)

test/bindActionCreators.spec.ts

@@ -505,6 +505,7 @@ describe('createStore', () => {
 
   it('throws if action type is missing', () => {
     const store = createStore(reducers.todos)
+    // @ts-ignore
     expect(() => store.dispatch({})).toThrow(
       /Actions may not have an undefined "type" property/
     )
@@ -519,10 +520,10 @@ describe('createStore', () => {
 
   it('does not throw if action type is falsy', () => {
     const store = createStore(reducers.todos)
-    expect(() => store.dispatch({ type: false })).not.toThrow()
-    expect(() => store.dispatch({ type: 0 })).not.toThrow()
+    expect(() => store.dispatch({ type: false } as any)).not.toThrow()
+    expect(() => store.dispatch({ type: 0 } as any)).not.toThrow()
     expect(() => store.dispatch({ type: null })).not.toThrow()
-    expect(() => store.dispatch({ type: '' })).not.toThrow()
+    expect(() => store.dispatch({ type: '' } as any)).not.toThrow()
   })
 
   it('accepts enhancer as the third argument', () => {

test/createStore.spec.ts

@@ -1,71 +1,89 @@
+import { ThunkAction } from 'redux-thunk'
+
 import {
   ADD_TODO,
+  AddTodo,
   DISPATCH_IN_MIDDLE,
+  DispatchInMiddle,
   GET_STATE_IN_MIDDLE,
+  GetStateInMiddle,
   SUBSCRIBE_IN_MIDDLE,
+  SubscribeInMiddle,
   UNSUBSCRIBE_IN_MIDDLE,
+  UnsubscribeInMiddle,
   THROW_ERROR,
-  UNKNOWN_ACTION
+  ThrowError,
+  UNKNOWN_ACTION,
+  UnknownAction
 } from './actionTypes'
-import { Action, AnyAction, Dispatch } from '../..'
 
-export function addTodo(text: string): AnyAction {
+export function addTodo(text: string): AddTodo {
   return { type: ADD_TODO, text }
 }
 
-export function addTodoAsync(text: string) {
-  return (dispatch: Dispatch): Promise<void> =>
-    new Promise(resolve =>
+export function addTodoAsync(text: string): ThunkAction<any, any, {}, AddTodo> {
+  return dispatch =>
+    new Promise<void>(resolve =>
       setImmediate(() => {
         dispatch(addTodo(text))
         resolve()
       })
     )
 }
 
-export function addTodoIfEmpty(text: string) {
-  return (dispatch: Dispatch, getState: () => any) => {
+export function addTodoIfEmpty(
+  text: string
+): ThunkAction<any, any, {}, AddTodo> {
+  return (dispatch, getState) => {
     if (!getState().length) {
       dispatch(addTodo(text))
     }
   }
 }
 
-export function dispatchInMiddle(boundDispatchFn: () => void): AnyAction {
+export function dispatchInMiddle(
+  boundDispatchFn: () => void
+): DispatchInMiddle {
   return {
     type: DISPATCH_IN_MIDDLE,
     boundDispatchFn
   }
 }
 
-export function getStateInMiddle(boundGetStateFn: () => void): AnyAction {
+export function getStateInMiddle(
+  boundGetStateFn: () => void
+): GetStateInMiddle {
   return {
     type: GET_STATE_IN_MIDDLE,
     boundGetStateFn
   }
 }
 
-export function subscribeInMiddle(boundSubscribeFn: () => void): AnyAction {
+export function subscribeInMiddle(
+  boundSubscribeFn: () => void
+): SubscribeInMiddle {
   return {
     type: SUBSCRIBE_IN_MIDDLE,
     boundSubscribeFn
   }
 }
 
-export function unsubscribeInMiddle(boundUnsubscribeFn: () => void): AnyAction {
+export function unsubscribeInMiddle(
+  boundUnsubscribeFn: () => void
+): UnsubscribeInMiddle {
   return {
     type: UNSUBSCRIBE_IN_MIDDLE,
     boundUnsubscribeFn
   }
 }
 
-export function throwError(): Action {
+export function throwError(): ThrowError {
   return {
     type: THROW_ERROR
   }
 }
 
-export function unknownAction(): Action {
+export function unknownAction(): UnknownAction {
   return {
     type: UNKNOWN_ACTION
   }

test/helpers/actionCreators.ts

@@ -1,7 +1,42 @@
+import { Action } from '../..'
+
 export const ADD_TODO = 'ADD_TODO'
+export interface AddTodo extends Action<typeof ADD_TODO> {
+  text: string
+}
+
 export const DISPATCH_IN_MIDDLE = 'DISPATCH_IN_MIDDLE'
+export interface DispatchInMiddle extends Action<typeof DISPATCH_IN_MIDDLE> {
+  boundDispatchFn: () => void
+}
+
 export const GET_STATE_IN_MIDDLE = 'GET_STATE_IN_MIDDLE'
+export interface GetStateInMiddle extends Action<typeof GET_STATE_IN_MIDDLE> {
+  boundGetStateFn: () => void
+}
+
 export const SUBSCRIBE_IN_MIDDLE = 'SUBSCRIBE_IN_MIDDLE'
+export interface SubscribeInMiddle extends Action<typeof SUBSCRIBE_IN_MIDDLE> {
+  boundSubscribeFn: () => void
+}
+
 export const UNSUBSCRIBE_IN_MIDDLE = 'UNSUBSCRIBE_IN_MIDDLE'
+export interface UnsubscribeInMiddle
+  extends Action<typeof UNSUBSCRIBE_IN_MIDDLE> {
+  boundUnsubscribeFn: () => void
+}
+
 export const THROW_ERROR = 'THROW_ERROR'
+export type ThrowError = Action<typeof THROW_ERROR>
+
 export const UNKNOWN_ACTION = 'UNKNOWN_ACTION'
+export type UnknownAction = Action<typeof UNKNOWN_ACTION>
+
+export type rootActionTypes =
+  | AddTodo
+  | DispatchInMiddle
+  | GetStateInMiddle
+  | SubscribeInMiddle
+  | UnsubscribeInMiddle
+  | ThrowError
+  | UnknownAction