TypeScript装饰器之项目数据转换详解
作者：Hamm
这篇文章主要为大家详细介绍了TypeScript项目中是如何进行数据转换的,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
一、 先来看一张图
二、 解释下这张图
上图的原始对象， 是后端API接口返回的JSON数据， 其中有以下的一些问题：
- 接口字段命名方式乱七八糟 驼峰下划线都有
- 有的名称不是我们想要的 比如
description前端想用remark来替代 - 承诺是
数组的数据返回了null - 后端要求布尔型
1=true0=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 一样面向对象
当然， 不是所有的前端都会习惯这些写法， 就这样吧。
到此这篇关于TypeScript装饰器之项目数据转换详解的文章就介绍到这了,更多相关TypeScript数据转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！