如何在TypeScript中将含多游戏的JSON转为类对象并访问属性

问题根源 #

1. 你的GamesConfig类定义中，listedGames嵌套了一层games?: Map<string, Games>，但实际JSON里listedGames直接是游戏对象的键值集合，没有games这个子属性，导致访问games时得到undefined。
2. JSON解析后得到的是普通JavaScript对象，不会自动转换成Map类型，Map需要手动构造。
3. 类型不匹配：JSON里的Id是数字类型，但你定义的Games.Id是string类型，这也会导致类型断言后访问值出现异常。

解决方案 #

方案1：用索引签名匹配JSON结构（推荐） #

直接使用TypeScript的索引签名来定义任意数量的游戏键值对，完美适配JSON的结构，无需额外转换：

// 定义拆分结构的接口
interface RegionalSplit {
  [regionName: string]: number;
}

interface ContentPartnerSplit {
  [partnerName: string]: number;
}

// 单个游戏的类型
interface Game {
  Id: number; // 匹配JSON中的数字类型
  regionalSplit: RegionalSplit;
  contentPartnerSplit: ContentPartnerSplit;
}

// 支持任意数量游戏的列表
interface ListedGames {
  [gameKey: string]: Game; // 索引签名，允许任意字符串作为键
}

interface DefaultConfiguration {
  listedGames: ListedGames;
}

export class GamesConfig {
  defaultConfiguration?: DefaultConfiguration;
}

解析并访问属性 #

用JSON.parse解析后直接断言类型，即可正常访问任意游戏的属性：

// 示例JSON字符串
const gameConfigJson = `{
  "defaultConfiguration": {
    "listedGames": {
      "game1": {
        "Id": 1,
        "contentPartnerSplit": {
          "partner1": 50,
          "partner2": 50
        },
        "regionalSplit": {
          "region1": 50,
          "region2": 20,
          "region3": 30
        }
      },
      "game2": {
        "Id": 2,
        "contentPartnerSplit": {
          "partner1": 30,
          "partner2": 70
        },
        "regionalSplit": {
          "region1": 50,
          "region2": 50
        }
      }
    }
  }
}`;

// 解析并断言类型
const config: GamesConfig = JSON.parse(gameConfigJson);

// 直接访问指定游戏
const game1Id = config.defaultConfiguration?.listedGames?.game1?.Id; // 输出 1
// 用索引方式访问（更适合动态键名）
const targetGameKey = 'game2';
const game2Id = config.defaultConfiguration?.listedGames?.[targetGameKey]?.Id; // 输出 2

方案2：手动转换为Map（如果需要Map结构） #

如果业务逻辑确实需要使用Map，可以在解析后将listedGames对象手动转换为Map：

// 解析后转换
const listedGames = config.defaultConfiguration?.listedGames || {};
const gameMap = new Map<string, Game>(Object.entries(listedGames));

// 通过Map访问
const game1 = gameMap.get('game1');
console.log(game1?.Id); // 输出 1

关键注意点 #

• 确保类型定义和JSON结构完全匹配，避免多余的嵌套层（比如之前的games属性）。
• 严格匹配数据类型：JSON中的数字、字符串等类型要和TypeScript定义一致。
• 索引签名是处理动态键名对象的最佳方式，无需额外转换即可直接访问属性。

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