如何将TypeScript对象按指定顺序序列化为JSON字符串？

嘿，这个问题我之前踩过坑——默认的JSON.stringify()会把对象属性按字母顺序排列，完全不管你接口或类里的定义顺序。下面给你几个实用的解决方案，都是我实际验证过的：

方案1：手动指定属性顺序（最简单可靠） #

利用JSON.stringify()的第二个参数（replacer数组），直接传入你想要的属性顺序数组。这个方法不需要任何额外依赖，适合快速解决问题。

示例代码： #

interface Root { id: string; name: string; description: string; childs: Child[]; }
interface Child { id: string; name: string; description: string }

const root: Root = {
  id: "1000",
  name: "root name",
  description: "root description",
  childs: [
    { id: "9000", name: "child name 1", description: "child description 1" },
    { id: "9001", name: "child name 2", description: "child description 2" }
  ]
};

// 手动指定Root和Child的属性顺序
const jsonStr = JSON.stringify(root, [
  'id', 'name', 'description', 'childs',
  // 嵌套的Child对象也要指定顺序
  ...['id', 'name', 'description']
], 2);

console.log(jsonStr);

优缺点： #

• ✅ 简单直接，无需额外配置
• ❌ 如果嵌套层级多或者属性量大，手动维护顺序会比较繁琐

方案2：用类+自定义toJSON()方法 #

因为TypeScript接口编译后会被擦除，无法在运行时获取定义顺序，所以换成类的话，可以在类里定义toJSON()方法，手动按返回对象字面量的顺序来序列化（ES2015+的对象字面量会保留属性定义顺序）。

示例代码： #

class Child {
  id: string;
  name: string;
  description: string;

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

  // 按定义顺序返回属性
  toJSON() {
    return {
      id: this.id,
      name: this.name,
      description: this.description
    };
  }
}

class Root {
  id: string;
  name: string;
  description: string;
  childs: Child[];

  constructor(id: string, name: string, description: string, childs: Child[]) {
    this.id = id;
    this.name = name;
    this.description = description;
    this.childs = childs;
  }

  toJSON() {
    return {
      id: this.id,
      name: this.name,
      description: this.description,
      childs: this.childs
    };
  }
}

// 使用示例
const root = new Root('1000', 'root name', 'root description', [
  new Child('9000', 'child name 1', 'child description 1'),
  new Child('9001', 'child name 2', 'child description 2')
]);

const jsonStr = JSON.stringify(root, null, 2);
console.log(jsonStr);

优缺点： #

• ✅ 序列化逻辑和类绑定，复用性好，不用每次调用JSON.stringify都传参数
• ✅ 完全符合ES标准，没有实验性特性依赖
• ❌ 必须用类而不是接口，如果你之前用接口定义类型，需要改成类

方案3：实验性装饰器标记顺序（适合复杂场景） #

如果你的项目可以启用TypeScript的实验性装饰器特性，可以通过装饰器标记属性的序列化顺序，再结合自定义序列化函数来实现自动按定义顺序序列化。

第一步：配置tsconfig.json #

需要开启两个实验性选项：

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

第二步：实现装饰器和序列化函数 #

// 元数据键，用于存储属性顺序
const PROPERTY_ORDER_KEY = Symbol('propertyOrder');
let orderCounter = 0;

// 装饰器：标记属性的序列化顺序（按装饰器执行顺序，即类中属性定义顺序）
function SerializeOrder() {
  return function(target: any, propertyKey: string) {
    const currentOrder = Reflect.getMetadata(PROPERTY_ORDER_KEY, target) || [];
    currentOrder.push({ key: propertyKey, order: orderCounter++ });
    // 保证顺序是按装饰器执行顺序排列
    currentOrder.sort((a, b) => a.order - b.order);
    Reflect.defineMetadata(PROPERTY_ORDER_KEY, currentOrder, target);
  };
}

// 自定义序列化函数，按装饰器标记的顺序处理对象
function serializeWithOrder(obj: any): any {
  if (Array.isArray(obj)) {
    return obj.map(item => serializeWithOrder(item));
  }
  if (typeof obj === 'object' && obj !== null) {
    const proto = Object.getPrototypeOf(obj);
    const propertyOrder = Reflect.getMetadata(PROPERTY_ORDER_KEY, proto) || [];
    const orderedObj: Record<string, any> = {};

    // 按标记的顺序添加属性
    propertyOrder.forEach(({ key }) => {
      if (obj.hasOwnProperty(key)) {
        orderedObj[key] = serializeWithOrder(obj[key]);
      }
    });

    // 可选：添加未被装饰器标记的属性（放在最后）
    Object.keys(obj).forEach(key => {
      if (!orderedObj.hasOwnProperty(key)) {
        orderedObj[key] = serializeWithOrder(obj[key]);
      }
    });

    return orderedObj;
  }
  return obj;
}

第三步：使用装饰器标记类属性 #

class Child {
  @SerializeOrder()
  id: string;

  @SerializeOrder()
  name: string;

  @SerializeOrder()
  description: string;

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

class Root {
  @SerializeOrder()
  id: string;

  @SerializeOrder()
  name: string;

  @SerializeOrder()
  description: string;

  @SerializeOrder()
  childs: Child[];

  constructor(id: string, name: string, description: string, childs: Child[]) {
    this.id = id;
    this.name = name;
    this.description = description;
    this.childs = childs;
  }
}

// 序列化示例
const root = new Root('1000', 'root name', 'root description', [
  new Child('9000', 'child name 1', 'child description 1'),
  new Child('9001', 'child name 2', 'child description 2')
]);

const jsonStr = JSON.stringify(serializeWithOrder(root), null, 2);
console.log(jsonStr);

优缺点： #

• ✅ 声明式标记顺序，代码更整洁，适合属性多、嵌套复杂的场景
• ❌ 依赖实验性装饰器特性，可能在未来TypeScript版本中有所变化
• ❌ 同样只能作用于类，无法用于接口

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