charcoalhobo charcoalhobo - 1 month ago 14
TypeScript Question

Returning an AngularJS $q promise with TypeScript

I have a service that wraps $http with my functions returning a deferred object.

My interface:

export interface MyServiceScope {
get: ng.IPromise<{}>;
}


My class:

export class MyService implements MyServiceScope {

static $inject = ['$http', '$log'];

constructor(private $http: ng.IHttpService,
private $log: ng.ILogService,
private $q: ng.IQService) {
this.$http = $http;
this.$log = $log;
this.$q = $q;
}

get(): ng.IPromise<{}> {
var self = this;
var deferred = this.$q.defer();

this.$http.get('http://localhost:8000/tags').then(
function(response) {
deferred.resolve(response.data);
},
function(errors) {
self.$log.debug(errors);
deferred.reject(errors.data);
}
);

return deferred.promise;
}
}


The compilation is failing with the following error:

myservice.ts(10,18): error TS2420: Class 'MyService' incorrectly implements interface 'MyServiceScope'.
Types of property 'get' are incompatible.
Type '() => IPromise<{}>' is not assignable to type 'IPromise<{}>'.
Property 'then' is missing in type '() => IPromise<{}>'.


For reference, here is the IPromise definition from DefinitelyTyped. The
IQService.defer()
call returns an
IDeferred
object, and then
deferred.promise
returns IPromise object.

I'm not sure if I'm using the wrong definitions in my interface, or not returning the deferred object the same way. Any input would be greatly appreciated!

Answer

In your interface you defined a property get and in the service implementation it's a function get(). What you probably want is a function, so the interface should be:

export interface MyServiceScope {
    get(): ng.IPromise<{}>;
}