一、 先来看一张图

二、 解释下这张图

上图的原始对象， 是后端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()

五、 再说两句

TypeScript & Vue3 写前端， 也可以很优雅的像 Java 一样面向对象

当然， 不是所有的前端都会习惯这些写法， 就这样吧。