CODEWITHSUNDEEP
javascriptangularjsasynchronoustypescript1.7
John
John

Reputation: 1764

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

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?

Upvotes: 7

Views: 3508

Answers (2)

kobi7
kobi7

Reputation: 961

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.

Upvotes: 0

CDoug
CDoug

Reputation: 76

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

Upvotes: 2

Related Questions