带有 async/await 的 typescript 2.1 为 angularjs 生成 ES5/ES3 目标答案

【问题标题】：typescript 2.1 with async/await generating ES5/ES3 target for angularjs带有 async/await 的 typescript 2.1 为 angularjs 生成 ES5/ES3 目标
【发布时间】：2017-04-26 23:11:46
【问题描述】：

我正在尝试在有角度的1.5.5 项目中使用async/await。

鉴于这种服务方式

    getDocumentTypes(): angular.IPromise<DocumentType[]> {
        var url = "api/document/types";
        this.$log.log(url);
        return this.$http.get(url).then(_ => _.data);
    }

我正在尝试创建该方法的async / await 版本。

    async getDocTypes(): angular.IPromise<DocumentType[]> {
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    }}

Intellisense 显示错误：TS1055 类型 'angular.IPromise' 不是 ES5/ES3 中的有效异步函数返回类型，因为它不引用 Promise-compatible 构造函数值。

有没有正确的方法在 typescript 2.1 中使用 angular promise 和 async / await？

【问题讨论】：

角度的类型注释从何而来？可以更新吗？
更新类型也被证明是一个问题。 stackoverflow.com/questions/41216046/…
我已使用npm i @types/angular 成功更新了分型。 2.1 lib.d.ts 中有一个名为PromiseLike<T> 的接口，但不清楚如何使用。

标签： javascript typescript interface promise async-await

【解决方案1】：

你可能只需要直接使用 Promise：

async getDocTypes(): Promise<DocumentType[]> {

}}

typescript 2+ 生成的代码，会落在角度摘要循环之外，组件/指令不会正确更新视图/模型。

【讨论】：

Promise 未定义。
这是 TypeScript 错误还是运行时错误？如果是 TypeScript，您可能需要将 "es2015.promise" 添加到 tsconfig.json 中的 compilerOptions / lib 设置中。
当我最初尝试使用 webpack.js 和 ts-loader 时，这似乎不起作用，它似乎与 Promise<T> 一起使用

【解决方案2】：

async / await 可以在 angularjs 1.5 中工作

如果 $q 调度程序是 swapped out 和 Bluebird 承诺。
通过将以下内容添加到app.ts

export class Module {
    app: ng.IModule;

    constructor(name: string, modules: Array<string>) {
        this.app = module(name, modules);
    }
}

function trackDigests(app) {
    app.run(["$rootScope",$rootScope => {
        Promise.setScheduler(cb => {
            $rootScope.$evalAsync(cb);
        });
    }]);
}

export var app: ng.IModule = new Module("app", []).app;
trackDigests(app);

常规的$q 调度程序被换掉。这样的代码开箱即用！

async $onInit() {
    this.start();
    try {
        var key = await this.powerService.getKey(this._apiKey.partyAccountNumber);
        var sites = await this.powerService.loadSites(this._apiKey.partyAccountNumber);
        await this.showSummary(sites);
        this.stop(true);
    } catch (error) {
        this.$log.error(error);
        this.stop(false);
    }
}

您可以从服务方法中返回 Promise 或 ng.IPromse，因为它们是可互换的。

export interface IPowerService {
    setKey(key: pa.PowerApi): ng.IPromise<dm.ClientSite[]>;
    getKey(partyAccountNumber: string): Promise<pa.PowerApi>;
}

通过在测试工具中使用上述trackDigests，单元测试也可以使用async / await 在我的例子中，我将以下内容添加到我的 webpack.test.js 以使 async/await 能够以与 karma 测试相同的方式运行。

plugins: [
    new webpack.ProvidePlugin({
        Promise: 'bluebird'
    })
],

【讨论】：

【解决方案3】：

免责声明：此答案在 2018 年适用于 TS 3.2.2。我不确定它们在 2.1 中是否相似。

目前有一些编译器选项允许将库添加到编译中。要使用 async/await，您有以下选择：

命令行：--target ES6 --lib es2015.generator。

配置文件：


{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2015.generator"]
        ...
   }
   ...
}

【讨论】：