基于装饰器-我是这么处理TypeScript项目数据转换的

一、 先来看一张图

image.png

二、 解释下这张图

上图的原始对象, 是后端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 {
  @ToJson((user: UserEntity) => parseInt(user.phoneNumber))
  @Type(String)
  @IgnorePrefix() phoneNumber!: string


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

  @ToJson((user:UserEntity) => user.money.toString())
  @Default(0)
  @Type(Number) money!: number


  @Type(RoleEntity) role!: RoleEntity

  @Type(RoleEntity)
  @Default([])
  @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 一样面向对象

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MY5hXcM9' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片