Angular+TypeScript中Signal类JSON序列化最优方案咨询

现有两种方案的对比 #

1. 自定义toJSON方法 #

这种方式逻辑最直接——因为JSON.stringify会自动调用对象的toJSON方法，你只需要在方法里返回想要提交给API的字段结构，排除带下划线的私有字段，同时确保输出处理后的空字符串值。

• 优点：完全掌控序列化结果，想输出什么字段、怎么格式化都能自己定，调试起来一目了然。
• 缺点：如果类里字段多，每次新增字段都得手动更新toJSON的返回对象，容易遗漏。
• 示例代码：

class Signal {
  private _descripcion: string | null;
  private _rangoInferior: number | null;
  private _rangoSuperior: number | null;

  constructor(data: Partial<Signal>) {
    this._descripcion = data.descripcion ?? null;
    this._rangoInferior = data.rangoInferior ?? null;
    this._rangoSuperior = data.rangoSuperior ?? null;
  }

  get descripcion(): string {
    return this._descripcion ?? '';
  }

  set descripcion(value: string | null) {
    this._descripcion = value ?? null;
  }

  toJSON() {
    return {
      descripcion: this.descripcion,
      rangoInferior: this._rangoInferior ?? '',
      rangoSuperior: this._rangoSuperior ?? '',
      // 其他需要传给API的字段
    };
  }
}

2. 用Object.defineProperties调整可枚举性 #

通过把私有下划线字段设为不可枚举，同时把公共getter属性设为可枚举，JSON.stringify就会忽略私有字段，只序列化getter返回的结果。

• 优点：一次配置后，后续只要遵循同样的私有字段+getter模式，不用再改序列化逻辑。
• 缺点：配置代码有点繁琐，字段多的话写起来麻烦；而且要确保TypeScript的类型定义和实际配置的属性一致，容易出类型问题。
• 示例代码：

class Signal {
  private _descripcion: string | null;
  private _rangoInferior: number | null;
  private _rangoSuperior: number | null;

  constructor(data: Partial<Signal>) {
    this._descripcion = data.descripcion ?? null;
    this._rangoInferior = data.rangoInferior ?? null;
    this._rangoSuperior = data.rangoSuperior ?? null;

    // 把getter设为可枚举
    Object.defineProperties(this, {
      descripcion: {
        get: () => this._descripcion ?? '',
        set: (value: string | null) => this._descripcion = value ?? null,
        enumerable: true,
        configurable: true
      },
      rangoInferior: {
        get: () => this._rangoInferior ?? '',
        set: (value: number | null) => this._rangoInferior = value ?? null,
        enumerable: true,
        configurable: true
      },
      rangoSuperior: {
        get: () => this._rangoSuperior ?? '',
        set: (value: number | null) => this._rangoSuperior = value ?? null,
        enumerable: true,
        configurable: true
      }
    });

    // 私有字段设为不可枚举
    ['_descripcion', '_rangoInferior', '_rangoSuperior'].forEach(key => {
      Object.defineProperty(this, key, { enumerable: false });
    });
  }
}

最优方案怎么选？ #

• 如果你的Signal类字段不多，或者需要灵活控制某些字段的序列化逻辑（比如某些字段只在特定场景输出），选**自定义toJSON**更合适，简单直接，不容易出问题。
• 如果字段多，后续还会频繁加字段，不想每次都改toJSON，可以考虑第二种方案，但建议自己写个装饰器来简化配置，比如写个@SerializeAs装饰器自动处理私有字段和getter的可枚举性，减少重复代码。

其他可选方案 #

3. 用class-transformer库处理 #

Angular项目里常用的class-transformer专门解决类的序列化/反序列化问题，用装饰器就能搞定空值转换、字段过滤，不用自己写一堆逻辑。

• 示例代码：

import { Transform, Exclude, Expose } from 'class-transformer';

class Signal {
  @Exclude() // 标记私有字段不序列化
  private _descripcion: string | null;

  @Expose() // 暴露这个getter的结果
  @Transform(({ obj }) => obj._descripcion ?? '')
  get descripcion(): string {
    return this._descripcion ?? '';
  }

  set descripcion(value: string | null) {
    this._descripcion = value ?? null;
  }

  // 同理处理rangoInferior、rangoSuperior
}

// 序列化时用classToPlain转成纯对象
import { classToPlain } from 'class-transformer';
const signal = new Signal({ descripcion: null });
const apiPayload = JSON.stringify(classToPlain(signal));

• 优点：代码简洁，声明式配置，TypeScript类型支持好，适合中大型项目，能省很多重复工作。

4. 序列化前手动映射字段 #

最简单的方式——在调用JSON.stringify之前，手动创建一个纯对象，只放需要传给API的字段，顺便把null转成空字符串。

• 示例代码：

const signal = new Signal({ descripcion: null, rangoInferior: null });
const apiPayload = {
  descripcion: signal.descripcion,
  rangoInferior: signal.rangoInferior ?? '',
  rangoSuperior: signal.rangoSuperior ?? '',
  // 其他字段
};
const json = JSON.stringify(apiPayload);

• 优点：不需要修改类的结构，临时用或者字段少的时候很方便。
• 缺点：字段多的话代码冗余，新增字段容易漏写。

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