本地存储中的 TypeScript 类型序列化/反序列化答案

【问题标题】：TypeScript types serialisation/deserialization in localstorage本地存储中的 TypeScript 类型序列化/反序列化
【发布时间】：2017-05-22 05:58:38
【问题描述】：

我有一个 Typescript 应用程序。我将本地存储用于开发目的来存储我的对象，但我在反序列化时遇到了问题。

我有一个 MeetingModel 类型的对象会议：

export interface MeetingModel {
    date: moment.Moment; // from the library momentjs
}

我使用 JSON.stringify(meeting) 将此对象存储在 localStorage 中。

我假设 stringify 调用 moment.toJson()，它返回一个 iso 字符串，因此存储的值是：{"date":"2016-12-26T15:03:54.586Z"}。

当我检索这个对象时，我会这样做：

const stored = window.localStorage.getItem("meeting");
const meeting: MeetingModel = JSON.parse(stored);

问题是： meeting.date 包含一个字符串而不是一个时刻！

所以，首先我想知道为什么 TypeScript 会让这种情况发生？为什么我可以分配字符串值而不是 Moment 并且编译器同意？

其次，如何将我的对象从纯 JSON 对象（又名字符串）恢复为 Typescript 类型？

我当然可以创建一个工厂，但是当我的对象数据库长大后，要完成所有这些工作将是一件痛苦的事情。

也许一开始就有更好的存储在本地存储中的解决方案？

谢谢

【问题讨论】：

你考虑过使用IndexedDB吗？
它不是真正的打字稿问题..它的json.parse..check here
@torazaburo 不，IndexedDB 对我的问题有什么好处？
@suraj 谢谢！它回答了我的第二个问题！我会尽快修复我的代码。关于我的第一个问题有什么想法吗？
IndexedDB 存储实际的 JS 对象，并为提高效率而进行键控/索引。但是，您仍然必须以某种方式重新水合您的对象。

标签： json typescript local-storage

【解决方案1】：

1) TypeScript 是可选类型的。这意味着有一些方法可以绕过类型系统的严格性。 any 类型允许您进行动态类型。如果您知道自己在做什么，这会非常方便，但当然您也可以朝自己的脚开枪。

此代码将编译：

var x: string = <any> 1;

这里发生的情况是 number 1 被转换为 any，这对于 TypeScript 意味着它只会假设您作为开发人员知道它是什么以及如何使用它。由于 any 类型随后被分配给 string，因此 TypeScript 完全可以使用它，即使在运行时可能会出错，就像在编写 JavaScript 时出错一样。

当然这是设计使然。 TypeScript 类型仅在编译时存在。你在JSON.parse 中输入了什么样的字符串，TypeScript 不知道，因为输入字符串只存在于运行时，并且可以是任何的东西。因此any 类型。 TypeScript 确实提供了所谓的类型保护。类型保护是在编译时和运行时都可以理解的代码片段，但这超出了您的问题范围（如果您有兴趣，请在 Google 上搜索）。

2）序列化和反序列化数据通常不像调用JSON.stringify和JSON.parse那么简单。大多数类型信息都会丢失到 JSON 中，并且通常您希望在运行时存储对象（在内存中）的方式与您希望存储它们以进行传输或存储的方式（在内存、磁盘或任何其他介质中）非常不同）。例如，在运行时您可能需要查找表、用户/会话状态、私有字段、库特定属性，而在存储中您可能需要版本号、时间戳、元数据、不同类型的规范化等。您可以JSON.stringify在 JavaScript 领域中你想要的任何东西，但这确实意味着它是一个好主意。您可能想要设计实际存储数据的方式。例如，一个 iso 字符串看起来很漂亮，但占用了很多字节。如果您只有几个没关系，但是当您每秒传输数百万时，您可能需要考虑另一种格式。

我的建议是为要保存的对象定义接口，并在模型对象上创建一个 .toJson 方法，该方法将返回 DTO（数据传输对象），您可以使用 @ 简单地序列化它987654333@。然后在返回的路上，您将JSON.parse 的any 输出转换为您的DTO，然后使用您创建的工厂函数或构造函数将其转换回您的模型。这可能看起来像很多样板，但根据我的经验，这是完全值得的，因为现在您可以控制存储的内容，这为您提供了很大的灵活性来更改您的模型而不会遇到反序列化问题。

祝你好运！

【讨论】：

感谢您非常详细的解释！现在我什么都明白了 :) DTO 的概念很棒，我一定会使用它

【解决方案2】：

您可以使用JSON.parse 的reviver 功能将字符串转换回片刻：

JSON.parse(input, (key, value) => {
  if (key == "date") {
    return parseStringAsMoment(value);
  } else {
    return value;
});

检查浏览器对 reviver 的支持，因为它与基本 JSON.parse 不同

【讨论】：