异步 TypeScript 函数返回 jQuery 承诺答案

【问题标题】：Async TypeScript function return jQuery promise异步 TypeScript 函数返回 jQuery 承诺
【发布时间】：2016-06-22 18:24:15
【问题描述】：

我正在尝试在 TypeScript 中构建类似 MVC 的控制器，但我很难让我的异步方法返回延迟承诺。

这是我的函数签名：

static async GetMatches(input: string, loc?: LatLng):JQueryPromise<any> {

编译器告诉我“JQueryPromise”不是有效的异步函数返回类型。

我原以为这样的事情将是异步函数最常见的用例，但我找不到任何示例。

有什么帮助吗？

【问题讨论】：

这是否仍然适用于 jQuery 3（据我所知，它应该符合 Promises/A+）？
我不知道我害怕。在这篇文章之后不久，我就停止使用 jQuery。我只是发现用 vanilla js / typescript 编码更容易

标签： javascript typescript async-await jquery-deferred

【解决方案1】：

来自the issue detailing async functions（我没有找到更好的参考）：

异步函数必须提供指向兼容的Promise 类型的返回类型注释。仅当存在全局定义的兼容 Promise 类型时，才能使用返回类型推断。

然后

异步函数需要兼容的 Promise 抽象才能运行适当地。兼容的实现实现以下接口，将被添加到核心库声明中 (lib.d.ts)：
interface IPromiseConstructor<T> {  
    new (init: (resolve: (value: T | IPromise<T>) => void, reject: (reason: any) => void) => void): IPromise<T>;  
}  

interface IPromise<T> {  
    then<TResult>(onfulfilled: (value: T) => TResult | IPromise<TResult>, onrejected: (reason: any) => TResult | IPromise<TResult>): IPromise<TResult>;  
}

jQuery 延迟 - for good reasons - 不在其兼容性列表中。

【讨论】：

【解决方案2】：

JQueryPromise 不满足 async/await 的 Promise 要求，需要实现以下接口：

interface IPromiseConstructor<T> {  
    new (init: (resolve: (value: T | IPromise<T>) => void, reject: (reason: any) => void) => void): IPromise<T>;  
}  

interface IPromise<T> {  
    then<TResult>(onfulfilled: (value: T) => TResult | IPromise<TResult>, onrejected: (reason: any) => TResult | IPromise<TResult>): IPromise<TResult>;  
}

更多详情请参见此处的第 4 节 Promise：link

【讨论】：

【解决方案3】：

要为 jQuery Promise 启用 async/await，请使用以下命令。它可以与来自definitelyTyped 的jquery.d.ts 结合使用。

class JQueryPromise<T> {
    constructor(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
        let dfd = $.Deferred<T>();
        function fulfilled(value?: T | PromiseLike<T>) {
            let promise = <PromiseLike<T>>value;
            if (value && promise.then) {
                promise.then(fulfilled, rejected);
            }
            else {
                dfd.resolve(<T>value);
            }
        }
        function rejected(reason) {
            let promise = <PromiseLike<T>>reason;
            if (reason && promise.then) {
                promise.then(fulfilled, rejected);
            }
            else {
                dfd.reject(<T>reason);
            }
        }
        executor(fulfilled, rejected);
        return dfd.promise();
    }
}

例子：

interface IData {
  value: number;
}

async function getValue(): JQueryPromise<number> {
    let result = <IData> await $.getJSON('/data.json');
    return result.value;
}

【讨论】：