多客户端Angular（含Ionic）前端视图层是否应复用API响应DTO？

首先明确：别直接复用后端返回的Bill接口给两个客户端用，参照后端DTO的思路，给Angular和Ionic分别做专属的ViewModel才是更合理的选择，不过可以通过共享基础层来减少重复代码。

具体怎么落地？ #

1. 先定义前端统一的接收DTO
   把后端返回的Bill结构封装成一个共享的BillBaseDto，这是前端和后端的契约，所有客户端都用它来接收后端数据：

   export interface BillBaseDto {
     accountNo: string;
     accountId: string;
     accountType: string;
     totalAmountDue: string;
     primary: boolean;
   }
   

2. 为每个客户端创建专属ViewModel
   完全根据各自的视图需求来定义字段，甚至可以加一些视图专属的格式化、计算字段：

   • Angular客户端的ViewModel（比如要展示脱敏账号、格式化金额和主账单标记）：

     export interface BillAngularViewModel {
       accountDisplay: string; // 示例："****1234"
       formattedAmount: string; // 示例："$100.00"
       isPrimary: boolean;
     }
     

   • Ionic客户端的ViewModel（比如要展示账号类型名称和数字类型的金额）：

     export interface BillIonicViewModel {
       accountTypeLabel: string; // 示例：把"CHECKING"转成"活期账户"
       totalAmount: number; // 转成数字方便组件计算
     }
     

3. 做个统一的转换工具
   写个共享的转换类，把BillBaseDto转换成对应客户端的ViewModel，转换逻辑集中维护，不用在每个客户端重复写：

   export class BillConverter {
     static toAngular(dto: BillBaseDto): BillAngularViewModel {
       return {
         accountDisplay: `****${dto.accountNo.slice(-4)}`,
         formattedAmount: `$${parseFloat(dto.totalAmountDue).toFixed(2)}`,
         isPrimary: dto.primary
       };
     }
   
     static toIonic(dto: BillBaseDto): BillIonicViewModel {
       const typeMap = {
         CHECKING: '活期账户',
         SAVINGS: '储蓄账户'
       };
       return {
         accountTypeLabel: typeMap[dto.accountType as keyof typeof typeMap] || dto.accountType,
         totalAmount: parseFloat(dto.totalAmountDue)
       };
     }
   }
   

这么做的好处 #

• 每个客户端的视图层只拿自己需要的数据，不会被冗余字段干扰
• 后端字段变更时，只需要修改BillBaseDto和转换函数，不会直接影响客户端的视图逻辑
• 视图专属的格式化、计算逻辑都放在转换层，组件代码更干净简洁
• 两个客户端的需求各自变化时，改自己的ViewModel就行，互不影响

内容的提问来源于stack exchange，提问作者Mohamed Haitham