React Native+TypeScript中AsyncStorage存储后Map类型丢失如何解决？

问题原因 #

JSON不支持原生Map类型，使用JSON.stringify序列化时，Map会被转化为普通空对象{}；而TypeScript的类型注解仅作用于编译阶段，不会在运行时自动将普通对象还原为Map，因此调用has()、keys()等Map方法时会报错。

解决方案 #

方案一：手动转换Map与数组 #

存储时将Map转为JSON支持的二维数组，读取时再转回Map：

存储操作

// 将Map转换为二维数组后再序列化
const habitToStore = {
  ...habit,
  streak: {
    ...habit.streak,
    marked: Array.from(habit.streak.marked.entries())
  }
};
await AsyncStorage.setItem(habit.key, JSON.stringify(habitToStore));

读取操作

const res = await AsyncStorage.getItem(habit.key);
if (!res) {
  // 处理数据不存在的情况
  return;
}
const parsedData = JSON.parse(res);
// 将二维数组转回Map，恢复Habit类型结构
const habit: Habit = {
  ...parsedData,
  streak: {
    ...parsedData.streak,
    marked: new Map(parsedData.streak.marked)
  }
};

// 此时可正常调用Map方法
if (habit.streak.marked.has(someKey)) {
  // 业务逻辑处理
}

方案二：封装工具函数复用 #

如果多处需要处理这类存储逻辑，可以封装序列化和反序列化函数，避免重复代码：

序列化函数

function serializeHabit(habit: Habit): string {
  const serialized = {
    ...habit,
    streak: {
      ...habit.streak,
      marked: Array.from(habit.streak.marked.entries())
    }
  };
  return JSON.stringify(serialized);
}

反序列化函数

function deserializeHabit(serializedStr: string): Habit {
  const parsed = JSON.parse(serializedStr);
  return {
    ...parsed,
    streak: {
      ...parsed.streak,
      marked: new Map(parsed.streak.marked)
    }
  };
}

使用示例

// 存储
await AsyncStorage.setItem(habit.key, serializeHabit(habit));

// 读取
const res = await AsyncStorage.getItem(habit.key);
if (res) {
  const habit = deserializeHabit(res);
  if (habit.streak.marked.has(someKey)) {
    // 业务逻辑处理
  }
}

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