转换打字稿地图<string, string>到 json 字符串表示

Question

我在打字稿中有一个Map<string, string>变量：

let m = Map<string, string>().set('tag', 'v1');

我想转换为 json 字符串表示：

'{"tag": "v1"}'

我尝试了 3 种不同的方法。 首先是使用m.toString() 。 其次是使用JSON.stringify(m) 。 两者都返回了{} 。 我什至尝试先将Map转换为 javascript object ，然后再转换为字符串：

function MapToString(map): string {
  let ro = {};
  Object.keys(map).forEach( key => {
    ro[key] = map[key];
  });
  return JSON.stringify(ro);
}

s = MapToString(m);

当我尝试在控制台中打印它时，这也返回了{} 。

Answer 1

我最终放弃了使用 es6 Map 并切换到TSMap ，其上的tags.toJSON()工作。

Answer 2

可读？ 不，但它有效

JSON.stringify(
  Array.from(
    new Map().set('tag', 'v1').set('foo', 'bar').entries()
  )
  .reduce((o, [key, value]) => { 
    o[key] = value; 

    return o; 
  }, {})
)

就像@james-hay 指出的那样，你有一个可能使对象为空的错字

Answer 3

虽然它没有直接回答你的问题：当我遇到同样的问题时，我重新考虑了我对 Map 的使用，并选择了纯 JavaScript 对象。 由于 JSON 总是需要字符串作为键，因此 Map 的主要优势之一（任何类型的键）无论如何都会丢失。

Map 的另一个优点是它们允许良好的类型签名，例如Map<String, Array<String>> 。 但是这里 TypeScript 的“索引签名”为纯 JavaScript 对象提供了这一点，甚至允许为键命名：

interface CityLists {
    [postcode: string]: Array<string>
};

这几乎可以像 Map 一样使用（当然，使用不同的语法），即使嵌套. 我认为当您将对象树转换为 JSON 时，后者非常重要，其中映射可以嵌套在其他任意对象和数组的深处。

或者，对于这个用例，TypeScript 也有类型Record<K, T> ：用作类型化映射的普通对象。 在上面的例子中，我可以写：

let cityLists: Record<string, Array<string>>;
cityLists["capitals"] = ["Rome", "Paris", "Berlin"];

Answer 4

在带有 lib es2015 的 Nativescript 中，我可以执行以下操作：

从对象到字符串：

// no need to import JSON
let fooInString = JSON.stringify(this.mapObject.subMap);

从字符串到对象：

// no need to import JSON
let fooInObject = JSON.parse(fooInString);

快乐编码！

Answer 5

虽然这似乎是其他答案中指出的拼写错误，但当 ES6 和 vanilla JS 在同一项目中一起使用时，可能会出现此问题。 JS 不会识别 ES6 映射并将其转换为空对象“{}”。

一个快速的解决方法是在 JS 对象中持久化 ES6 映射时使用序列化器/反序列化器

ES6 转 JS

convertTSMapToJSObj(tsMap) {
    const jsObj = {};
    tsMap.forEach(function (value, key) {
        jsObj[key] = value;
    });
    return jsObj;
}

JS 转 ES6

convertJSObjToTSMap(jsObj) {
    const tsMap = new Map();
    const arrayOfMapEntries = new Map<any, any>(Object.entries(jsObj);
    for (const [key, value] of arrayOfMapEntries.entries()) {
        tsMap.set(key, value);
    }
    return tsMap;
}