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?

Yolanda

Possible duplicate of Async/Await , simple example (typescript) – Ault

Yes I saw that but on my end Promise does not exist? Typescript appears to know nothing about Promise. if I change my method signature to public async GetCustomers(): Promise<Dtos.ICustomer[]>{...} I get an error stating "Cannot find name 'Promise') – Yolanda

Well this certainly does make your question different from the linked one, please edit it to include this information. – Ault

Yes I realised this an have edited it appropriately I think. – Yolanda

Promise is declared in lib.es6.d.ts. Have you set compilerOptions.target to 'es6' in tsconfig.json? – Nannie

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

Salubrious

Answer 2

in your tsconfig.json file, under compilerOptions:

you need to add:

"lib": ["dom", "dom.iterable", "scripthost","es2015.promise", "es2015"]

I use es2015 target, but the lib exists for other targets too. in vscode, you'll have intellisense.

Eu