脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → TypeScript数据转换

TypeScript装饰器之项目数据转换详解

 更新时间：2024年10月24日 09:07:06   作者：Hamm  
这篇文章主要为大家详细介绍了TypeScript项目中是如何进行数据转换的,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下

一、 先来看一张图

二、 解释下这张图

上图的原始对象， 是后端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 一样面向对象

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

到此这篇关于TypeScript装饰器之项目数据转换详解的文章就介绍到这了,更多相关TypeScript数据转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论