处理数据库发送snakcase属性时的typescript错误，并且前台只接受pascalcase

Question

我正在寻找最佳实践做转换时，我的api是发送给我一个蛇的情况下的值，我的前端只接受pascal的情况下的属性。

我的问题是:

<<p>

面前请求/strong>我有一个获得多个用户的axios请求。我们设axios.get('/users')

Api回答

我的api给我一个用户列表:

[{
id: 10
last_name: 'Foo'
first_name: 'Bar'
},{
id: 11
last_name: 'Baz'
first_name: 'Bob'
}]

用户类型

现在我有一个User类型，我的typescript只接受pascal case属性:

type User = {
id: number,
lastName: string,
firstName: string
}

输入我的axios响应

现在我将接收到的用户传递给数组users，但是当我想将lastName与last_name和firstName与first_name关联时发生错误。

let users: User[] = []
const res = await axios.get('/users')
res.data.forEach((user: User) => {
users.push({
id: user.id,
lastName: user.last_name, // Typescript Error
firstName: user.first_name // Typescript Error
})
}
return users

谁有解决这个问题的办法?我需要告诉我的数组，用户收到的api是any类型?什么是最佳实践?

Answer 1

有两种方法:

方法1:从API输入不同的响应

因为您的响应数据有不同的键，所以您不能真正将其键入User。你应该为它设置一个单独的类型。

type UserData = {
id: number,
last_name: string,
first_name: string
}

当然，当您需要更改某些字段的名称时，将使维护工作量加倍，并且更容易出错。然而，它也更灵活。

方法2:在使用响应之前转换响应的字段名

您可以编写一个小实用程序，递归地将字段名从snake_case转换为camelCase。之后，您可以将响应正确地键入为User。我个人使用这种方法，它工作得很好，但是输入代码有点棘手。下面是我通常使用的代码，它可能不是完美的，欢迎大家给出反馈。

import { camelCase } from 'lodash-es';
export type JSONValue =
| string
| number
| boolean
| JSONValue[]
| { [key: string]: JSONValue };
const recursivelyTransformKeys = (obj: JSONValue): JSONValue => {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
if (Array.isArray(obj)) {
return obj.map(recursivelyTransformKeys);
}
const result: JSONValue = {};
Object.entries(obj).forEach(([k, v]) => {
result[camelCase(k)] = recursivelyTransformKeys(v);
});
return result;
};

然后像这样在你的代码中使用它:

const res = await axios.get('/users')
recursivelyTransformKeys(res.data).forEach((user: User) => {
users.push(user);
}

Answer 2

如果你想使用Typescript来解决上面的问题，那么你可以通过以下方式实现它

interface user{
id: number,
lastName: string,
firstName: string
}
interface userResponse{
last_name: string,
first_name: string
}
type User = userResponse | user;
const anExampleVariable: user = {
id: 123,
lastName: "123",
firstName: "12"
}

另一种方法是创建辅助函数，然后循环响应键和用户辅助函数，将键从snack_case转换为pascalCase

下面是Helper函数

function pascalCase(val){
const ary = val.split("_");
return ary[0]+ary[1].charAt(0).toUpperCase()+ary[1].slice(1)
}