如何使用 axios 和 TypeScript 将 JSON 响应解析为 PascalCase 模型？答案

【问题标题】：How parse JSON response with axios and TypeScript to PascalCase model?如何使用 axios 和 TypeScript 将 JSON 响应解析为 PascalCase 模型？
【发布时间】：2020-10-25 02:11:36
【问题描述】：

我有这样的类型：

export type Model = {
  Id: number,
  Name: string
}

以及这样的 JSON 响应：{"id": 0, "name": "User"}。

在 Axios 解析该响应 (const response = await Axios.get<Model>(source)) 后，我得到下一个对象：

Id: undefined Name: undefined id: 0 name: "User"

如何正确解析对 PascalCase 模型类型的响应？

【问题讨论】：

看看this。你在找什么？

标签： json typescript axios

【解决方案1】：

有很多方法可以做到这一点，但无论发生什么，您都需要更改类型，因为它们目前不正确，并且您需要手动转换结果对象。

目前的类型说Axios.get 将返回一个带有Id 和Name 键的模型，这绝对是错误的（它将返回一个带有id 和name 键的模型）。您可以转换此结果，但不能轻易更改那里的第一个返回值，因此您需要更正它。

一旦正确，您需要将 JSON 响应转换为您想要的模型。一种选择是使用lodash，这使这变得相当容易。

一个完整的例子可能如下所示：

export type Model = {
  Id: number,
  Name: string
}

// Get the raw response, with the real type for that response
const response = await Axios.get<{ id: number, name: string }>(source);

// Transform it into a new object, with the type you want
const model: Model = _.mapKeys(response,
  (value, key) => _.upperFirst(key) // Turn camelCase keys into PascalCase
);

还有很多其他方法可以完成最后的转换步骤，这只是一种选择。您可能还想先考虑验证，以检查响应数据是否符合您的预期，如果您的情况有风险的话。

【讨论】：

谢谢！看来，在 TS 中使用 PascalCase 模型是一种不好的方法。
不是 TypeScript 不好，而是你的模型与你的 API 不匹配。 TypeScript 不会为您转换任何内容，因此您必须匹配它们，或者自己进行转换。