使用 class-transformer 解决字段名不一致转化问题

前言

在前后端开发中，数据传输格式的一致性是至关重要的。尤其是在不同编程语言之间传递数据时，字段命名规则的不同可能会导致前端无法正确解析后端返回的数据。我们知道一般字段的命名规则一般是 驼峰式 和 下划线 的方式，一般情况下 下线划 是定义mysql 属性字段的时候使用，而 java 跟 ts 基本都是采用驼峰式命名。

为了解决这个前端无法正确解析后端返回的数据，使用 class-transformer 可以帮助我们在对象转换时处理字段命名的差异，确保前端能够正确接收到数据。

使用 class-transformer 进行字段转换

1. 定义 user 实体

export class User {
  id: number;
  name: string;
  username: string;
  createdAt: string;
  updatedAt: string;

  constructor(
    id: number,
    name: string,
    username: string,
    createdAt: string,
    updatedAt: string
  ) {
    this.id = id;
    this.name = name;
    this.username = username;
    this.createdAt = createdAt;
    this.updatedAt = updatedAt;
  }
}

2. 定义mock api

import {ApiInjector, MockApiInterface} from "@yunzhi/ng-mock-api";

export class UserApi implements MockApiInterface {
  getInjectors(): ApiInjector[] {
    return [
      {
        method: 'GET',
        url: '/user/getById/:id',
        description: '任务列表',
        // 模拟返回的数据
        result: {
          id: 1,
          name: '张三',
          username: 'zhangsan',
          created_at: '2021-01-01 00:00:00',
          updated_at: '2021-01-01 00:00:00'
        }
      }
    ];
  }
}

3. 实现服务

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {User} from "../entity/user";

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private httpClient: HttpClient) {
  }

  getById(id: number): Observable<User> {
    return this.httpClient.get<User>(`/user/getById/${id}`);
  }
}

4. 组件中使用服务

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="user">
    <h1>名称：{{ user.name }}</h1>
    <p>用户名: {{ user.username }}</p>
    <p>创建时间: {{ user.createdAt }}</p>
    <p>修改时间: {{ user.updatedAt }}</p>
    </div>
  `
})
export class AppComponent implements OnInit{
  user: User = {} as User;

  constructor(private userService: UserService) {
  }

  ngOnInit(): void {
    this.userService.getById(1).subscribe((user: User) => {
      this.user = user;
    });
  }
}

这里我发现当前 createdAt 和 updatedAt 无法接收到值

5. 安装 class-transformer

npm install class-transformer

配置tsconfig.json文件以支持装饰器

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

6. 重构 user 实体

import { Expose } from 'class-transformer';

export class User {
  id: number;
  name: string;
  username: string;

  @Expose({ name: 'created_at' })
  createdAt: string; // 保持为字符串类型

  @Expose({ name: 'updated_at' })
  updatedAt: string; // 保持为字符串类型
}

7. 接收到的值进行转换

this.userService.getById(1).subscribe((user: User) => {
  this.user = plainToInstance(User, user);
});

到这里我们发现这个就可以解决转换问题了

总结

到这里我们解决字段不一致的问题，这个功能很像 JAVA 使用 @JsonAlias 注解 使用起来很方便