Update templates to support TypeScript 'strict' mode

templates/ReactReduxSpa/ClientApp/boot-client.tsx

@@ -12,7 +12,7 @@ import * as RoutesModule from './routes';
 let routes = RoutesModule.routes;
 
 // Create browser history to use in the Redux store
-const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
+const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
 const history = createBrowserHistory({ basename: baseUrl });
 
 // Get the application-wide store instance, prepopulating with state from the server where available.

templates/ReactReduxSpa/ClientApp/components/FetchData.tsx

@@ -8,7 +8,7 @@ import * as WeatherForecastsState from '../store/WeatherForecasts';
 type WeatherForecastProps =
     WeatherForecastsState.WeatherForecastsState        // ... state we've requested from the Redux store
     & typeof WeatherForecastsState.actionCreators      // ... plus action creators we've requested
-    & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters   
+    & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters
 
 class FetchData extends React.Component<WeatherForecastProps, {}> {
     componentWillMount() {
@@ -56,8 +56,8 @@ class FetchData extends React.Component<WeatherForecastProps, {}> {
     }
 
     private renderPagination() {
-        let prevStartDateIndex = this.props.startDateIndex - 5;
-        let nextStartDateIndex = this.props.startDateIndex + 5;
+        let prevStartDateIndex = (this.props.startDateIndex || 0) - 5;
+        let nextStartDateIndex = (this.props.startDateIndex || 0) + 5;
 
         return <p className='clearfix text-center'>
             <Link className='btn btn-default pull-left' to={ `/fetchdata/${ prevStartDateIndex }` }>Previous</Link>

templates/ReactReduxSpa/ClientApp/configureStore.ts

@@ -1,4 +1,4 @@
-import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer, Store } from 'redux';
+import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer, Store, StoreEnhancerStoreCreator, ReducersMapObject } from 'redux';
 import thunk from 'redux-thunk';
 import { routerReducer, routerMiddleware } from 'react-router-redux';
 import * as StoreModule from './store';
@@ -12,7 +12,7 @@ export default function configureStore(history: History, initialState?: Applicat
     const devToolsExtension = windowIfDefined && windowIfDefined.devToolsExtension as () => GenericStoreEnhancer;
     const createStoreWithMiddleware = compose(
         applyMiddleware(thunk, routerMiddleware(history)),
-        devToolsExtension ? devToolsExtension() : f => f
+        devToolsExtension ? devToolsExtension() : <S>(next: StoreEnhancerStoreCreator<S>) => next
     )(createStore);
 
     // Combine all reducers and instantiate the app-wide store instance
@@ -30,6 +30,6 @@ export default function configureStore(history: History, initialState?: Applicat
     return store;
 }
 
-function buildRootReducer(allReducers) {
+function buildRootReducer(allReducers: ReducersMapObject) {
     return combineReducers<ApplicationState>(Object.assign({}, allReducers, { routing: routerReducer }));
 }

templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts

@@ -7,7 +7,7 @@ import { AppThunkAction } from './';
 
 export interface WeatherForecastsState {
     isLoading: boolean;
-    startDateIndex: number;
+    startDateIndex?: number;
     forecasts: WeatherForecast[];
 }
 
@@ -23,14 +23,14 @@ export interface WeatherForecast {
 // They do not themselves have any side-effects; they just describe something that is going to happen.
 
 interface RequestWeatherForecastsAction {
-    type: 'REQUEST_WEATHER_FORECASTS',
+    type: 'REQUEST_WEATHER_FORECASTS';
     startDateIndex: number;
 }
 
 interface ReceiveWeatherForecastsAction {
-    type: 'RECEIVE_WEATHER_FORECASTS',
+    type: 'RECEIVE_WEATHER_FORECASTS';
     startDateIndex: number;
-    forecasts: WeatherForecast[]
+    forecasts: WeatherForecast[];
 }
 
 // Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the
@@ -60,7 +60,7 @@ export const actionCreators = {
 // ----------------
 // REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.
 
-const unloadedState: WeatherForecastsState = { startDateIndex: null, forecasts: [], isLoading: false };
+const unloadedState: WeatherForecastsState = { startDateIndex: undefined, forecasts: [], isLoading: false };
 
 export const reducer: Reducer<WeatherForecastsState> = (state: WeatherForecastsState, incomingAction: Action) => {
     const action = incomingAction as KnownAction;

templates/ReactReduxSpa/ClientApp/store/index.ts

@@ -3,8 +3,8 @@ import * as Counter from './Counter';
 
 // The top-level state object
 export interface ApplicationState {
-    counter: Counter.CounterState,
-    weatherForecasts: WeatherForecasts.WeatherForecastsState
+    counter: Counter.CounterState;
+    weatherForecasts: WeatherForecasts.WeatherForecastsState;
 }
 
 // Whenever an action is dispatched, Redux will update each top-level application state property using

templates/ReactReduxSpa/npm-shrinkwrap.json

@@ -22,6 +22,11 @@
       "from": "@types/react-dom@15.5.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-15.5.1.tgz"
     },
+    "@types/react-hot-loader": {
+      "version": "3.0.3",
+      "from": "@types/react-hot-loader@3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-hot-loader/-/react-hot-loader-3.0.3.tgz"
+    },
     "@types/react-redux": {
       "version": "4.4.45",
       "from": "@types/react-redux@4.4.45",

templates/ReactReduxSpa/package.json

@@ -6,6 +6,7 @@
     "@types/history": "4.6.0",
     "@types/react": "15.0.35",
     "@types/react-dom": "15.5.1",
+    "@types/react-hot-loader": "3.0.3",
     "@types/react-redux": "4.4.45",
     "@types/react-router": "4.0.12",
     "@types/react-router-dom": "4.0.5",