如何将API模型映射到符合Angular命名规范的前端模型？

后端API响应采用下划线命名（snake_case），不符合Angular/TypeScript的小驼峰（camelCase）命名规范，我们可以通过以下步骤完成前端模型定义与字段映射：

1. 创建符合规范的前端模型 #

基于后端Schema，将所有下划线命名转换为小驼峰，同时定义嵌套对象的模型：

// movie.model.ts
export interface ProductionCompany {
  id: number;
  logoPath?: string;
  name: string;
  originCountry: string;
}

export interface ProductionCountry {
  iso31661: string;
  name: string;
}

export interface SpokenLanguage {
  englishName: string;
  iso6391: string;
  name: string;
}

export interface Movie {
  backdropPath?: string;
  belongsToCollection?: any;
  id: number;
  imdbId: string;
  originalLanguage: string;
  originalTitle: string;
  posterPath?: string;
  productionCompanies: ProductionCompany[];
  productionCountries: ProductionCountry[];
  releaseDate: Date;
  spokenLanguages: SpokenLanguage[];
  video: boolean;
  voteAverage: number;
  voteCount: number;
}

2. 实现后端响应到前端模型的映射 #

根据场景不同，有三种常用的映射方式：

方式1：手动映射（适合简单场景） #

在API请求的回调中直接转换字段，适合单次使用或结构简单的响应：

// movie.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Movie, ProductionCompany, ProductionCountry, SpokenLanguage } from './movie.model';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class MovieService {
  constructor(private http: HttpClient) {}

  getMovie(id: number) {
    return this.http.get<any>(`https://api.example.com/movies/${id}`).pipe(
      map(response => {
        // 转换嵌套数组
        const productionCompanies = response.production_companies.map((pc: any): ProductionCompany => ({
          id: pc.id,
          logoPath: pc.logo_path,
          name: pc.name,
          originCountry: pc.origin_country
        }));

        const productionCountries = response.production_countries.map((pc: any): ProductionCountry => ({
          iso31661: pc.iso_3166_1,
          name: pc.name
        }));

        const spokenLanguages = response.spoken_languages.map((sl: any): SpokenLanguage => ({
          englishName: sl.english_name,
          iso6391: sl.iso_639_1,
          name: sl.name
        }));

        // 转换主对象
        return {
          backdropPath: response.backdrop_path,
          belongsToCollection: response.belongs_to_collection,
          id: response.id,
          imdbId: response.imdb_id,
          originalLanguage: response.original_language,
          originalTitle: response.original_title,
          posterPath: response.poster_path,
          productionCompanies,
          productionCountries,
          releaseDate: new Date(response.release_date),
          spokenLanguages,
          video: response.video,
          voteAverage: response.vote_average,
          voteCount: response.vote_count
        } as Movie;
      })
    );
  }
}

方式2：封装映射工具函数（适合复用场景） #

将转换逻辑抽离成单独的工具函数，方便在多个服务/组件中复用：

// movie.mapper.ts
import { Movie, ProductionCompany, ProductionCountry, SpokenLanguage } from './movie.model';

export function mapMovieResponse(response: any): Movie {
  return {
    backdropPath: response.backdrop_path,
    belongsToCollection: response.belongs_to_collection,
    id: response.id,
    imdbId: response.imdb_id,
    originalLanguage: response.original_language,
    originalTitle: response.original_title,
    posterPath: response.poster_path,
    productionCompanies: mapProductionCompanies(response.production_companies),
    productionCountries: mapProductionCountries(response.production_countries),
    releaseDate: new Date(response.release_date),
    spokenLanguages: mapSpokenLanguages(response.spoken_languages),
    video: response.video,
    voteAverage: response.vote_average,
    voteCount: response.vote_count
  };
}

// 嵌套对象的映射函数
function mapProductionCompanies(companies: any[]): ProductionCompany[] {
  return companies.map(pc => ({
    id: pc.id,
    logoPath: pc.logo_path,
    name: pc.name,
    originCountry: pc.origin_country
  }));
}

function mapProductionCountries(countries: any[]): ProductionCountry[] {
  return countries.map(pc => ({
    iso31661: pc.iso_3166_1,
    name: pc.name
  }));
}

function mapSpokenLanguages(languages: any[]): SpokenLanguage[] {
  return languages.map(sl => ({
    englishName: sl.english_name,
    iso6391: sl.iso_639_1,
    name: sl.name
  }));
}

在服务中调用工具函数：

// movie.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Movie } from './movie.model';
import { map } from 'rxjs/operators';
import { mapMovieResponse } from './movie.mapper';

@Injectable({ providedIn: 'root' })
export class MovieService {
  constructor(private http: HttpClient) {}

  getMovie(id: number) {
    return this.http.get<any>(`https://api.example.com/movies/${id}`).pipe(
      map(response => mapMovieResponse(response))
    );
  }
}

方式3：使用Class构造函数（适合需要实例方法的场景） #

如果模型需要包含业务方法，可以用Class替代Interface，在构造函数中完成字段转换：

// movie.model.ts
export class ProductionCompany {
  id: number;
  logoPath?: string;
  name: string;
  originCountry: string;

  constructor(data: any) {
    this.id = data.id;
    this.logoPath = data.logo_path;
    this.name = data.name;
    this.originCountry = data.origin_country;
  }
}

export class ProductionCountry {
  iso31661: string;
  name: string;

  constructor(data: any) {
    this.iso31661 = data.iso_3166_1;
    this.name = data.name;
  }
}

export class SpokenLanguage {
  englishName: string;
  iso6391: string;
  name: string;

  constructor(data: any) {
    this.englishName = data.english_name;
    this.iso6391 = data.iso_639_1;
    this.name = data.name;
  }
}

export class Movie {
  backdropPath?: string;
  belongsToCollection?: any;
  id: number;
  imdbId: string;
  originalLanguage: string;
  originalTitle: string;
  posterPath?: string;
  productionCompanies: ProductionCompany[];
  productionCountries: ProductionCountry[];
  releaseDate: Date;
  spokenLanguages: SpokenLanguage[];
  video: boolean;
  voteAverage: number;
  voteCount: number;

  constructor(data: any) {
    this.backdropPath = data.backdrop_path;
    this.belongsToCollection = data.belongs_to_collection;
    this.id = data.id;
    this.imdbId = data.imdb_id;
    this.originalLanguage = data.original_language;
    this.originalTitle = data.original_title;
    this.posterPath = data.poster_path;
    this.productionCompanies = data.production_companies.map((pc: any) => new ProductionCompany(pc));
    this.productionCountries = data.production_countries.map((pc: any) => new ProductionCountry(pc));
    this.releaseDate = new Date(data.release_date);
    this.spokenLanguages = data.spoken_languages.map((sl: any) => new SpokenLanguage(sl));
    this.video = data.video;
    this.voteAverage = data.vote_average;
    this.voteCount = data.vote_count;
  }

  // 可以添加实例方法，比如格式化发布日期
  getFormattedReleaseDate(): string {
    return this.releaseDate.toLocaleDateString();
  }
}

在服务中创建Class实例：

// movie.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Movie } from './movie.model';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class MovieService {
  constructor(private http: HttpClient) {}

  getMovie(id: number) {
    return this.http.get<any>(`https://api.example.com/movies/${id}`).pipe(
      map(response => new Movie(response))
    );
  }
}

内容的提问来源于stack exchange，提问作者Imtiaz Mehedi