如何将响应 json 与 TypeScript 接口 Angular6 对齐

Question

我正在从后端端点检索已上传文件的列表，该端点以下列格式返回：

[
    {
        "filename": "setup.cfg",
        "id": 1,
        "path": C:\\back-end\\uploads\\setup.cfg",
        "uploaded_at": "Fri, 01 Jun 2018 09:25:19 -0000"
    },
    {
        "filename": "57760713_1467275948.jpg",
        "id": 2,
        "path": "C:\\back-end\\uploads\\57760713_1467275948.jpg",
        "uploaded_at": "Mon, 04 Jun 2018 09:09:59 -0000"
    },

    .
    .
    .

]

并且我有以下 TypeScript 界面可以与它们对齐：

export interface UploadModel {
    id: number;
    name: string;
    path: string;
    uploadedAt: Date;
}

如您所见，检索到的数据使用snake_case命名约定为uploaded_at，而接口使用camelCase约定为uploadedAt。

我想用下面的sn-p从后端获取数据：

  getUploads(): Observable<UploadModel[]> {
    this.http.get(UPLOADS_ENDPOINT)
     .map((response: Response) => {

         // parse the json response here, and return an array of UploadModels

     });
  }

是否有任何巧妙的方法来映射这两种表示，而不通过 JSON 对象数组进行映射？

Answer 1

不，没有。

我建议您应对您的回复，但您似乎不想这样做。

因此，您有三个解决方案：

1. 创建两个接口：IUploadResponse 和 IUpload（model 是多余的）。实例化这些接口的对象将在构造函数中进行显式映射，

2. 创建一个具有转换方法的抽象类：再次，显式映射，

3. 创建一个snake_case 到camelCase 转换器，它创建一个从snake 到camel 的普通对象。优点是可以重复使用，缺点是不能将filename 更改为name。此外，它本身不会创建对象，因此您将无权访问typeof 或instanceof。

Answer 2

您可以编写一个通用函数，将所有键从下划线转换为驼峰式。这是一个相当粗糙的版本 - 如果您需要修复嵌套对象，您可以使其更加优雅甚至递归。

const data = [
  {
    "filename": "setup.cfg",
    "id": 1,
    "path": "C:\\back-end\\uploads\\setup.cfg",
    "uploaded_at": "Fri, 01 Jun 2018 09:25:19 -0000"
  },
  {
    "filename": "57760713_1467275948.jpg",
    "id": 2,
    "path": "C:\\back-end\\uploads\\57760713_1467275948.jpg",
    "uploaded_at": "Mon, 04 Jun 2018 09:09:59 -0000"
  }
];

function underscoreToCamel(key: string) {
  return key.replace(/_([a-z])/g, function (g) { return g[1].toUpperCase(); });
}

function convertKeys(input: any[]) {
  const output = [];
  for (const item of input) {
    const obj = {};
    for (const key in item) {
      obj[underscoreToCamel(key)] = item[key];
    }
    output.push(obj);
  }
  return output;
}

const result = convertKeys(data);
console.log(result);

输出：

[
    {
        "filename":"setup.cfg",
        "id":1,
        "path":"C:\\back-end\\uploads\\setup.cfg",
        "uploadedAt":"Fri, 01 Jun 2018 09:25:19 -0000"
    },
    {
        "filename":"57760713_1467275948.jpg",
        "id":2,
        "path":"C:\\back-end\\uploads\\57760713_1467275948.jpg",
        "uploadedAt":"Mon, 04 Jun 2018 09:09:59 -0000"
    }
 ]