如何使用 axios 和 TypeScript 解析 JSON 响应到 PascalCase 模型?

Question

我有这样的类型：

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 模型类型的响应？

<小时 />

'

Answer 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
);

不过，还有很多其他方法可以完成最后的转换步骤，这只是一种选择。您可能还需要首先考虑验证，以检查响应数据是否是您期望的形状，如果这在您的案例中存在风险。