TypeScript typings for ng-redux?

[cveld]

Hi William,

Do you also provide typings for ng-redux?

Regards, Carl

[sstorie]

I am also wondering about this because I'm banging my head against the wall trying to get a simple typescript/Angular1.4 application working with ng-redux. The examples have been very helpful, but Visual Studio is complaining it can't find the ng-redux module.

I'm sure this is something on my end, or something is missing that I don't understand yet, but I get a compilation error from webpack when using the following code:

/// <reference path="../../../typings/tsd.d.ts" />

import * as angular from "angular";
import ngRedux from "ng-redux";    <-- This line is causing the problem
import rootReducer from "./reducers";

I have installed ng-redux just like any other module using npm, but for some reason webpack just doesn't see this. The only thing I can think of at the moment is the lack of typing is causing the typescript compilation to fail behind the scenes.

[wbuchwalter]

@sstorie Nop. it is not a problem on your end.
TypeScript will look in your definition file and try to find a ng-redux exported module.
Since it can't find it it will cause the error you are talking about.
That said, everything should compile and work fine anyway, this error as no real incidence.

I will try to add a basic typing to remove this error, and provide basic autocompletion soon.

[sstorie]

Ok cool. I've also found your tsRedux repo immensely helpful. I was able to get past the error by mimicking what you did in that code base too.

Typescript bindings would be awesome to have, but I am able to move forward at the moment.

[wbuchwalter]

Here is a quick and dirty typing to get started, all the store creation is missing among other things,
feel free to PR if you wish to help me on that!

declare module ngRedux {

  interface Reducer extends Function {
    (state: any, action: any): any;
  }

  interface INgRedux {
    getReducer(): Reducer;
    replaceReducer(nextReducer: Reducer): void;
    dispatch(action: any): any;
    getState(): any;
    subscribe(listener: Function): Function;
    connect(
      mapStateToTarget: (state: any) => Object,
      mapDispatchToTarget?: Object | ((dispatch: Function) => Object)
    ): (target: Function | Object) => ()  => void;
  }
}

declare module "ngRedux" {
  export = ngRedux;
}

Usage:

 constructor($ngRedux: ngRedux.INgRedux) {
   /* your code */
  }

[sstorie]

I might really be missing something here (likely so!), but does this cover everything?

declare module ngRedux {

    interface Dispatch extends Function {
        (action: any): any;
    }

    interface Reducer extends Function {
        (state: any, action: any): any;
    }

    interface MiddlewareArg {
        dispatch: Dispatch;
        getState: Function;
    }

    interface Middleware extends Function {
        (obj: MiddlewareArg): Function;
    }

    interface INgRedux {
        getReducer(): Reducer;
        replaceReducer(nextReducer: Reducer): void;
        dispatch(action: any): any;
        getState(): any;
        subscribe(listener: Function): Function;
        connect(
            mapStateToTarget: (state: any) => Object,
            mapDispatchToTarget?: Object | ((dispatch: Function) => Object)
        ): (target: Function | Object) => () => void;
    }

    interface INgReduxProvider {
        createStoreWith(reducer: Reducer, middlewares?: Middleware[], storeEnhancers?: Function[]): void;
    }
}

declare module "ngRedux" {
    export = ngRedux;
}

[wbuchwalter]

Looks good!
I see one thing that you missed: the middlewares argument for createStoreWith is an array which can also contains strings in case you are using Dependency Injectable Middlewares (I just realized DI middlewares are really well hidden in the doc).

So it should be something like:

declare module ngRedux {

    interface Dispatch extends Function {
        (action: any): any;
    }

    interface Reducer extends Function {
        (state: any, action: any): any;
    }

    interface MiddlewareArg {
        dispatch: Dispatch;
        getState: Function;
    }

    interface Middleware extends Function {
        (obj: MiddlewareArg): Function;
    }

    interface INgRedux {
        getReducer(): Reducer;
        replaceReducer(nextReducer: Reducer): void;
        dispatch(action: any): any;
        getState(): any;
        subscribe(listener: Function): Function;
        connect(
            mapStateToTarget: (state: any) => Object,
            mapDispatchToTarget?: Object | ((dispatch: Function) => Object)
        ): (target: Function | Object) => () => void;
    }

    interface INgReduxProvider {
        createStoreWith(reducer: Reducer, middlewares?: Array<Middleware|string>, storeEnhancers?: Function[]): void;
    }
}

declare module "ngRedux" {
    export = ngRedux;
}

[sstorie]

@wbuchwalter Do you know if it's normal to reproduce types in a module like this even though they exist in another module? For example, the Dispatch, Reducer, Middleware, etc types all exist in the redux.d.ts definition already, but we're duplicating them here.

I wasn't sure if importing another module in a d.ts file was something that makes sense.

[wbuchwalter]

Yea it does make sense, you can just add

/// <reference path="../redux/redux.d.ts" />

Only drawback is if Redux makes a breaking change to those types, and push the new typings before the changes are reflected in ngRedux, it will break for any new installation of ngRedux.

But Redux core is stable and there should not be any major change anymore, so I don't really mind.

[sstorie]

Submitted a proper PR now using the right name for the file and including all required types so there's no external dependencies on the typings: #35

[wbuchwalter]

Thx!
I'll make a new npm package including the .d.ts today.