How to implement Typescript async await pattern: Where is the Promise

Question

I'm learning angular and Typescript.

I have a CustomerService an in this service I Have a method which I wish to return an array of customers from a RESTfull service.

Initially I created my GetCustomers function thus:

public GetCustomers(): Dtos.ICustomer[] {

        var _customers: Dtos.ICustomer[];
        this._httpService.get('http://localhost/myTestApi/api/customers/')
            .success(function (data) {

                _customers = data as Dtos.ICustomer[];
            }).error(function (error) {
                console.log(error);
            });
        return _customers;
    }

This function eventually gets the customers but obviously it will return _customers before the httpservice actually gets the data.

At this point I thought I could make use of Typscript async/await and this is when I end in a mess.

I wanted to write my function like this:

public async GetCustomers(): Dtos.ICustomer[] {

        var _customers: Dtos.ICustomer[];
        await this._httpService.get('http://localhost/myTestApi/api/customers/')
            .success(function (data) {

                _customers = data as Dtos.ICustomer[];
            }).error(function (error) {
                console.log(error);
            });
        return _customers;
    }

I immediately get this error: Error TS1055 Type 'Dtos.ICustomer[]' is not a valid async function return type.

I found this Async/Await , simple example (typescript)

however it uses an Promise object: return new Promise

If I attempt to re-write my GetCustomers method signature thus:

public async GetCustomers(): Promise<Dtos.ICustomer[]> {}

I get and error:

Cannot find name 'Promise'

Do I need to import something to get a Promise?

Answer 1

I would reccomend looking at the Angular $q Promise Object: https://docs.angularjs.org/api/ng/service/$q

It handles what you need for the promise.

public getCustomers(): ng.IPromise<Dtos.ICustomer[]> {
        var lDefer: ng.IDeferred<Dtos.ICustomer[]> =
            this.$q.defer<Dtos.ICustomer[]>();

        this._httpService.get('http://localhost/myTestApi/api/customers/')
            .then(( inResult: any ) => {
                let lResultList: Dtos.ICustomer[] = inResult.data;
                lDefer.resolve( lResultList );
            },
            ( inError: any ) => {
                lDefer.reject( inError );
            });

        return lDefer.promise;
    }

Make sure to inject the $q object in your controller:

import IPromise = angular.IPromise;
import IDeferred = angular.IDeferred;

static $inject = ['$q', ...];

constructor( protected $q:angular.IQService, ... ) {
    super( $q );
}

P.S. - There is a typing file available from Definitely Typed: http://definitelytyped.org/

You can install 'q' Typescript definition via tsd (Now Deprecated) or typings