如何从经JSON.stringify存储的Session中获取对象数组？

我定义了如下类：

export class CartItem {  
  productname!: string;
  quantity!: number;
}

将该类的数组存入Session的代码如下：

cartItems: Array<CartItem> = [];
// ...其他逻辑
sessionStorage.setItem("CurrentCart", JSON.stringify(this.cartItems));

在取出时尝试了以下代码：

this.cartItems = JSON.parse(sessionStorage.getItem("CurrentCart") || '') as Array<CartItem>;

但返回结果显示为：

Cart Items [object Object],[object Object],[object Object],[object Object]

而非带有具体值的数组。了解到需要将数组映射回去或编写自定义转换器，但对于更复杂的类来说，这种方式低效且繁琐，想问这是唯一的解决方法吗？

核心原因说明 #

JSON.parse解析出来的只是普通JavaScript对象，TypeScript的as Array<CartItem>只是编译时的类型断言，不会在运行时把对象转换成CartItem类的实例。而你看到的[object Object]是JS对象默认的toString()返回结果——哪怕是正确的类实例，直接拼接成字符串也会显示这个，和是否转成类实例无关。你可以试试用console.log("Cart Items", this.cartItems)（逗号分隔）或者console.log(JSON.stringify(this.cartItems))，就能看到具体属性值了。

分场景解决方法 #

1. CartItem是纯数据类（无类方法）
   完全没必要转成类实例，把class改成interface即可：

   export interface CartItem {  
     productname: string;
     quantity: number;
   }
   

   取出时依然用原来的断言代码，运行时直接访问对象属性就行，TypeScript会在编译时做类型检查，不影响实际使用。

2. CartItem包含类方法，必须转成实例
   不用手动逐个属性赋值，给类加一个静态工厂方法简化转换：

   export class CartItem {  
     productname!: string;
     quantity!: number;
   
     // 从JSON对象创建类实例
     static fromJson(json: Partial<CartItem>): CartItem {
       const item = new CartItem();
       Object.assign(item, json);
       return item;
     }
   }
   

   取出数组时用map批量转换：

   const rawData = sessionStorage.getItem("CurrentCart") || '[]';
   this.cartItems = JSON.parse(rawData).map(CartItem.fromJson);
   

   复杂类可以用Object.assign、扩展运算符{...json}，或者第三方工具库自动处理嵌套对象转换，不用手写繁琐的属性赋值逻辑。

总结 #

不是必须手动映射——纯数据场景用接口替代类最省事；需要类实例的场景，用工厂方法或工具库可以大幅简化转换逻辑，避免重复劳动。

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