在TypeScript中如何将DTO映射到实体？Vue项目实践疑问

问题背景 #

我在Vue + TypeScript项目中用Axios从后端取数据，定义了如下实体类：

class Annoucement {
    id!: string;
    description?: string;
    deal?: Deal;
    realty?: Realty;
    user?: User; 
}

后端返回的响应结构大致是：

{
  "id": "guid",
  "description": "string",
  "deal": {
     // 具体结构是Sell/Rent等Deal子类
  },
  "realty": {
     // 具体结构是CommercialBuilding/Office等Realty子类
  },
  "user": {
     //...
  }
}

核心问题是deal和realty存在多态子类结构，没法直接简单赋值完成映射（比如annoucement.realty.floor = dto.realty.floor这种写法不适用）。目前想到两种方案：

1. 通过if判断响应属性来确定类型并映射
2. 用不同函数获取对应结构的响应数据
   想知道哪种更优，或者有没有更合适的映射方式。

方案分析与优化建议 #

1. 现有方案的优缺点 #

方案1：if判断属性确定类型

• 优点：逻辑直观，上手快，适合子类数量极少的简单场景。
• 缺点：随着子类增多，判断逻辑会变得臃肿冗余，新增子类时必须修改原有判断代码，违反开闭原则，后期维护成本高。

方案2：不同函数处理对应结构

• 优点：职责单一，每个函数只处理一种子类类型，代码可读性强。
• 缺点：子类数量多的话，会出现大量重复的函数模板；如果后端同一个接口可能返回多种子类类型（动态类型），这种硬编码的函数拆分方式不适用。

2. 更优的映射方案 #

方案A：工厂模式 + 类型守卫

这种方式把类型判断和实体实例化的逻辑封装到工厂类中，符合开闭原则，扩展性更好。

第一步：定义类型守卫函数，用来识别后端返回的DTO所属子类（前提是后端返回的DTO里有明确的类型标识字段，比如type: 'sell'）：

// 先定义子类类型枚举
type DealType = 'sell' | 'rent';
type RealtyType = 'commercial' | 'office';

// 子类定义
class Sell extends Deal {
  type: DealType = 'sell';
  price!: number;
}

class Rent extends Deal {
  type: DealType = 'rent';
  monthlyPrice!: number;
}

// 类型守卫，判断DTO是否为Sell类型
function isSellDeal(dto: unknown): dto is Sell {
  return typeof dto === 'object' && dto !== null && (dto as Sell).type === 'sell';
}

// 同理定义Rent的类型守卫
function isRentDeal(dto: unknown): dto is Rent {
  return typeof dto === 'object' && dto !== null && (dto as Rent).type === 'rent';
}

第二步：创建工厂类，负责根据DTO创建对应的实体实例：

class DealFactory {
  static create(dto: unknown): Deal {
    if (isSellDeal(dto)) {
      const sell = new Sell();
      sell.id = dto.id;
      sell.price = dto.price;
      // 其他属性映射
      return sell;
    }
    if (isRentDeal(dto)) {
      const rent = new Rent();
      rent.id = dto.id;
      rent.monthlyPrice = dto.monthlyPrice;
      // 其他属性映射
      return rent;
    }
    throw new Error('未知的Deal类型');
  }
}

// Realty类同理创建RealtyFactory

第三步：在Axios请求中使用工厂类：

axios.get('/announcements').then(res => {
  const announcement = new Annoucement();
  announcement.id = res.data.id;
  announcement.description = res.data.description;
  announcement.deal = DealFactory.create(res.data.deal);
  announcement.realty = RealtyFactory.create(res.data.realty);
  announcement.user = Object.assign(new User(), res.data.user);
});

新增子类时，只需要添加对应的类型守卫和工厂类中的创建逻辑，原有代码无需修改，扩展性拉满。

方案B：使用类转换工具库（如class-transformer）

如果不想手动写映射逻辑，可以用class-transformer这类工具库，通过装饰器自动处理多态类型的转换，大幅减少重复代码。

第一步：用装饰器标记实体类的多态关系：

import { Type, plainToInstance } from 'class-transformer';

class Deal {
  id!: string;
}

class Sell extends Deal {
  type = 'sell';
  price!: number;
}

class Rent extends Deal {
  type = 'rent';
  monthlyPrice!: number;
}

class Annoucement {
  id!: string;
  description?: string;
  
  // 配置多态转换规则：通过type字段识别子类
  @Type(() => Deal, {
    discriminator: {
      property: 'type',
      subTypes: [
        { value: Sell, name: 'sell' },
        { value: Rent, name: 'rent' }
      ]
    }
  })
  deal?: Deal;
  
  // Realty类同理配置
  user?: User;
}

第二步：在Axios响应中直接转换：

axios.get('/announcements').then(res => {
  const announcement = plainToInstance(Annoucement, res.data);
  // 此时announcement.deal会自动转换成对应的Sell/Rent实例
});

这种方式最简洁，适合实体结构复杂、子类较多的场景，省去了手动映射的繁琐。

总结 #

• 子类数量少、场景简单：可以用if判断或单独函数处理，优先选单独函数保证代码整洁；
• 需要长期扩展、子类较多：优先用工厂模式+类型守卫，保证代码可维护性；
• 追求高效简洁：直接用class-transformer这类工具库，减少重复劳动。

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