Remove implicit any from the router

Author: shepmaster

ui/frontend/Router.tsx

@@ -1,18 +1,29 @@
 import React from 'react';
 
-import { createBrowserHistory as createHistory } from 'history';
-import { createRouter } from './uss-router';
+import { createBrowserHistory as createHistory, Path, Location } from 'history';
+import { createRouter, PlainOrThunk } from './uss-router';
 import UssRouter from './uss-router/Router';
 
 import qs from 'qs';
 import Route from 'route-parser';
 
 import * as actions from './actions';
+import State from './state';
+import { Channel, Edition, Mode, Page } from './types';
 
 const homeRoute = new Route('/');
 const helpRoute = new Route('/help');
 
-const stateSelector = ({ page, configuration: { channel, mode, edition } }) => ({
+interface Substate {
+  page: Page;
+  configuration: {
+    channel: Channel;
+    mode: Mode;
+    edition: Edition;
+  }
+}
+
+const stateSelector = ({ page, configuration: { channel, mode, edition } }: State): Substate => ({
   page,
   configuration: {
     channel,
@@ -21,7 +32,7 @@ const stateSelector = ({ page, configuration: { channel, mode, edition } }) => (
   },
 });
 
-const stateToLocation = ({ page, configuration }) => {
+const stateToLocation = ({ page, configuration }: Substate): Partial<Path> => {
   switch (page) {
     case 'help': {
       return {
@@ -42,7 +53,7 @@ const stateToLocation = ({ page, configuration }) => {
   }
 };
 
-const locationToAction = location => {
+const locationToAction = (location: Location): PlainOrThunk<State, actions.Action> | null => {
   const matchedHelp = helpRoute.match(location.pathname);
 
   if (matchedHelp) {
@@ -61,7 +72,7 @@ const locationToAction = location => {
 export default class Router extends React.Component<RouterProps> {
   private router: any;
 
-  public constructor(props) {
+  public constructor(props: RouterProps) {
     super(props);
 
     const history = createHistory();

ui/frontend/uss-router/index.ts

@@ -1,30 +1,37 @@
 import { isEqual } from 'lodash';
-import { createStore } from 'redux';
-import { BrowserHistory } from 'history';
+import { createStore, Reducer, Store, Action, PreloadedState } from 'redux';
+import { BrowserHistory, Location, Path } from 'history';
+import { ThunkAction } from 'redux-thunk';
 
-interface CreateRouterArg {
-  store: any;
-  reducer: any;
+export type PlainOrThunk<St, A extends Action<any>> = A | ThunkAction<void, St, {}, A>;
+
+// This is a... dense... attempt at saying "we accept any store with
+// any dispatch so long as it can handle the actions you create". It's
+// probably overly complicated, restrictive, and broad all at the same
+// time.
+interface CreateRouterArg<St, SubSt, A extends Action<any>> {
+  store: Store<St, A> & { dispatch: (a: PlainOrThunk<St, A>) => void }; //  |
+  reducer: Reducer<St>;
   history: BrowserHistory;
-  stateSelector: any;
-  stateToLocation: any;
-  locationToAction: any;
+  stateSelector: (state: St) => SubSt;
+  stateToLocation: (substate: St) => Partial<Path>;
+  locationToAction: (location: Location) => PlainOrThunk<St, A> | null;
 }
 
 export interface RouterObject {
   provisionalLocation: any;
 }
 
-export function createRouter({
+export function createRouter<St, SubSt, A extends Action<any>>({
   store,
   reducer,
   history,
   stateSelector,
   stateToLocation,
   locationToAction,
-}: CreateRouterArg): RouterObject {
+}: CreateRouterArg<St, SubSt, A>): RouterObject {
   let doingUpdateFromBrowser = false; // Avoid immediately PUSHing the state again
-  let interestingPrevState;
+  let interestingPrevState: SubSt;
 
   // Watch changes to the Redux state
   store.subscribe(() => {
@@ -42,7 +49,7 @@ export function createRouter({
     }
   });
 
-  const dispatchBrowserLocationChange = nextLocation => {
+  const dispatchBrowserLocationChange = (nextLocation: Location) => {
     const action = locationToAction(nextLocation);
     if (action) {
       doingUpdateFromBrowser = true;
@@ -66,11 +73,13 @@ export function createRouter({
   interestingPrevState = stateSelector(store.getState());
 
   return {
-    provisionalLocation: action => {
+    provisionalLocation: (makeAction: () => A) => {
       const state = store.getState();
-      const tempStore = createStore(reducer, state);
-      const a = action();
-      tempStore.dispatch(a);
+      // This is a hack -- we know that our fully-constructed state is
+      // valid as a "preloaded" state for a brand new store!
+      const tempStore = createStore(reducer, state as PreloadedState<St>);
+      const action = makeAction();
+      tempStore.dispatch(action);
       const maybeState = tempStore.getState();
       return stateToLocation(maybeState);
     },