Class-Transformer库介绍

在前后端分离开发的过程中，前端开发人员如果想要避免因为接口字段不同造成效率下降的问题，就需要将后端传递的plainText中的字段进行转化。显然这里是在应用层面上使用了适配器模式。本文介绍一个js库实现对象字段名的转化功能。

1. Class-Transformer基本使用步骤

Class-Transformer是一个用于转换类实例的库，主要用于在对象之间进行数据映射。以下是使用Class-Transformer的基本步骤：

1.1 安装Class-Transformer

通过npm或yarn安装Class-Transformer库：

npm install class-transformer

或

yarn add class-transformer

1.2 创建类实体

定义需要进行转换的类实体，例如：

// user.entity.ts
import { Expose } from 'class-transformer';

export class UserEntity {
  @Expose()
  id: number;

  @Expose()
  name: string;

  @Expose()
  email: string;
}

1.3 进行转换

在需要进行转换的地方，使用classToPlain或plainToClass方法进行对象的转换：

// main.ts
import { classToPlain, plainToClass } from 'class-transformer';
import { UserEntity } from './user.entity';

const userObject = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
};

// 转换为UserEntity实例
const userInstance = plainToClass(UserEntity, userObject);

// 转换为普通JavaScript对象
const plainObject = classToPlain(userInstance);

2. Class-Transformer高级使用技巧

2.1 字段别名

通过@Expose装饰器设置字段的别名，用于在转换时更改字段名称：

// user.entity.ts
import { Expose } from 'class-transformer';

export class UserEntity {
  @Expose({ name: 'userID' })
  id: number;

  @Expose({ name: 'fullName' })
  name: string;

  @Expose()
  email: string;
}

2.2 转换嵌套对象

Class-Transformer支持转换嵌套对象，使用@Type装饰器指定嵌套对象的类型：

// user.entity.ts
import { Expose, Type } from 'class-transformer';
import { RoleEntity } from './role.entity';

export class UserEntity {
  @Expose()
  id: number;

  @Expose()
  name: string;

  @Expose()
  email: string;

  @Type(() => RoleEntity)
  @Expose()
  roles: RoleEntity[];
}

3. Class-Transformer在前后端通信中的字段转换功能

Class-Transformer在前后端通信中的字段转换功能主要体现在处理后端返回的数据或前端发送的数据时，通过定义类实体并使用转换方法，实现字段名称的映射。在使用axios进行网络请求时，我们可以在处理后端返回的数据时应用Class-Transformer进行字段转换。

举例说明

假设我们有一个后端API返回的用户信息如下：

{
  "user_id": 1,
  "full_name": "John Doe",
  "email_address": "john@example.com"
}

而前端希望使用以下UserEntity类表示用户信息：

// user.entity.ts
import { Expose } from 'class-transformer';

export class UserEntity {
  @Expose({ name: 'user_id' })
  id: number;

  @Expose({ name: 'full_name' })
  name: string;

  @Expose({ name: 'email_address' })
  email: string;
}

如果使用的是js的话那就是：

const { plainToClass, Transform, Expose } = require('class-transformer');

class UserEntity {
  @Expose({ name: 'user_id' })
  id;

  @Expose({ name: 'full_name' })
  name;

  @Expose({ name: 'email_address' })
  email;
}

接下来，在前端进行网络请求时，可以使用axios获取后端返回的用户信息，并应用Class-Transformer进行字段转换：

// user.service.ts
import axios from 'axios';
import { plainToClass } from 'class-transformer';
import { UserEntity } from './user.entity';

export async function getUserInfo(userId: number): Promise<UserEntity> {
  try {
    const response = await axios.get(`/api/user/${userId}`);
    
    // 后端返回的数据进行字段转换为UserEntity实例
    const userEntity = plainToClass(UserEntity, response.data);

    return userEntity;
  } catch (error) {
    console.error('Error fetching user info:', error);
    throw error;
  }
}

在这个例子中，getUserInfo函数使用axios获取后端返回的用户信息，然后通过Class-Transformer的plainToClass方法将后端返回的数据转换为前端定义的UserEntity实例，实现了字段名称的映射。这样，在前端业务逻辑中，我们可以直接使用UserEntity类表示用户信息，而不必关心后端返回的原始字段名称。这种映射关系的定义可以使前后端在数据传递时更加灵活和可维护。