当db发送snakecase属性时处理类型记录错误，而前台只接受密码

Question

当我的api向我发送一个蛇形案例值，而我的前端只接受pascal案例属性时，我正在寻找进行转换的最佳实践。

我的问题是：

前线请求

我有一个axios请求，它可以获得多个用户。比方说axios.get('/users')

Api回答

我的api给出了一个用户列表：

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

类型记录用户输入

现在我有了一个用户类型，并且我的类型记录只接受pascal案例属性：

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

如果您想要使用类型记录来解决上述情况，那么可以按照下面的方法来实现。

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)
}