如何使用缩进格式JSON初始化TypeScript/Angular类成员？

嘿，这个问题其实很好解决，咱们完全不用再依赖JSON.parse处理压缩的字符串了！直接用TypeScript原生的写法就能实现可读性拉满的初始化效果，下面给你两种方案，优先推荐第一种：

方案一：直接使用格式化的对象字面量（最推荐） #

TypeScript支持直接在类成员里用对象数组初始化，和JSON结构几乎完全一致，还能自由添加缩进，既高效又易维护。修改后的代码如下：

export class MyComponent implements OnInit {
  // 用格式化的对象数组直接初始化，结构清晰一目了然
  some: any = [
    {
      id: "EN",
      fill: "blue",
      classb: "FR someclass"
    },
    {
      id: "US",
      fill: "hsl(240, 100%, 35%)",
      classb: "someclass"
    },
    {
      id: "ES",
      fill: "hsl(240, 100%, 60%)",
      classb: "someclass"
    },
    {
      id: "IT",
      fill: "hsl(240, 100%, 90%)",
      classb: "someclass"
    }
  ];

  getStyle(zoneId: string): string {
    const test = this.some.find(x => x.id === zoneId);
    if (test === undefined) return "#000000";
    if (test.fill !== undefined) return test.fill;
    return "red";
  }
}

这里的好处很明显：

• 不需要额外的JSON解析步骤，性能更好
• 缩进清晰，每个对象的字段都能一眼看清，后期修改调试更方便
• 如果想更严谨，还可以给some定义具体的类型（比如创建一个ZoneConfig接口），让TypeScript帮你做类型检查，避免写错字段名

方案二：用模板字符串保留JSON缩进（备选） #

如果某些场景下你必须用JSON字符串的形式（比如从外部配置文件导入等），可以用ES6的模板字符串（反引号）来保留缩进，这样JSON.parse的参数就是格式化后的字符串：

export class MyComponent implements OnInit {
  some: any = JSON.parse(`[
    {
      "id": "EN",
      "fill": "blue",
      "classb": "FR someclass"
    },
    {
      "id": "US",
      "fill": "hsl(240, 100%, 35%)",
      "classb": "someclass"
    },
    {
      "id": "ES",
      "fill": "hsl(240, 100%, 60%)",
      "classb": "someclass"
    },
    {
      "id": "IT",
      "fill": "hsl(240, 100%, 90%)",
      "classb": "someclass"
    }
  ]`);

  getStyle(zoneId: string): string {
    const test = this.some.find(x => x.id === zoneId);
    if (test === undefined) return "#000000";
    if (test.fill !== undefined) return test.fill;
    return "red";
  }
}

不过这种方法不太推荐，因为多了一次JSON解析的开销，而且如果字符串里有语法错误（比如引号没配对），只有运行时才会报错，不如直接用对象字面量靠谱。

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