Handlebars在TypeScript中无法从Map<string, object>生成正确JSON的问题求助

嘿，我来帮你捋清楚问题出在哪——Handlebars本身不原生支持ES6的Map类型，当你直接把Map传给模板用{{#each}}遍历的时候，它会把Map当成普通可迭代对象处理，所以才会输出0、1、2这种索引作为键，还拿不到对应的值（因为它不知道该怎么读取Map的键值对结构）。

解决方案：把Map转换成普通JS对象 #

Handlebars对普通JavaScript对象的支持非常友好，我们可以用Object.fromEntries()方法把Map直接转换成键值对结构的对象，这样{{#each}}就能正确识别字符串键和对应的值了。

另外还要注意模板里的逗号问题——你当前的模板最后一个元素后面会多一个逗号，生成的JSON会无效，我们可以用Handlebars的@last内置变量来判断，避免多余的逗号。

修改后的完整代码 #

import * as fs from 'fs';
import Handlebars from 'handlebars';

function main() {
  let template;
  try {
    const content = fs.readFileSync('template.hbs').toString();
    template = Handlebars.compile(content);
  } catch (e) {
    console.error('读取模板失败:', e);
  }

  const map = new Map<string, object>();
  map.set("color1", { type: "red"});
  map.set("color2", { type: "green"});
  map.set("color3", { type: "blue"});

  // 把Map转换成普通JS对象
  const mapObj = Object.fromEntries(map);

  console.log("JSON");
  const json = template({ map: mapObj }, { strict: true });
  console.log(json);
}

main();

修改后的template.hbs模板 #

{
  "colors": {
    {{#each map}}
    "{{@key}}": {
      "type": "{{type}}"
    }{{#unless @last}},{{/unless}}
    {{/each}}
  }
}

预期输出 #

{"colors": {
  "color1": {
    "type": "red"
  },
  "color2": {
    "type": "green"
  },
  "color3": {
    "type": "blue"
  }
}}

备注：内容来源于stack exchange，提问作者Robert La Ferla