node.js - NPM 更新后 Aurelia Fetch 使用中断

Question

我最近做了一个 npm update在我的 Aurelia CLI 项目上使用 Visual Studio 2015 中的 TypeScript。我正在使用 aurelia-fetch-client用于调用我的 Web API (.NET Core) 后端。

这是之前编译和运行良好的代码示例:

import { autoinject } from "aurelia-framework";
import { HttpClient, json } from "aurelia-fetch-client";
import { SupportedCultureInfo } from "../../model/Resources/SupportedCultureInfo";

@autoinject()
export class ResourceService {
    constructor(private http: HttpClient) {
    }

    getSupportedCultures(): Promise<SupportedCultureInfo[]> {
        return this.http.fetch("resource/cultures").then(response => response.json());
    }
}

Visual Studio 和 ReSharper 都没有在代码编辑器 UI 中提供任何这将无法编译的指示，但是在最近的更新之后，我的构建现在因此错误而中断:

TS2322: Type 'Promise<Response>' is not assignable to type 'Promise<SupportedCultureInfo[]>'

到目前为止我发现的唯一解决方法是返回 Promise<any>反而。不过，我在这里真正想做的是返回从 JSON 结果映射的类，并将该方法的返回类型也设置为强类型 Promise。

有谁知道最近发生了什么变化可能导致这种情况？这非常令人沮丧。

更新:

这是我能够开始工作的代码:

import { autoinject } from "aurelia-framework";
import { HttpClient, json } from "aurelia-fetch-client";
import { SupportedCultureInfo } from "../../model/resources/SupportedCultureInfo";

@autoinject()
export class ResourceService {
    constructor(private http: HttpClient) {
    }

    getSupportedCultures(): Promise<SupportedCultureInfo[]> {
        return this.http.fetch("resource/cultures")
            .then(response => response.json())
            .then<SupportedCultureInfo[]>((data: any) => {
                const result = new Array<SupportedCultureInfo>();
                for (let i of data) {
                    const info = new SupportedCultureInfo();
                    info.cultureCode = i.cultureCode;
                    info.name = i.name;
                    info.isCurrentCulture = i.isCurrentCulture;
                    result.push(info);
                }

                return result;
            });
    }
}

我必须做两件不是很明显的事情:

1. 使用 then() 的通用重载来指定我要使用的返回类型
2. 明确声明any在第二个回调中输入 JSON 参数，否则 gulp 转译器认为它仍然是 Response。

Answer 1

更新:

我不小心按了 Enter 导致评论未完成发布。我无法编辑评论，因此根据更新的问题更新我的答案。

链接回调: 如果 API resource/cultures将响应返回为 SupportedCultureInfo[]和 getSupportedCultures()只需要按原样返回响应，就不需要第二次回调了。我之前发布的答案就足够了。

我猜这两种情况中的任何一种(或出于其他原因)很可能需要第二次回调

1. API 返回一个必须映射到 SupportedCultureInfo[] 的不同类型
2. API 响应需要进一步处理才能从 getSupportedCultures() 发回

如果您需要第二个回调来进一步处理响应，那么您应该调用通用的 then<TResult>阅读响应时的方法 json而不是在回调链的后面部分。

报告错误的原因: 在更新的代码中，gulp transpiler 处理 data 的原因作为 Response 的类型是因为非通用 then(response => response.json())正在使用返回 Promise<Response> .

改为使用 then<SupportedCultureInfo[]>(response => response.json())这将返回 Promise<SupportedCultureInfo[]>或 then<any>(response => response.json())这将返回 Promise<any> .

使用 then<SupportedCultureInfo[]>(response => response.json())或 then<any>(response => response.json())会给你 data在第二次回调中为 SupportedCultureInfo[]或 any分别。

getSupportedCultures(): Promise<SupportedCultureInfo[]> {
    return this.http.fetch("resource/cultures")
        .then<SupportedCultureInfo[]>(response => response.json())
        .then(data => {
                  // data will be of type SupportedCultureInfo[]
              });
}

作为 then<TResult> 的方法签名完好无损，它应该给出一个强类型 data变量。

解决方案

对 typescript 的更改暗示我们指定 return type 作为 then<TResult> 的类型参数回调如下所示。

getSupportedCultures(): Promise<SupportedCultureInfo[]> {
    return this.http.fetch("resource/cultures").then<SupportedCultureInfo[]>(response => response.json());
}

详情:

我在执行 npm update 时遇到了同样的情况.虽然我最初的想法是罪魁祸首aurelia-fetch-client同样，我深入研究了源代码以解决此问题。但是，在我的探索中，我发现 typescript才是真正的罪魁祸首。

interface Promise<T>回调处理返回类型的方式发生了一些变化。现在，所需的 return type需要作为类型参数传入TResult在 then<TResult>回调。