typescript not recognizing the interface on angularjs providers $get method

Question

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");
...
}

score 0 · Answer 1 · answered Sep 27 '17 at 20:04

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.

I figured I'd try this out too, but was unsure since it emits a bit different code than what was originally written in plain JS. I checked out some other guides on internet and they were done the way I had it, but I guess this is how it's supposed to be now? — Meshko, Sep 28 '17 at 17:57
yup, this is how it is supposed to work, you could also instead simply use the provider like: `refs.$get().get("$stateProvider");` but that seems wrong to me... — Nachshon Schwartz, Sep 28 '17 at 18:43

typescript not recognizing the interface on angularjs providers $get method

1 Answers1