Angular HttpClient如何将类的Getter/Setter属性纳入请求Payload？

我定义了如下 TypeScript 类：

export class FileData {
  get name(): string { return this.#name || (this.data ? `Unnamed.${this.data.match(/[^:/]\w+(?=;|,|\+)/)?.[0]}` : '') }
  set name(name: string) { this.#name = name; }
  #name: string = '';

  public data: string;

  constructor(name: string, data: string) {
    this.name = name;
    this.data = data;
  }
}

创建该类实例后，通过 Angular 的 HttpClient 提交至 Mongoose API：

this.value = new FileData("xyz", "abc");
this._http.post<FileData>(targetUrl, this.value, { observe: 'response' })

预期请求 Payload 如下：

{
  "data": "abc",
  "name": "xyz"
}

但实际 Payload 中不存在 name 属性（尽管在开发者工具中可访问该属性）；若将 #name 改为 private _name: string，Payload 会包含私有属性 _name 而非 name，不符合需求。请问如何让 Angular 将该 Getter/Setter 属性视为常规属性并纳入请求 Payload？

解决方案 #

方法1：手动构造请求体 #

直接在发起请求时，手动构建包含name和data的普通对象，绕过类的私有字段限制：

this.value = new FileData("xyz", "abc");
const payload = {
  name: this.value.name,
  data: this.value.data
};
this._http.post<FileData>(targetUrl, payload, { observe: 'response' })

方法2：给类添加 toJSON() 方法 #

利用 JavaScript 原生序列化机制，给FileData类添加toJSON()方法，返回需要序列化的属性集合。Angular HttpClient 会自动调用这个方法生成请求体：

export class FileData {
  get name(): string { return this.#name || (this.data ? `Unnamed.${this.data.match(/[^:/]\w+(?=;|,|\+)/)?.[0]}` : '') }
  set name(name: string) { this.#name = name; }
  #name: string = '';

  public data: string;

  constructor(name: string, data: string) {
    this.name = name;
    this.data = data;
  }

  toJSON() {
    return {
      name: this.name,
      data: this.data
    };
  }
}

修改后直接提交类实例即可，无需额外处理。

方法3：使用 class-transformer 库（适合多类序列化场景） #

如果项目中有大量需要序列化的类，推荐使用class-transformer库统一处理：

1. 先安装依赖：

npm install class-transformer

2. 给类的目标属性添加@Expose装饰器：

import { Expose } from 'class-transformer';

export class FileData {
  @Expose()
  get name(): string { return this.#name || (this.data ? `Unnamed.${this.data.match(/[^:/]\w+(?=;|,|\+)/)?.[0]}` : '') }
  set name(name: string) { this.#name = name; }
  #name: string = '';

  @Expose()
  public data: string;

  constructor(name: string, data: string) {
    this.name = name;
    this.data = data;
  }
}

3. 请求时用instanceToPlain方法转换实例为普通对象：

import { instanceToPlain } from 'class-transformer';

this.value = new FileData("xyz", "abc");
const payload = instanceToPlain(this.value);
this._http.post<FileData>(targetUrl, payload, { observe: 'response' })

内容的提问来源于stack exchange，提问作者Otto Abnormalverbraucher