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

原创
2023/06/27 11:00
阅读数 242

一、 先来看一张图

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 {
  @Type(String)
  @IgnorePrefix() phoneNumber!: string

  @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 {
  @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 一样面向对象

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部