угловой наблюдаемый http ответ карты вызова на интерфейс

Question

У меня есть функция, которая вызывает API отдыха, как это:

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IProduct[]>(url);
  }

Ответ от службы выглядит следующим образом:

[
  {
    "ProductId": 1,
    "CategoryType": "XC",
    "Name": "Prod A"
  },
  {
    "ProductId": 2,
    "CategoryType": "XY",
    "Name": "Prod B"
  },
]

Моя модель выглядит так:

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

Есть ли способ легко отобразить ответ на мою модель?Должен ли я использовать функцию карты?Я знаю, что могу изменить модель для соответствия ответу, но я бы предпочел втиснуть ответ в мою модель (пример упрощен).

Answer 1

Самое простое решение - использовать интерфейс, который имеет форму фактических данных с сервера. Меньше головной боли, нет картирования, меньше обслуживания.

Даже если вы хотите выполнить какое-либо сопоставление, было бы неплохо иметь интерфейс для объекта сервера, поэтому сопоставление можно выполнить безопасно:

interface IServerProduct {
    "ProductId": number;
    "CategoryType": string;
    "Name": string;
}

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IServerProduct[]>(url).pipe(
        map(o => o.map((sp): IProduct => ({ // IProduct specified here ensures we get excess property checks
            id: sp.ProductId + '', // number in server interface, map to string 
            name: sp.Name,
            type: sp.CategoryType,
            typeMisaken: sp.CategoryType, // error here
        })))
    );
}

Answer 2

Ваш интерфейс должен выглядеть следующим образом: если вы не хотите вносить какие-либо изменения в код, вы можете проверить его здесь json2ts

declare module namespace {
    export interface IProduct {
        ProductId: number;
        CategoryType: string;
        Name: string;
    }
}

в противном случае вы можете использовать функцию array.map и сгенерировать свой массив самостоятельно.