Fix Typescript strict type issues (#68)

* fix: typescript strict issues, remove many instances of any, fix minor bugs identified due to type mismatches

Author: James Salas

package.json

@@ -37,20 +37,21 @@
     "node": ">=8"
   },
   "devDependencies": {
-    "@angular/animations": "7.2.0",
-    "@angular/cli": "7.2.1",
-    "@angular/common": "7.2.0",
-    "@angular/compiler": "7.2.0",
-    "@angular/compiler-cli": "7.2.0",
-    "@angular/core": "7.2.0",
-    "@angular/forms": "7.2.0",
-    "@angular/platform-browser": "7.2.0",
-    "@angular/platform-browser-dynamic": "7.2.0",
-    "@angular/router": "7.2.0",
+    "@angular/animations": "7.2.1",
+    "@angular/cli": "7.2.2",
+    "@angular/common": "7.2.1",
+    "@angular/compiler": "7.2.1",
+    "@angular/compiler-cli": "7.2.1",
+    "@angular/core": "7.2.1",
+    "@angular/forms": "7.2.1",
+    "@angular/platform-browser": "7.2.1",
+    "@angular/platform-browser-dynamic": "7.2.1",
+    "@angular/router": "7.2.1",
     "@commitlint/cli": "7.0.0",
     "@commitlint/config-conventional": "7.0.1",
     "@commitlint/prompt-cli": "7.0.0",
     "@types/jest": "23.1.6",
+    "@types/webpack-env": "1.13.6",
     "babel-core": "6.26.3",
     "babel-jest": "23.4.2",
     "codelyzer": "4.5.0",

packages/example-app/package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser": "^7.2.0",
     "@angular/platform-browser-dynamic": "^7.2.0",
     "@angular/router": "^7.2.0",
+    "@types/webpack-env": "1.13.6",
     "core-js": "^2.6.2",
     "flux-standard-action": "^2.0.3",
     "ramda": "^0.23.0",

packages/example-app/src/app/animals/animal-list/component.ts

@@ -13,12 +13,12 @@ export class AnimalListComponent {
   @Input() animalType!: string;
   @Input() animals!: Observable<Animal[]>;
   @Input() loading!: Observable<boolean>;
-  @Input() error!: Observable<any>;
+  @Input() error!: Observable<boolean>;
 
   // Since we're observing an array of items, we need to set up a 'trackBy'
   // parameter so Angular doesn't tear down and rebuild the list's DOM every
   // time there's an update.
-  getKey(_: any, animal: Animal) {
+  getKey(_: unknown, animal: Animal) {
     return animal.id;
   }
 }

packages/example-app/src/app/animals/animal/reducers.ts

@@ -1,4 +1,6 @@
 import { Action, Reducer } from 'redux';
+
+import { Animal } from '../model';
 import { ADD_TICKET, REMOVE_TICKET } from './actions';
 
 export const ticketsReducer: Reducer<number> = (
@@ -15,10 +17,13 @@ export const ticketsReducer: Reducer<number> = (
 };
 
 // Basic reducer logic.
-export const animalComponentReducer: Reducer<any> = (
-  state: any = {},
+export const animalComponentReducer = (
+  state: Animal | undefined,
   action: Action,
-): {} => ({
-  ...state,
-  tickets: ticketsReducer(state.tickets, action),
-});
+) =>
+  state
+    ? {
+        ...state,
+        tickets: ticketsReducer(state.tickets, action),
+      }
+    : {};

packages/example-app/src/app/animals/api/actions.ts

@@ -1,10 +1,11 @@
 import { dispatch } from '@angular-redux/store';
 import { Injectable } from '@angular/core';
 import { FluxStandardAction } from 'flux-standard-action';
-import { Animal, AnimalType, LoadError } from '../model';
+
+import { Animal, AnimalError, AnimalType } from '../model';
 
 // Flux-standard-action gives us stronger typing of our actions.
-export type Payload = Animal[] | LoadError;
+export type Payload = Animal[] | AnimalError;
 
 export interface MetaData {
   animalType: AnimalType;
@@ -44,8 +45,8 @@ export class AnimalAPIActions {
 
   loadFailed = (
     animalType: AnimalType,
-    error: LoadError,
-  ): AnimalAPIAction<LoadError> => ({
+    error: AnimalError,
+  ): AnimalAPIAction<AnimalError> => ({
     type: AnimalAPIActions.LOAD_FAILED,
     meta: { animalType },
     payload: error,

packages/example-app/src/app/animals/api/epics.ts

@@ -5,7 +5,7 @@ import { of } from 'rxjs';
 import { catchError, filter, map, startWith, switchMap } from 'rxjs/operators';
 
 import { AppState } from '../../store/model';
-import { Animal, AnimalType, LoadError } from '../model';
+import { Animal, AnimalError, AnimalType } from '../model';
 import { AnimalAPIAction, AnimalAPIActions } from './actions';
 import { AnimalAPIService } from './service';
 
@@ -37,8 +37,8 @@ export class AnimalAPIEpics {
   private createLoadAnimalEpic(
     animalType: AnimalType,
   ): Epic<
-    AnimalAPIAction<Animal[] | LoadError>,
-    AnimalAPIAction<Animal[] | LoadError>,
+    AnimalAPIAction<Animal[] | AnimalError>,
+    AnimalAPIAction<Animal[] | AnimalError>,
     AppState
   > {
     return (action$, state$) =>

packages/example-app/src/app/animals/api/reducer.ts

@@ -7,7 +7,7 @@ import { AnimalAPIAction, AnimalAPIActions } from './actions';
 const INITIAL_STATE: AnimalList = {
   items: {},
   loading: false,
-  error: null,
+  error: undefined,
 };
 
 // A higher-order reducer: accepts an animal type and returns a reducer
@@ -28,14 +28,14 @@ export function createAnimalAPIReducer(animalType: AnimalType) {
           ...state,
           items: {},
           loading: true,
-          error: null,
+          error: undefined,
         };
       case AnimalAPIActions.LOAD_SUCCEEDED:
         return {
           ...state,
           items: indexBy(prop('id'), action.payload as Animal[]),
           loading: false,
-          error: null,
+          error: undefined,
         };
       case AnimalAPIActions.LOAD_FAILED:
         return {

packages/example-app/src/app/animals/model.ts

@@ -13,13 +13,19 @@ export interface Animal {
   tickets: number;
 }
 
+export interface AnimalResponse {
+  name: string;
+  type: AnimalType;
+  ticketPrice: number;
+}
+
 export interface AnimalList {
   items: {};
   loading: boolean;
-  error: any;
+  error: boolean | undefined;
 }
 
-export interface LoadError {
+export interface AnimalError {
   status: string;
 }
 
@@ -31,10 +37,10 @@ export function initialAnimalList(): AnimalList {
   };
 }
 
-export const fromServer = (record: any): Animal => ({
+export const fromServer = (record: AnimalResponse): Animal => ({
   id: record.name.toLowerCase(),
-  animalType: record.animalType,
+  animalType: record.type,
   name: record.name,
   ticketPrice: record.ticketPrice || 0,
-  tickets: record.tickets || 0,
+  tickets: 0,
 });

packages/example-app/src/app/elephants/page.spec.ts

@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
 import { toArray } from 'rxjs/operators';
 
 import { AnimalAPIActions } from '../animals/api/actions';
-import { ANIMAL_TYPES } from '../animals/model';
+import { Animal, ANIMAL_TYPES } from '../animals/model';
 import { ElephantPageComponent } from './page';
 
 @Component({
@@ -19,9 +19,9 @@ import { ElephantPageComponent } from './page';
 })
 class MockAnimalListComponent {
   @Input() animalsName!: string;
-  @Input() animals!: Observable<any>;
+  @Input() animals!: Observable<Animal[]>;
   @Input() loading!: Observable<boolean>;
-  @Input() error!: Observable<any>;
+  @Input() error!: Observable<boolean>;
 }
 
 describe('Elephant Page Container', () => {

packages/example-app/src/app/elephants/page.ts

@@ -8,15 +8,16 @@ import { map } from 'rxjs/operators';
 import { AnimalAPIActions } from '../animals/api/actions';
 import { Animal, ANIMAL_TYPES } from '../animals/model';
 
-export const sortAnimals = (animalDictionary$: Observable<{}>) =>
-  animalDictionary$.pipe(
+export function sortAnimals(animalDictionary$: Observable<{}>) {
+  return animalDictionary$.pipe(
     map(
       pipe(
         values,
         sortBy(prop('name')),
       ),
     ),
   );
+}
 
 @Component({
   templateUrl: './page.html',
@@ -31,7 +32,7 @@ export class ElephantPageComponent {
   readonly loading!: Observable<boolean>;
 
   @select(['elephant', 'error'])
-  readonly error!: Observable<any>;
+  readonly error!: Observable<boolean>;
 
   constructor(actions: AnimalAPIActions) {
     actions.loadAnimals(ANIMAL_TYPES.ELEPHANT);

packages/example-app/src/app/feedback/page.html

@@ -24,14 +24,14 @@ <h2>Feedback Form</h2>
       ngControl
       ngModel />
   </label>
-  
+
   <label for="comments">Comments:
     <textarea
       name="comments"
       [maxLength]="getMaxCommentChars()"
       ngControl
       ngModel></textarea>
-    <p>{{ charsLeft$ | async }} characters remaining.
+    <p>{{ charsLeft | async }} characters remaining.
   </label>
 
   <button>Send!</button>

packages/example-app/src/app/lions/page.html

@@ -1,7 +1,7 @@
 <zoo-animal-list
   animalsName="Lions"
   animalType="lion"
-  [animals]="animals$"
-  [loading]="loading$"
-  [error]="error$">
+  [animals]="animals"
+  [loading]="loading"
+  [error]="error">
 </zoo-animal-list>

packages/example-app/src/app/lions/page.spec.ts

@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
 import { toArray } from 'rxjs/operators';
 
 import { AnimalAPIActions } from '../animals/api/actions';
-import { ANIMAL_TYPES } from '../animals/model';
+import { Animal, ANIMAL_TYPES } from '../animals/model';
 import { LionPageComponent } from './page';
 
 @Component({
@@ -19,9 +19,9 @@ import { LionPageComponent } from './page';
 })
 class MockAnimalListComponent {
   @Input() animalsName!: string;
-  @Input() animals!: Observable<any>;
+  @Input() animals!: Observable<Animal[]>;
   @Input() loading!: Observable<boolean>;
-  @Input() error!: Observable<any>;
+  @Input() error!: Observable<boolean>;
 }
 
 describe('Lion Page Container', () => {

packages/example-app/src/app/lions/page.ts

@@ -7,15 +7,16 @@ import { map } from 'rxjs/operators';
 import { AnimalAPIActions } from '../animals/api/actions';
 import { Animal, ANIMAL_TYPES } from '../animals/model';
 
-export const sortAnimals = (animalDictionary: Observable<{}>) =>
-  animalDictionary.pipe(
+export function sortAnimals(animalDictionary: Observable<{}>) {
+  return animalDictionary.pipe(
     map(() =>
       pipe(
         values,
         sortBy(prop('name')),
       ),
     ),
   );
+}
 
 @Component({
   templateUrl: './page.html',
@@ -30,7 +31,7 @@ export class LionPageComponent {
   readonly loading!: Observable<boolean>;
 
   @select(['lion', 'error'])
-  readonly error!: Observable<any>;
+  readonly error!: Observable<boolean>;
 
   constructor(actions: AnimalAPIActions) {
     actions.loadAnimals(ANIMAL_TYPES.LION);

packages/example-app/src/app/store/model.ts

@@ -2,8 +2,8 @@ import { AnimalList, AnimalType, initialAnimalList } from '../animals/model';
 
 export type AppState = { [key in AnimalType]: AnimalList } &
   Partial<{
-    routes: any;
-    feedback: any;
+    routes: string;
+    feedback: unknown;
   }>;
 
 export function initialAppState() {

packages/example-app/src/app/store/module.spec.ts

@@ -5,10 +5,11 @@ import {
 } from '@angular-redux/store/testing';
 import { async, getTestBed, TestBed } from '@angular/core/testing';
 import { RootEpics } from './epics';
+import { AppState } from './model';
 import { StoreModule } from './module';
 
 describe('Store Module', () => {
-  let mockNgRedux: NgRedux<any>;
+  let mockNgRedux: NgRedux<AppState>;
   let devTools: DevToolsExtension;
   let mockEpics: Partial<RootEpics>;
 
@@ -33,7 +34,7 @@ describe('Store Module', () => {
 
   it('should configure the store when the module is loaded', async(() => {
     const configureSpy = spyOn(MockNgRedux.getInstance(), 'configureStore');
-    new StoreModule(mockNgRedux, devTools, null, mockEpics as any);
+    new StoreModule(mockNgRedux, devTools, null as any, mockEpics as any);
 
     expect(configureSpy).toHaveBeenCalled();
   }));

packages/example-app/src/app/store/reducers.ts

@@ -9,7 +9,7 @@ const elephant = createAnimalAPIReducer(ANIMAL_TYPES.ELEPHANT);
 // Define the global store shape by combining our application's
 // reducers together into a given structure.
 export const rootReducer = composeReducers(
-  defaultFormReducer<any>(),
+  defaultFormReducer<unknown>(),
   combineReducers({
     elephant,
     lion: createAnimalAPIReducer(ANIMAL_TYPES.LION),

packages/example-app/src/tsconfig.json

@@ -11,7 +11,6 @@
     "outDir": "../dist/out-tsc",
     "sourceMap": true,
     "target": "es5",
-    "typeRoots": ["../node_modules/@types"],
 
     // Causes problems for @Outputs with AoT.
     // See https://github.com/angular/angular/issues/17131.

packages/example-app/src/tsconfig.spec.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "types": ["jasmine", "node"]
+    "types": ["jasmine", "node", "webpack-env"]
   },
   "files": ["test.ts", "polyfills.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]

packages/router/src/reducer.ts

@@ -9,7 +9,7 @@ export interface RouterAction extends Action {
 }
 
 export function routerReducer(
-  state: string = DefaultRouterState,
+  state: string | undefined = DefaultRouterState,
   action: RouterAction,
 ): string {
   switch (action.type) {