Angular/Typescript：在接口中将下划线式命名转换为驼峰式命名

Question

我们目前正在将AngularJS升级为Angular。 我们遇到了一个问题，即无法找到最佳解决方案以解决它。

根据Angular / TypeScript代码标准，我们应该使用camelCase来定义所有变量，属性名称和接口。

问题是所有来自后端的数据都是snake_case格式。

因此，在每个请求之后，为了创建相应的接口，我们需要将键转换为camelCase，然后在传递数据时，我们需要将其转换回snake_case。

我们使用lodash来完成此操作，但有没有更好的方法？ 是否有一种使用TypeScript本地实现来转换这些内容的方法？

- doron

---

将接口定义与来自服务器的格式保持一致。 - toskv

你是否能够控制后端使用的序列化器？也许可以进行配置（当我使用.NET Web API时，我会这样做，以控制如何将C#对象序列化为JSON）。 - Frank Modica

你最终解决了这个问题吗？我现在也处于同样的困境。我的响应是以snake_case形式呈现的，但我需要使用camelCase在angular中进行操作。我尝试添加接口，但没有任何作用。 - blueprintchris

很遗憾，我们最终不得不将API重写为驼峰式。 - doron

有人找到了解决这个问题的方法吗？ - Abhishek S Jain

Answer 1

问题和我的一样。但是我创建了通用的工具并解决了以下问题，

步骤1：创建一个函数 toCamel & keysToCamel。

toCamel(s: string) {
    return s.replace(/([-_][a-z])/ig, ($1) => {
        return $1.toUpperCase()
            .replace('-', '')
            .replace('_', '');
    });
}

keysToCamel(o: any) {
    if (o === Object(o) && !Array.isArray(o) && typeof o !== 'function') {
        const n = {};
        Object.keys(o)
            .forEach((k) => {
                n[this.toCamel(k)] = this.keysToCamel(o[k]);
            });
        return n;
    } else if (Array.isArray(o)) {
        return o.map((i) => {
            return this.keysToCamel(i);
        });
    }
    return o;
}

步骤2：当后端返回JSON数据时。

示例：

JSON（从后端返回的响应）

{"user_id":"2014","full_name":"bamossza","token":"jwt","lang_id":"TH"}

接口

export interface Profile {
    userId: number;
    fullName: string;
    token: string;
    langId: string;
}

转换并映射到接口

this.profileService.callProfile(s.token)
    .subscribe((response: Profile) => {
        const profile = this.commonUtil.keysToCamel(response) as Profile;
        console.log(profile.fullName); // bamossza
        console.log(profile.langId); // TH
        ...
    });

为我工作。

Q: 为什么你不在后端进行转换？

A: 因为我觉得 JSON 中的"camelCase"比"snake_case"难以阅读。

尝试将此应用于您的项目中。

- bamossza

---

对于新版本的TypeScript：keysToCamel(o: any): any { if (o === Object(o) && !Array.isArray(o) && typeof o !== 'function') { const n: {[key: string]: any} = {}; Object.keys(o).forEach((k) => { n[this.toCamel(k)] = this.keysToCamel(o[k]); }); return n; } else if (Array.isArray(o)) { return o.map((i) => { return this.keysToCamel(i); }); } return o; }该代码用于将对象中的所有键转换为驼峰式命名。如果传入参数是一个对象，则递归地遍历其所有属性并转换每个键，然后返回转换后的新对象。如果传入参数是一个数组，则递归地遍历其所有元素并对每个元素调用 keysToCamel 方法，然后返回转换后的新数组。如果传入参数既不是数组也不是对象，则直接返回该参数。 - ricktg

为什么我们不使用一些@注释，自动将camelCase转换为snake_case呢？ - busuu

Answer 2

不确定这是否有帮助。我进行了一些实验，模拟了我正在使用的旧数据库字段命名约定，并发现以下内容（以示例演示）：

C# 中的模型...

public class WeatherForecast
        {
            public string DATE_FORMATTED { get; set; }
            public int TEMPERATURE_C { get; set; }
            public string SUMMARY { get; set; }

            public int TEMPERATURE_F
            {
                get
                {
                    return 32 + (int)(this.TEMPERATURE_C / 0.5556);
                }
            }
        }

...在TypeScript中将映射到接口：

 interface WeatherForecast {
        datE_FORMATTED: string;
        temperaturE_C: number;
        temperaturE_F: number;
        summary: string;
    }

当我使用这个看起来很疯狂的约定时，我可以很好地获取数据。

注意：尚未测试PATCH/POST，但认为这可能会有所帮助。

- vanohrmer

---

/r/lostredditors 编辑：这是SO，不是Reddit。真是讽刺。 - refaelio