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

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

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

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

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

下次会改什么字段，下次哪个字段会出问题（{{{瑟瑟发抖}}}）

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

算了，罗唆本人造个轮子

本人用 ts 造个 api 适配器

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

npm install type-json-mapper --save

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

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

接管两个参数：

$apiName：接口字段名

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

接管两个参数：

$apiName：接口字段名

Class：自定义类

内置两种序列化函数

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

序列化 json 对象

接管三个参数：

Clazz：自定义类型

json：待序列化对象

ignore: (boolean)（可选，默认 true）不返回值为 undefined 的字段

序列化数组

接管三个参数：

Clazz：自定义类型

jsonArr：待序列化数组

ignore: (boolean)（可选，默认 true）不返回值为 undefined 的字段

内置两种反序列化函数

反序列化 json 对象

接管三个参数：

Clazz：自定义类型

json：待反序列化对象

ignore: (boolean)（可选，默认 true）不返回值为 undefined 的字段

反序列化数组

接管三个参数：

Clazz：自定义类型

jsonArr：待反序列化数组

ignore: (boolean)（可选，默认 true）不返回值为 undefined 的字段

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

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);
}

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

背景

思考

解决方案

装置

装璜器

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

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

序列化

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

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

反序列化

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

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

应用示例