Improve TypeScript types

Author: jedmao

package-lock.json

@@ -81,6 +81,7 @@
     "glob": "^7.1.4",
     "jest": "^24.8.0",
     "prettier": "^1.18.2",
+    "redux-thunk": "^2.3.0",
     "rimraf": "^2.6.3",
     "rollup": "^1.16.7",
     "rollup-plugin-babel": "^4.3.3",

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
@@ -17,8 +20,11 @@ import { Reducer } from './types/reducers'
  * Note that each middleware will be given the `dispatch` and `getState` functions
  * as named arguments.
  *
- * @param {...Function} middlewares The middleware chain to be applied.
- * @returns {Function} A store enhancer applying the middleware.
+ * @param middlewares The middleware chain to be applied.
+ * @returns A store enhancer applying the middleware.
+ *
+ * @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>(
@@ -51,9 +57,9 @@ export default function applyMiddleware<Ext, S = any>(
 ): StoreEnhancer<{ dispatch: Ext }>
 export default function applyMiddleware(
   ...middlewares: Middleware[]
-): StoreEnhancer<any> {
-  return (createStore: StoreCreator) => <S, A extends AnyAction>(
-    reducer: Reducer<S, A>,
+): StoreEnhancer {
+  return (createStore: StoreEnhancerStoreCreator<any>) => (
+    reducer,
     ...args: any[]
   ) => {
     const store = createStore(reducer, ...args)

src/applyMiddleware.ts

@@ -9,7 +9,7 @@ type Func3<T1, T2, T3, R> = (a1: T1, a2: T2, a3: T3, ...args: any[]) => R
  * resulting composite function.
  *
  * @param funcs The functions to compose.
- * @returns R function obtained by composing the argument functions from right
+ * @returns A function obtained by composing the argument functions from right
  *   to left. For example, `compose(f, g, h)` is identical to doing
  *   `(...args) => f(g(h(...args)))`.
  */

src/compose.ts

@@ -21,21 +21,21 @@ import isPlainObject from './utils/isPlainObject'
  * parts of the state tree respond to actions, you may combine several reducers
  * into a single reducer function by using `combineReducers`.
  *
- * @param {Function} reducer A function that returns the next state tree, given
+ * @param reducer A function that returns the next state tree, given
  * the current state tree and the action to handle.
  *
- * @param {any} [preloadedState] The initial state. You may optionally specify it
+ * @param preloadedState The initial state. You may optionally specify it
  * to hydrate the state from the server in universal apps, or to restore a
  * previously serialized user session.
  * If you use `combineReducers` to produce the root reducer function, this must be
  * an object with the same shape as `combineReducers` keys.
  *
- * @param {Function} [enhancer] The store enhancer. You may optionally specify it
+ * @param enhancer The store enhancer. You may optionally specify it
  * to enhance the store with third-party capabilities such as middleware,
  * time travel, persistence, etc. The only store enhancer that ships with Redux
  * is `applyMiddleware()`.
  *
- * @returns {Store} A Redux store that lets you read the state, dispatch actions
+ * @returns A Redux store that lets you read the state, dispatch actions
  * and subscribe to changes.
  */
 export default function createStore<
@@ -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
@@ -119,7 +119,7 @@ export default function createStore<
   /**
    * Reads the state tree managed by the store.
    *
-   * @returns {any} The current state tree of your application.
+   * @returns The current state tree of your application.
    */
   function getState(): S {
     if (isDispatching) {
@@ -153,8 +153,8 @@ export default function createStore<
    * registered before the `dispatch()` started will be called with the latest
    * state by the time it exits.
    *
-   * @param {Function} listener A callback to be invoked on every dispatch.
-   * @returns {Function} A function to remove this change listener.
+   * @param listener A callback to be invoked on every dispatch.
+   * @returns A function to remove this change listener.
    */
   function subscribe(listener: () => void) {
     if (typeof listener !== 'function') {
@@ -210,13 +210,13 @@ export default function createStore<
    * example, see the documentation for the `redux-thunk` package. Even the
    * middleware will eventually dispatch plain object actions using this method.
    *
-   * @param {Object} action A plain object representing “what changed”. It is
+   * @param action A plain object representing “what changed”. It is
    * a good idea to keep actions serializable so you can record and replay user
    * sessions, or use the time travelling `redux-devtools`. An action must have
    * a `type` property which may not be `undefined`. It is a good idea to use
    * string constants for action types.
    *
-   * @returns {Object} For convenience, the same action object you dispatched.
+   * @returns For convenience, the same action object you dispatched.
    *
    * Note that, if you use a custom middleware, it may wrap `dispatch()` to
    * return something else (for example, a Promise you can await).
@@ -263,8 +263,8 @@ export default function createStore<
    * load some of the reducers dynamically. You might also need this if you
    * implement a hot reloading mechanism for Redux.
    *
-   * @param {Function} nextReducer The reducer for the store to use instead.
-   * @returns {Store} The same store instance with a new reducer in place.
+   * @param nextReducer The reducer for the store to use instead.
+   * @returns The same store instance with a new reducer in place.
    */
   function replaceReducer<NewState, NewActions extends A>(
     nextReducer: Reducer<NewState, NewActions>
@@ -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
@@ -296,7 +292,7 @@ export default function createStore<
 
   /**
    * Interoperability point for observable/reactive libraries.
-   * @returns {observable} A minimal observable of state changes.
+   * @returns A minimal observable of state changes.
    * For more information, see the observable proposal:
    * https://github.com/tc39/proposal-observable
    */
@@ -305,9 +301,9 @@ export default function createStore<
     return {
       /**
        * The minimal observable subscription method.
-       * @param {Object} observer Any object that can be used as an observer.
+       * @param observer Any object that can be used as an observer.
        * The observer object should have a `next` method.
-       * @returns {subscription} An object with an `unsubscribe` method that can
+       * @returns An object with an `unsubscribe` method that can
        * be used to unsubscribe the observable from the store, and prevent further
        * emission of values from the observable.
        */

src/createStore.ts

@@ -21,7 +21,7 @@ export interface MiddlewareAPI<D extends Dispatch = Dispatch, S = any> {
  *   installed.
  */
 export interface Middleware<
-  _DispatchExt = {}, // TODO: remove unused component
+  _DispatchExt = {}, // TODO: remove unused component (breaking change)
   S = any,
   D extends Dispatch = Dispatch
 > {

src/types/middleware.ts

@@ -1,8 +1,8 @@
 /**
- * @param {any} obj The object to inspect.
- * @returns {boolean} True if the argument appears to be a plain object.
+ * @param obj The object to inspect.
+ * @returns True if the argument appears to be a plain object.
  */
-export default function isPlainObject(obj: unknown) {
+export default function isPlainObject(obj: any): boolean {
   if (typeof obj !== 'object' || obj === null) return false
 
   let proto = obj

src/utils/isPlainObject.ts

@@ -1,10 +1,9 @@
 /**
  * Prints a warning in the console if it exists.
  *
- * @param {String} message The warning message.
- * @returns {void}
+ * @param message The warning message.
  */
-export default function warning(message: string) {
+export default function warning(message: string): void {
   /* eslint-disable no-console */
   if (typeof console !== 'undefined' && typeof console.error === 'function') {
     console.error(message)

src/utils/warning.ts

@@ -1,11 +1,18 @@
-import { createStore, applyMiddleware, Middleware, AnyAction, Action } from '..'
+import {
+  createStore,
+  applyMiddleware,
+  Middleware,
+  AnyAction,
+  Action,
+  Store
+} from '..'
 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) {
       store.dispatch(addTodo('Dont dispatch in middleware setup'))
       return next => action => next(action)
     }
@@ -40,8 +47,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 +58,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 +93,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 +140,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', () => {