Question

我们目前正在进行从AngularJS到Angular的大规模升级。我们遇到了一个问题，我无法找到解决问题的最佳解决方案。

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

问题是来自后端的所有数据都与snake_case一起使用。

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

我们正在使用lodash这样做，但有更好的方法吗？有没有办法使用Typescript本机实现转换这些东西？

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 “ calmelCase” 比“ snake_case” 读起来更困难。

尝试将应用程序应用于您的项目。

Answer 2

看看cerialize，我解决了您描述的问题。

Answer 3

可以将您的界面设置为后端返回的内容。

Answer 4

不确定这是否有帮助。我做了一些实验，模拟了我正在使用的遗留数据库中字段的命名约定，并找到了以下内容（通过示例演示）：

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，但认为这可能是有帮助的。

角度/打字稿在接口中从蛇案例转换为驼峰案例

4 个答案: