TypeScript装饰器实现后端数据到前端对象的自动转换

作者：小满时间：2026-10-31 16:18:38浏览：456

本文详解如何利用TypeScript装饰器解决后端API返回JSON数据与前端对象之间的转换难题。针对字段命名混乱、类型不匹配、布尔值处理及默认值缺失等常见痛点，通过BaseEntity、UserEntity等实体类定义，结合@Alias、@Type、@Default等自定义装饰器，实现优雅的数据清洗与类型强制转换，提升前端代码的可维护性与健壮性。

一、先来看一张图

二、解释下这张图

上图展示的原始对象源自后端API接口返回的JSON数据，其中存在以下若干问题：

接口字段的命名规范不统一，驼峰命名法与下划线命名法混杂出现。
部分字段名称不符合前端需求，例如后端返回 description，而前端期望使用 remark 作为对应属性。
后端承诺返回 数组 类型的数据，实际却返回了 null。
后端要求将布尔型数据以 1=true 表示真，以 0=false 表示假。
后端提供了错误的数据类型，例如 money 字段应当为数字类型。
后端没有 布尔型 数据必须 is 开头的规范，但前端有, 比如 isDisabled
后端可能随时调整字段命名习惯，例如将 phoneNumber 修改为 user_phone。

三、解决方案

1. BaseEntity

export class BaseEntity extends AirModel {
  @Type(Number) id!: number

  name!: string

  @Default('暂无备注')
  @Alias('desc') remark!: string
}

2. UserEntity

@FieldPrefix('user_')
export class UserEntity extends BaseEntity {
  @Type(String)
  @IgnorePrefix() phoneNumber!: string

  @ToJson((user: UserEntity) => (user.isDisabled ? 1 : 0))
  @Type(Boolean)
  @Alias('disabled')
  @Default(false) isDisabled!: boolean

  @Default(0)
  @Type(Number) money!: number

  @Type(RoleEntity) role!: RoleEntity

  @Type(RoleEntity)
  @IsArray() roleList!: RoleEntity[]
}

3. RoleEntity

@FieldPrefix('role_')
export class RoleEntity extends BaseEntity {
  @ToJson((role: RoleEntity) => (role.isAdmin ? 1 : 0))
  @Default(false)
  @Type(Boolean)
  @Alias('admin') isAdmin!: boolean
}

四、上面的装饰器介绍

// 为类标记全局字段前缀
@FieldPrefix('')

// 实体转换到JSON时候的自定义方法
@ToJson((role: RoleEntity) => (role.isAdmin ? 1 : 0))

// 为字段设置默认值
@Default(false)

// 为字段强制指定类型
@Type(Boolean)

// 为字段标记一个别名 就是后端的名字
@Alias('admin')

// 标记某个属性不受类全局字段前缀的影响
@IgnorePrefix()

// 标记某个数据是数组
@IsArray()