Clean up some implicit Anys (#4235)

Increase type safety in 3 most important files

lib/src/Navigation.ts

@@ -62,7 +62,12 @@ export class Navigation {
    * Utility helper function like registerComponent,
    * wraps the provided component with a react-redux Provider with the passed redux store
    */
-  public registerComponentWithRedux(componentName: string, getComponentClassFunc: ComponentProvider, ReduxProvider: any, reduxStore: any): ComponentType<any> {
+  public registerComponentWithRedux(
+    componentName: string,
+    getComponentClassFunc: ComponentProvider,
+    ReduxProvider: any,
+    reduxStore: any
+  ): ComponentType<any> {
     return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, ReduxProvider, reduxStore);
   }
 
@@ -97,14 +102,14 @@ export class Navigation {
   /**
    * Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
    */
-  public dismissModal(componentId: string, mergeOptions?): Promise<any> {
+  public dismissModal(componentId: string, mergeOptions?: Options): Promise<any> {
     return this.commands.dismissModal(componentId, mergeOptions);
   }
 
   /**
    * Dismiss all Modals
    */
-  public dismissAllModals(mergeOptions?): Promise<any> {
+  public dismissAllModals(mergeOptions?: Options): Promise<any> {
     return this.commands.dismissAllModals(mergeOptions);
   }
 
@@ -118,21 +123,21 @@ export class Navigation {
   /**
    * Pop a component from the stack, regardless of it's position.
    */
-  public pop(componentId: string, mergeOptions?): Promise<any> {
+  public pop(componentId: string, mergeOptions?: Options): Promise<any> {
     return this.commands.pop(componentId, mergeOptions);
   }
 
   /**
    * Pop the stack to a given component
    */
-  public popTo(componentId: string, mergeOptions?): Promise<any> {
+  public popTo(componentId: string, mergeOptions?: Options): Promise<any> {
     return this.commands.popTo(componentId, mergeOptions);
   }
 
   /**
    * Pop the component's stack to root.
    */
-  public popToRoot(componentId: string, mergeOptions?): Promise<any> {
+  public popToRoot(componentId: string, mergeOptions?: Options): Promise<any> {
     return this.commands.popToRoot(componentId, mergeOptions);
   }
 

lib/src/commands/Commands.test.ts

@@ -382,7 +382,7 @@ describe('Commands', () => {
       const mockParser = { parse: () => 'parsed' };
       const mockCrawler = { crawl: (x) => x, processOptions: (x) => x };
       commandsObserver.register(cb);
-      uut = new Commands(mockCommandsSender, mockParser, mockCrawler, commandsObserver, new UniqueIdProvider());
+      uut = new Commands(mockCommandsSender, mockParser as any, mockCrawler as any, commandsObserver, new UniqueIdProvider());
     });
 
     function getAllMethodsOfUut() {

lib/src/commands/Commands.ts

@@ -4,12 +4,14 @@ import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 import { Options } from '../interfaces/Options';
 import { Layout, LayoutRoot } from '../interfaces/Layout';
+import { LayoutTreeParser } from './LayoutTreeParser';
+import { LayoutTreeCrawler } from './LayoutTreeCrawler';
 
 export class Commands {
   constructor(
     private readonly nativeCommandsSender: NativeCommandsSender,
-    private readonly layoutTreeParser,
-    private readonly layoutTreeCrawler,
+    private readonly layoutTreeParser: LayoutTreeParser,
+    private readonly layoutTreeCrawler: LayoutTreeCrawler,
     private readonly commandsObserver: CommandsObserver,
     private readonly uniqueIdProvider: UniqueIdProvider) {
   }
@@ -64,7 +66,7 @@ export class Commands {
     return result;
   }
 
-  public dismissModal(componentId, mergeOptions?: Options) {
+  public dismissModal(componentId: string, mergeOptions?: Options) {
     const commandId = this.uniqueIdProvider.generate('dismissModal');
     const result = this.nativeCommandsSender.dismissModal(commandId, componentId, mergeOptions);
     this.commandsObserver.notify('dismissModal', { commandId, componentId, mergeOptions});

lib/src/components/ComponentRegistry.ts

@@ -7,9 +7,9 @@ import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 export class ComponentRegistry {
   constructor(private readonly store: Store, private readonly componentEventsObserver: ComponentEventsObserver) { }
 
-  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider, ReduxProvider?: any, userStore?: any): ComponentType<any> {
+  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider, ReduxProvider?: any, reduxStore?: any): ComponentType<any> {
     const OriginalComponentClass = getComponentClassFunc();
-    const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store, this.componentEventsObserver, ReduxProvider, userStore);
+    const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store, this.componentEventsObserver, ReduxProvider, reduxStore);
     this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);
     AppRegistry.registerComponent(componentName, () => NavigationComponent);
     return NavigationComponent;

lib/src/components/ComponentWrapper.test.tsx

@@ -3,12 +3,15 @@ import { Text } from 'react-native';
 import * as renderer from 'react-test-renderer';
 import { ComponentWrapper } from './ComponentWrapper';
 import { Store } from './Store';
+import { mock, verify, instance } from 'ts-mockito';
+import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 
 describe('ComponentWrapper', () => {
   const componentName = 'example.MyComponent';
   let store;
   let myComponentProps;
-  const componentEventsObserver = { unmounted: jest.fn() };
+  let mockedComponentEventsObserver: ComponentEventsObserver;
+  let componentEventsObserver: ComponentEventsObserver;
 
   class MyComponent extends React.Component<any, any> {
     static options = {
@@ -45,6 +48,8 @@ describe('ComponentWrapper', () => {
 
   beforeEach(() => {
     store = new Store();
+    mockedComponentEventsObserver = mock(ComponentEventsObserver);
+    componentEventsObserver = instance(mockedComponentEventsObserver);
   });
 
   it('must have componentId as prop', () => {
@@ -130,9 +135,9 @@ describe('ComponentWrapper', () => {
   it(`calls unmounted on componentEventsObserver`, () => {
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
-    expect(componentEventsObserver.unmounted).not.toHaveBeenCalled();
+    verify(mockedComponentEventsObserver.unmounted('component123')).never();
     tree.unmount();
-    expect(componentEventsObserver.unmounted).toHaveBeenCalledTimes(1);
+    verify(mockedComponentEventsObserver.unmounted('component123')).once();
   });
 
   describe(`register with redux store`, () => {

lib/src/components/ComponentWrapper.tsx

@@ -1,26 +1,29 @@
 import * as React from 'react';
 import * as  _ from 'lodash';
 import * as ReactLifecyclesCompat from 'react-lifecycles-compat';
+import { Store } from './Store';
+import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
 
-export class ComponentWrapper {
+interface HocState { componentId: string; allProps: {}; }
+interface HocProps { componentId: string; }
 
+export class ComponentWrapper {
   static wrap(
     componentName: string,
     OriginalComponentClass: React.ComponentType<any>,
-    store,
-    componentEventsObserver,
-    ReduxProvider?,
-    reduxStore?): React.ComponentType<any> {
-
-    class WrappedComponent extends React.Component<any, { componentId: string; allProps: {}; }> {
-
-      static getDerivedStateFromProps(nextProps, prevState) {
+    store: Store,
+    componentEventsObserver: ComponentEventsObserver,
+    ReduxProvider?: any,
+    reduxStore?: any
+  ): React.ComponentClass<any> {
+    class WrappedComponent extends React.Component<HocProps, HocState> {
+      static getDerivedStateFromProps(nextProps: any, prevState: HocState) {
         return {
           allProps: _.merge({}, nextProps, store.getPropsForId(prevState.componentId))
         };
       }
 
-      constructor(props) {
+      constructor(props: HocProps) {
         super(props);
         this._assertComponentId();
         this.state = {
@@ -54,14 +57,14 @@ export class ComponentWrapper {
     ReactLifecyclesCompat.polyfill(WrappedComponent);
     require('hoist-non-react-statics')(WrappedComponent, OriginalComponentClass);
 
-    if (reduxStore) {
+    if (reduxStore && ReduxProvider) {
       return ComponentWrapper.wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore);
     } else {
       return WrappedComponent;
     }
   }
 
-  static wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore): React.ComponentType<any> {
+  static wrapWithRedux(WrappedComponent: React.ComponentClass<any>, ReduxProvider: any, reduxStore: any): React.ComponentClass<any> {
     class ReduxWrapper extends React.Component<any, any> {
       render() {
         return (

package.json

@@ -77,6 +77,7 @@
     "remx": "2.x.x",
     "semver": "5.x.x",
     "shell-utils": "1.x.x",
+    "ts-mockito": "^2.3.1",
     "ts-node": "5.x.x",
     "tslint": "5.x.x",
     "typedoc": "0.x.x",