CODEWITHSUNDEEP
angularjstypescripttypescript-typingsangularjs-provider
Meshko
Meshko

Reputation: 33

typescript not recognizing the interface on angularjs providers $get method

OK, so I wanted to have a provider which would allow me to closure the reference for the state provider. So, I've got the JS code and I'm trying to migrate it to TS. This is what I've got so far, but for some reason it keeps on complaining that there is no such method (Property 'get' does not exist on type 'IReferenceProvider'. Tried changing the interface to 'IReferenceProviderGetterInterface' the 'get' method seems to be doing fine, but I'm losing the 'injectRef' method which just does not seems right, so I believe I got the interfaces in the right place). Anyone had this issue before, it would be nice to point out what I'm doing wrong. Tried google-ing the issue, but everything seems OK as much as I can tell. Anyways, here are the snippets: 

export interface IReferenceProvider extends angular.IServiceProvider {
    injectRef(name: string, ref: angular.ui.IUrlRouterProvider | angular.ui.IStateProvider): void;
}

export interface IReferenceProviderGetterInterface {
    get(name: string): angular.ui.IUrlRouterProvider | angular.ui.IStateProvider;
}

class ReferenceProvider implements IReferenceProvider {
    private refs: { [key: string]: angular.ui.IUrlRouterProvider | angular.ui.IStateProvider } = {};

    $get(): IReferenceProviderGetterInterface {
        return {
            get: (name: string): angular.ui.IUrlRouterProvider | angular.ui.IStateProvider => {
                return this.refs[name];
            }
        };
    }

    injectRef(name: string, ref: angular.ui.IUrlRouterProvider | angular.ui.IStateProvider): void {
        this.refs[name] = ref;
    }
}

angular.module("app")
    .provider("refs", ReferenceProvider);
}

and the way I'm using this is: 

static $inject: Array<string> = ["refs"];

private $stateProvider: angular.ui.IStateProvider;

constructor(refs: IReferenceProvider) {
        this.$stateProvider = refs.get("$stateProvider");
...
}

Upvotes: 0

Views: 225

Answers (1)

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15765

The function get really doesnt exist on IReferenceProvider, it only has the function $get.

In order to do what you want you would need to also put the get function on the ReferenceProvider itself:

export interface IReferenceProvider extends angular.IServiceProvider, IReferenceProviderGetterInterface {
    injectRef(name: string, ref: angular.ui.IUrlRouterProvider | angular.ui.IStateProvider): void;
}

class ReferenceProvider implements IReferenceProvider {
    private refs: { [key: string]: angular.ui.IUrlRouterProvider | angular.ui.IStateProvider } = {};

    $get(): IReferenceProviderGetterInterface {
        return {
            get: (name: string): angular.ui.IUrlRouterProvider | angular.ui.IStateProvider => {
                return this.refs[name];
            }
        };
    }

    get: (name: string): angular.ui.IUrlRouterProvider | angular.ui.IStateProvider => {
        return this.refs[name];
    }

    injectRef(name: string, ref: angular.ui.IUrlRouterProvider | angular.ui.IStateProvider): void {
        this.refs[name] = ref;
    }
}

this will cause the function to be available on the service and also on the provider.

Upvotes: 0

Related Questions