关于javascript:适合ts项目的api接口数据适配器typejsonmapper

背景

一个前端我的项目稳固运行一段时间当前。

忽然有一天，后盾同学找到你，通知你 <font color=violet> 原先的 Student.name 要改成 Student.fullName</font>，你解体了，一遍遍去查代码，查找 Student.name，一遍遍测试，确保批改不会有问题。

终于，你胜利把 Student.name 都改成了 Student.fullName。

然而，没过几天，某个始终失常的性能忽然不能应用了，你开始调试，发现 <font color=violet> 原先整数类型的 age 忽然变成字符串类型了 </font>，你找到后盾，后盾同学来了一句 <font color=blue>“前端不做测验吗？”</font>，你心态再一次解体了 …

思考

<font color=violet> 下次会改什么字段，下次哪个字段会出问题（{{{瑟瑟发抖}}}）</font>

“ 有什么方法能够一劳永逸地解决这个问题呢？
有点 oop 编程语言根底的，马上就会想到，这不就是加个 <font color=red>adapter</font> 的事吗？很多语言都内置 adaapter，可是 ts 没有呀，那咋整？

算了，罗唆本人造个轮子

解决方案

<font color=violet> 本人用 ts 造个 api 适配器 </font>

废话不多说，间接上成品：type-json-mapper

装置

npm install type-json-mapper --save

装璜器

采纳装璜器对类属性进行解决，内置两种装璜器：

<font color=violet>@mapperProperty($apiName, type)</font>

根本数据类型应用该装璜器

接管两个参数：

<font color=violet>$apiName</font>：接口字段名

<font color=violet>type</font>：(可选) 字段转换类型（可选值：’string’ | ‘int’ | ‘flot’ | ‘boolean’ | ‘date’ | ‘time’ | ‘datetime’）

<font color=violet>@deepMapperProperty ($apiName, Class)</font>

自定义类型 / 数组应用该装璜器

接管两个参数：

<font color=violet>$apiName</font>：接口字段名

<font color=violet>Class</font>：自定义类

序列化

内置两种序列化函数

<font color=red>* 序列化次要解决前端申请接口时参数的字段、类型不正确的问题 </font>

<font color=violet>serialize(Clazz,json,ignore)</font>

序列化 json 对象

接管三个参数：

<font color=violet>Clazz</font>：自定义类型

<font color=violet>json</font>：待序列化对象

<font color=violet>ignore</font>: (boolean)（可选，默认 true）不返回值为 undefined 的字段

<font color=violet>serializeArr(Clazz,jsonArr,ignore)</font>

序列化数组

接管三个参数：

<font color=violet>Clazz</font>：自定义类型

<font color=violet>jsonArr</font>：待序列化数组

<font color=violet>ignore</font>: (boolean)（可选，默认 true）不返回值为 undefined 的字段

反序列化

内置两种反序列化函数

<font color=violet>deserialize(Clazz,json,ignore)</font>

反序列化 json 对象

接管三个参数：

<font color=violet>Clazz</font>：自定义类型

<font color=violet>json</font>：待反序列化对象

<font color=violet>ignore</font>: (boolean)（可选，默认 true）不返回值为 undefined 的字段

<font color=violet>deserializeArr(Clazz,jsonArr,ignore)</font>

反序列化数组

接管三个参数：

<font color=violet>Clazz</font>：自定义类型

<font color=violet>jsonArr</font>：待反序列化数组

<font color=violet>ignore</font>: (boolean)（可选，默认 true）不返回值为 undefined 的字段

应用示例

首先，咱们须要造几个类，给类属性加上 type-json-mapper 内置的装璜器，<font color=red> 不要遗记在构造函数内初始化类属性 </font>

import {mapperProperty,deepMapperProperty} from "type-json-mapper";

class Lesson {@mapperProperty("ClassName")
  public name: string;
  @mapperProperty("Teacher")
  public teacher: string;
  @mapperProperty("DateTime", "datetime")
  public datetime: string;

  constructor() {
    this.name = "";
    this.teacher = "";
    this.datetime = "";
  }
}
class Address {
  public province: string;
  public city: string;
  @mapperProperty("full_address")
  public fullAddress: string;

  constructor() {
    this.province = "";
    this.city = "";
    this.fullAddress = "";
  }
}

class Student {@mapperProperty("StudentID", "string")
  public id: string;
  @mapperProperty("StudentName", "string")
  public name: string;
  @mapperProperty("StudentAge", "int")
  public age: number;
  @mapperProperty("StudentSex", "int")
  public sex: number;
  @deepMapperProperty("Address", Address)
  public address?: Address;
  @deepMapperProperty("Lessons", Lesson)
  public lessons?: Lesson[];

  constructor() {
    this.id = "";
    this.name = "";
    this.age = 0;
    this.sex = 0;
    this.address = undefined;
    this.lessons = undefined;
  }
}

接口返回数据：

let json = {
  StudentID: "123456",
  StudentName: "李子明",
  StudentAge: "9",
  StudentSex: "1",
  Address: {
    province: "广东",
    city: "深圳",
    full_address: "xxx 小学三年二班",
  },
  Lessons: [
    {
      ClassName: "中国高低五千年",
      Teacher: "建国老师",
      DateTime: 1609430399000,
    },
  ],
};

开始转化

import {deserialize} from 'type-json-mapper';
try {const student = deserialize(Student, json);
} catch(err) {console.error(err);
}