Angular调用OpenAPI接口赋值Map时出现TS2740错误如何解决

TypeScript中{ [key: string]: Commune; }是带字符串索引签名的普通JavaScript对象，而Map<string, Commune>是ES6标准内置的Map类的实例类型，二者属于完全不同的数据结构：

• 接口返回的是后端Java Map序列化到JSON后对应的普通对象，没有挂载Map原型链上的clear、delete、get等实例方法，所以赋值时触发类型不匹配的TS2740报错。
• OpenApi生成前端接口类型时，默认会把JSON结构的键值对映射为索引签名对象类型，不会自动生成Map类型。

你可以根据自己的使用场景二选一： #

方案1：直接修改变量类型（推荐，无需额外转换逻辑） #

如果你仅需要通过键名读取城市信息，不需要使用Map的专属方法，直接把verificationCommunes的类型改为和接口返回一致的索引签名对象即可：

// 把原来的 Map<string,Commune> 类型替换为以下定义
verificationCommunes: { [key: string]: Commune } = {};

// subscribe中可以直接赋值
this.cogControllerService.obtenirCommunes().subscribe(data => {
  this.verificationCommunes = data;
})

方案2：把返回对象转换为Map实例 #

如果你确实需要用到Map的遍历、增删等API，就把接口返回的普通对象转为Map实例后再赋值：

// verificationCommunes 保持 Map<string, Commune> 类型不变
verificationCommunes: Map<string, Commune> = new Map();

// subscribe中做一层转换
this.cogControllerService.obtenirCommunes().subscribe(data => {
  // Object.entries把普通对象转为 [string, Commune][] 格式的键值对数组，直接传入Map构造函数
  this.verificationCommunes = new Map(Object.entries(data));
})

内容的提问来源于stack exchange，提问作者Marc Le Bihan