TypeScript中如何将键名包含点的JSON解析为对应类对象

1. 正确定义包含带点属性名的类 #

JavaScript/TypeScript 支持使用引号包裹包含特殊字符（比如点、空格、特殊符号）的属性名，直接修改类定义如下即可解决语法报错：

class MyData {
  key1: string;
  // 用引号包裹带点的属性名
  'key2.part2': string;
}

如果是纯JavaScript场景，移除上面代码中的类型标注即可，逻辑完全一致。

2. 将JSON解析结果转换为类实例 #

JSON.parse() 默认返回普通对象，不会自动关联自定义类的原型，可任选以下两种方案完成转换：

• 方案1：使用Object.assign手动赋值

// 待解析的JSON字符串
const jsonStr = `{
  "key1": "value1",
  "key2.part2": "value2"
}`;

// 先解析为普通对象，再合并到类实例上
const myDataInstance = Object.assign(new MyData(), JSON.parse(jsonStr));

// 取值说明：带点的属性需要用方括号语法读取
console.log(myDataInstance.key1); // 输出 value1
console.log(myDataInstance['key2.part2']); // 输出 value2

• 方案2：通过JSON.parse的reviver参数在解析阶段转换

const myDataInstance = JSON.parse(jsonStr, (key, value) => {
  // 处理根对象，转换为MyData实例
  if (key === '') return Object.assign(new MyData(), value);
  return value;
});

可选优化：添加属性别名简化调用 #

如果不想每次都用方括号读取带点的属性，可以在类中添加getter做别名映射：

class MyData {
  key1: string;
  'key2.part2': string;

  // 定义别名属性，后续可用点语法直接调用
  get key2Part2() {
    return this['key2.part2'];
  }
}

// 调用示例
console.log(myDataInstance.key2Part2); // 输出 value2

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