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

Author: James Salas

package.json

@@ -51,6 +51,7 @@
     "@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/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>;
 

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.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/store/src/components/root-store.ts

@@ -51,11 +51,11 @@ export class RootStore<RootState> extends NgRedux<RootState> {
   ): void => {
     assert(!this.store, 'Store already configured!');
     // Variable-arity compose in typescript FTW.
-    this.setStore(compose<StoreCreator>(
-      applyMiddleware(...middleware),
+    this.setStore(
+      compose<StoreCreator>(
+        applyMiddleware(...middleware),
         ...enhancers,
-      )(createStore)
-      (enableFractalReducers(rootReducer), initState),
+      )(createStore)(enableFractalReducers(rootReducer), initState),
     );
   };
 

packages/store/src/decorators/dispatch.ts

@@ -1,3 +1,5 @@
+import { Action } from 'redux';
+
 import { NgRedux } from '../components/ng-redux';
 import { getBaseStore } from './helpers';
 
@@ -13,11 +15,14 @@ export function dispatch(): PropertyDecorator {
     key: string | symbol | number,
     descriptor?: PropertyDescriptor,
   ): PropertyDescriptor {
-    let originalMethod: () => void;
+    let originalMethod: () => Action;
 
-    const wrapped = function(this: any, ...args: any) {
-      const result = originalMethod.apply(this, args);
-      if (result !== false) {
+    const wrapped = function(this: unknown, ...args: unknown[]) {
+      const result = originalMethod.apply<unknown, unknown[], Action>(
+        this,
+        args,
+      );
+      if (result !== undefined) {
         const store = getBaseStore(this) || NgRedux.instance;
         if (store) {
           store.dispatch(result);
@@ -27,6 +32,7 @@ export function dispatch(): PropertyDecorator {
     };
 
     descriptor = descriptor || Object.getOwnPropertyDescriptor(target, key);
+
     if (descriptor === undefined) {
       const dispatchDescriptor: PropertyDescriptor = {
         get: () => wrapped,
@@ -41,3 +47,6 @@ export function dispatch(): PropertyDecorator {
     }
   };
 }
+// get descriptor
+// if no descriptor, create one with getter setter
+// if descriptor, set original method to descriptor, and then bind the wrapped function instead

yarn.lock

@@ -1255,6 +1255,11 @@
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
+"@types/[email protected]":
+  version "1.13.6"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"
+  integrity sha512-5Th3OsZ4gTRdr9Mho83BQ23cex4sRhOR4XTG+m+cJc0FhtUBK9Vn62hBJ+pnQYnSxoPOsKoAPOx6FcphxBC8ng==
+
 "@types/webpack-sources@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"