Update templates to support TypeScript 'strict' mode

stephtr · SteveSandersonMS · commit b8c006a3e987 · 2017-07-13T09:22:14.000+01:00
diff --git a/templates/AngularSpa/ClientApp/boot.browser.ts b/templates/AngularSpa/ClientApp/boot.browser.ts
@@ -5,13 +5,13 @@ import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module.browser';
 
-if (module['hot']) {
-    module['hot'].accept();
-    module['hot'].dispose(() => {
+if (module.hot) {
+    module.hot.accept();
+    module.hot.dispose(() => {
         // Before restarting the app, we create a new root element and dispose the old one
         const oldRootElem = document.querySelector('app');
         const newRootElem = document.createElement('app');
-        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
+        oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
         modulePromise.then(appModule => appModule.destroy());
     });
 } else {
diff --git a/templates/AngularSpa/ClientApp/boot.server.ts b/templates/AngularSpa/ClientApp/boot.server.ts
@@ -17,12 +17,12 @@ export default createServerRenderer(params => {
     ];
 
     return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
-        const appRef = moduleRef.injector.get(ApplicationRef);
+        const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
         const state = moduleRef.injector.get(PlatformState);
         const zone = moduleRef.injector.get(NgZone);
 
         return new Promise<RenderResult>((resolve, reject) => {
-            zone.onError.subscribe(errorInfo => reject(errorInfo));
+            zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
             appRef.isStable.first(isStable => isStable).subscribe(() => {
                 // Because 'onStable' fires before 'onError', we have to delay slightly before
                 // completing the request in case there's an error to report
diff --git a/templates/AngularSpa/npm-shrinkwrap.json b/templates/AngularSpa/npm-shrinkwrap.json
diff --git a/templates/AngularSpa/package.json b/templates/AngularSpa/package.json
@@ -18,7 +18,7 @@
     "@angular/platform-server": "4.2.5",
     "@angular/router": "4.2.5",
     "@ngtools/webpack": "1.5.0",
-    "@types/node": "8.0.8",
+    "@types/webpack-env": "1.13.0",
     "angular2-template-loader": "0.6.2",
     "aspnet-prerendering": "^3.0.1",
     "aspnet-webpack": "^2.0.1",
diff --git a/templates/AngularSpa/tsconfig.json b/templates/AngularSpa/tsconfig.json
@@ -7,7 +7,7 @@
     "emitDecoratorMetadata": true,
     "skipDefaultLibCheck": true,
     "lib": [ "es6", "dom" ],
-    "types": [ "node" ]
+    "types": [ "webpack-env" ]
   },
   "exclude": [ "bin", "node_modules" ],
   "atom": { "rewriteTsconfig": false }
diff --git a/templates/AureliaSpa/npm-shrinkwrap.json b/templates/AureliaSpa/npm-shrinkwrap.json
diff --git a/templates/AureliaSpa/package.json b/templates/AureliaSpa/package.json
@@ -14,7 +14,7 @@
     "jquery": "^3.2.1"
   },
   "devDependencies": {
-    "@types/node": "^7.0.12",
+    "@types/webpack-env": "^1.13.0",
     "aspnet-webpack": "^2.0.1",
     "aurelia-webpack-plugin": "^2.0.0-rc.2",
     "css-loader": "^0.28.0",
diff --git a/templates/AureliaSpa/tsconfig.json b/templates/AureliaSpa/tsconfig.json
@@ -7,7 +7,7 @@
     "emitDecoratorMetadata": true,
     "skipDefaultLibCheck": true,
     "lib": [ "es2015", "dom" ],
-    "types": [ "node" ]
+    "types": [ "webpack-env" ]
   },
   "exclude": [ "bin", "node_modules" ],
   "atom": { "rewriteTsconfig": false }
diff --git a/templates/KnockoutSpa/ClientApp/boot.ts b/templates/KnockoutSpa/ClientApp/boot.ts
@@ -3,19 +3,18 @@ import 'bootstrap';
 import * as ko from 'knockout';
 import './webpack-component-loader';
 import AppRootComponent from './components/app-root/app-root';
-const createHistory = require('history').createBrowserHistory;
-const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
+import { createBrowserHistory } from 'history';
+const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
 const basename = baseUrl.substring(0, baseUrl.length - 1); // History component needs no trailing slash
 
 // Load and register the <app-root> component
 ko.components.register('app-root', AppRootComponent);
 
 // Tell Knockout to start up an instance of your application
-ko.applyBindings({ history: createHistory({ basename }), basename });
+ko.applyBindings({ history: createBrowserHistory({ basename }), basename });
 
 // Basic hot reloading support. Automatically reloads and restarts the Knockout app each time
 // you modify source files. This will not preserve any application state other than the URL.
-declare var module: any;
 if (module.hot) {
     module.hot.accept();
     module.hot.dispose(() => ko.cleanNode(document.body));
diff --git a/templates/KnockoutSpa/ClientApp/router.ts b/templates/KnockoutSpa/ClientApp/router.ts
@@ -22,7 +22,7 @@ export class Router {
         crossroads.resetState();
         crossroads.normalizeFn = crossroads.NORM_AS_OBJECT;
         routes.forEach(route => {
-            crossroads.addRoute(route.url, (requestParams) => {
+            crossroads.addRoute(route.url, (requestParams: any) => {
                 this.currentRoute(ko.utils.extend(requestParams, route.params));
             });
         });
diff --git a/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts b/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts
@@ -8,18 +8,18 @@ ko.components.loaders.unshift({
     loadComponent: (name, componentConfig, callback) => {
         if (typeof componentConfig === 'function') {
             // It's a lazy-loaded Webpack bundle
-            (componentConfig as any)(loadedModule => {
+            (componentConfig as any)((loadedModule: any) => {
                 // Handle TypeScript-style default exports
                 if (loadedModule.__esModule && loadedModule.default) {
                     loadedModule = loadedModule.default;
                 }
 
                 // Pass the loaded module to KO's default loader
-                ko.components.defaultLoader.loadComponent(name, loadedModule, callback);
+                ko.components.defaultLoader.loadComponent!(name, loadedModule as KnockoutComponentTypes.ComponentConfig, callback);
             });
         } else {
             // It's something else - let another component loader handle it
-            callback(null);
+            callback((null as any) as KnockoutComponentTypes.Definition); // workaround until https://github.com/DefinitelyTyped/DefinitelyTyped/pull/17999
         }
     }
 });
diff --git a/templates/KnockoutSpa/npm-shrinkwrap.json b/templates/KnockoutSpa/npm-shrinkwrap.json
diff --git a/templates/KnockoutSpa/package.json b/templates/KnockoutSpa/package.json
@@ -6,12 +6,12 @@
     "@types/core-js": "^0.9.34",
     "@types/crossroads": "0.0.29",
     "@types/es6-promise": "0.0.32",
-    "@types/history": "^2.0.38",
+    "@types/history": "^4.6.0",
     "@types/jquery": "^2.0.32",
-    "@types/knockout": "^3.4.35",
+    "@types/knockout": "^3.4.41",
     "@types/react-router": "^2.0.37",
-    "@types/requirejs": "^2.1.26",
     "@types/signals": "0.0.16",
+    "@types/webpack-env": "^1.13.0",
     "aspnet-webpack": "^2.0.1",
     "awesome-typescript-loader": "^3.0.0",
     "bootstrap": "^3.3.6",
@@ -21,7 +21,7 @@
     "event-source-polyfill": "^0.0.7",
     "extract-text-webpack-plugin": "^2.0.0-rc",
     "file-loader": "^0.9.0",
-    "history": "^4.3.0",
+    "history": "^4.6.3",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^2.2.1",
     "json-loader": "^0.5.4",
diff --git a/templates/KnockoutSpa/tsconfig.json b/templates/KnockoutSpa/tsconfig.json
@@ -4,7 +4,7 @@
     "target": "es5",
     "sourceMap": true,
     "skipDefaultLibCheck": true,
-    "types": ["es6-promise", "history", "requirejs"]
+    "types": ["es6-promise", "webpack-env"]
   },
   "exclude": [
       "bin",
diff --git a/templates/ReactReduxSpa/ClientApp/boot-client.tsx b/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.
diff --git a/templates/ReactReduxSpa/ClientApp/components/FetchData.tsx b/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>
diff --git a/templates/ReactReduxSpa/ClientApp/configureStore.ts b/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 }));
 }
diff --git a/templates/ReactReduxSpa/ClientApp/store/WeatherForecasts.ts b/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;
diff --git a/templates/ReactReduxSpa/ClientApp/store/index.ts b/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
diff --git a/templates/ReactReduxSpa/npm-shrinkwrap.json b/templates/ReactReduxSpa/npm-shrinkwrap.json
diff --git a/templates/ReactReduxSpa/package.json b/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",
diff --git a/templates/ReactSpa/ClientApp/boot.tsx b/templates/ReactSpa/ClientApp/boot.tsx
@@ -10,7 +10,7 @@ let routes = RoutesModule.routes;
 function renderApp() {
     // This code starts up the React app when it runs in a browser. It sets up the routing
     // configuration and injects the app into a DOM element.
-    const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
+    const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
     ReactDOM.render(
         <AppContainer>
             <BrowserRouter children={ routes } basename={ baseUrl } />
diff --git a/templates/ReactSpa/npm-shrinkwrap.json b/templates/ReactSpa/npm-shrinkwrap.json
diff --git a/templates/ReactSpa/package.json b/templates/ReactSpa/package.json
@@ -6,7 +6,9 @@
     "@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-router": "4.0.12",
+    "@types/react-router-dom": "4.0.5",
     "@types/webpack-env": "1.13.0",
     "aspnet-webpack": "^2.0.1",
     "aspnet-webpack-react": "^3.0.0",
diff --git a/templates/VueSpa/npm-shrinkwrap.json b/templates/VueSpa/npm-shrinkwrap.json
diff --git a/templates/VueSpa/package.json b/templates/VueSpa/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "devDependencies": {
-    "@types/requirejs": "^2.1.28",
+    "@types/webpack-env": "^1.13.0",
     "aspnet-webpack": "^2.0.1",
     "awesome-typescript-loader": "^3.0.0",
     "bootstrap": "^3.3.6",
diff --git a/templates/VueSpa/tsconfig.json b/templates/VueSpa/tsconfig.json
