如何将 fetch API 响应转换为 TypeScript 中的特定类型？

Posted 2023-02-27

【中文标题】如何将 fetch API 响应转换为 TypeScript 中的特定类型？

【英文标题】：How to cast fetch API response to a specific type in TypeScript?

【发布时间】：2019-09-21 10:57:58

【问题描述】：

我正在尝试将 API 调用的响应转换为我的代码中的特定类型 (TypeScript)。但是，我没有成功地将响应转换为我的类型，而只是对象。

我尝试了几种方法，特别是这里描述的：https://www.carlrippon.com/fetch-with-async-await-and-typescript/

类型：

export interface MyType
  id: number;
  name: string;
  date: Date;

获取代码：

export default class api 
  static async get<T>(url: string): Promise<T> 
    return new Promise(resolve => 
      fetch(url)
        .then(response => response.json())
        .then(body => 
          resolve(body);
        );
    );
  

来电者：

const result = await api.get<MyType[]>(
      "my-url-here"
    );

我希望result 是MyType[] 类型，但它是Object[]。 （包含所有字段）

此外，我尝试将 name 字段的类型更改为 number（同时始终保持来自 API 的相同响应，即名称是一些不可转换为数字的字符串）并预计会出现一些类型转换错误，但是没有。 result 仍然使用相同的内容和相同的类型创建： result: Array(3) [Object, Object, Object]

好像根本没有选角。

你能告诉我我哪里错了，并告诉我该怎么做吗？

非常感谢。

【问题讨论】：

在the TS playground 中尝试您的类型时，一切似乎都很好。问题一定出在其他地方。

TypeScript 只是一个编译器。它编译为 javascript，其中类型（除了 JS 类型：布尔、数字、对象等）不再存在。 TypeScript 中没有强制转换。你的代码所做的就是对编译器说：相信我，我的 API 返回的对象将如下所示。在运行时，对象只是 POJO，根本不进行类型检查。

谢谢@JBNizet，这对我来说很清楚！

【参考方案1】：

预计会出现一些类型转换错误，但没有。

TypeScript 不强制转换。它断言。这是一种让您有针对性地告诉编译器在运行时会发生什么的方法。如果它在运行时不是那样，它在你身上。

修复

选项：

更改后端响应，使其与您声明的内容相匹配。 更改断言以匹配后端返回的内容。

更多

TypeScript Assertion