掌握Serializr装饰器：@serializable、@serializeAll与@subSchema使用指南 [特殊字符]

掌握Serializr装饰器：@serializable、@serializeAll与@subSchema使用指南 🚀

【免费下载链接】serializrSerialize and deserialize complex object graphs to and from JSON and Javascript classes项目地址: https://gitcode.com/gh_mirrors/se/serializr

Serializr是一个强大的JavaScript/TypeScript序列化库，专门用于处理复杂对象图到JSON的转换。在前100个字内，我们需要明确Serializr的核心功能：它通过装饰器模式简化了对象序列化和反序列化过程，让开发者能够轻松地在JavaScript类和JSON数据之间进行转换。对于新手和普通用户来说，掌握Serializr的三大核心装饰器——@serializable、@serializeAll和@subSchema——是提升开发效率的关键！🎯

📋 为什么需要Serializr装饰器？

在Web开发和API设计中，我们经常需要在JavaScript对象和JSON数据之间进行转换。传统的手动序列化方式不仅繁琐，而且容易出错。Serializr通过装饰器提供了一种声明式的解决方案，让你的代码更加简洁、可维护。

核心优势对比表

🎯 @serializable装饰器：基础序列化利器

@serializable是Serializr中最常用的装饰器，用于标记需要序列化的类属性。它位于src/api/serializable.ts文件中，提供了灵活的配置选项。

基础用法示例

class Todo { @serializable title: string; @serializable(primitive()) completed: boolean; @serializable(date()) createdAt: Date; }

支持的数据类型

Serializr提供了丰富的类型支持：

• 基本类型：primitive()- 处理字符串、数字、布尔值
• 日期类型：date()- 自动转换Date对象
• 对象类型：object(Class)- 处理嵌套对象
• 数组类型：list(type)- 处理数组
• 映射类型：map(type)- 处理键值对
• 引用类型：reference(Class)- 处理对象引用
• 自定义类型：custom(serializer, deserializer)- 完全自定义

构造函数参数支持

@serializable还支持TypeScript的构造函数参数装饰：

class Rectangle { @serializable(alias("width", true)) public width: number; @serializable(alias("height", true)) public height: number; constructor(width: number, height: number) { this.width = width; this.height = height; } }

🔥 @serializeAll装饰器：批量序列化神器

当你有大量属性需要序列化时，@serializeAll装饰器能极大简化代码。这个装饰器位于src/core/serializeAll.ts中，支持两种使用模式。

模式一：自动序列化所有原始类型属性

@serializeAll class Store { a = 3; b = "hello"; c = true; } const store = new Store(); store.d = 5; // 动态添加的属性也会被序列化

模式二：按模式匹配序列化

class DataType { @serializable x: number; @serializable y: number; } @serializeAll(/^[a-z]$/, DataType) class ComplexStore { // 所有匹配正则的属性都会被序列化为DataType类型 } const store = new ComplexStore(); store.a = {x: 1, y: 2}; store.b = {x: 3, y: 4};

使用场景建议

🎭 @subSchema装饰器：处理类继承的智能方案

在处理面向对象编程中的类继承关系时，@subSchema装饰器是必不可少的工具。它位于src/core/subSchema.ts中，通过"鉴别器"机制智能选择正确的子类进行反序列化。

基础继承示例

class Todo { @serializable id: string; @serializable text: string; } @subSchema("picture") class PictureTodo extends Todo { @serializable pictureUrl: string; } @subSchema("video") class VideoTodo extends Todo { @serializable videoUrl: string; }

序列化结果分析

当序列化PictureTodo实例时，Serializr会自动添加类型标识：

{ "id": "pic1", "_type": "picture", "text": "Lorem Ipsum", "pictureUrl": "foobar" }

多级继承处理

class Todo { @serializable id: string; @serializable text: string; } @subSchema("picture") class PictureTodo extends Todo { @serializable pictureUrl: string; } @subSchema("betterPicture", Todo) // 指定父类 class BetterPictureTodo extends PictureTodo { @serializable altText: string; }

复杂鉴别器配置

除了简单的字符串鉴别器，@subSchema还支持复杂的对象配置：

@subSchema({ isActualType: (src) => !!src["pictureUrl"], storeDiscriminator: (result) => { result["type"] = "picture"; } }) class PictureTodo extends Todo { @serializable pictureUrl: string; }

🛠️ 实际应用场景指南

场景一：API数据交换

// API请求数据模型 class UserRequest { @serializable username: string; @serializable(email()) email: string; @serializable(list(primitive())) roles: string[]; } // API响应数据模型 class UserResponse { @serializable(identifier()) id: string; @serializable username: string; @serializable(date()) createdAt: Date; }

场景二：本地存储管理

@serializeAll class AppSettings { theme = "dark"; language = "zh-CN"; notifications = true; } // 保存到localStorage const settings = new AppSettings(); localStorage.setItem("settings", JSON.stringify(serialize(settings))); // 从localStorage恢复 const saved = JSON.parse(localStorage.getItem("settings")); const restored = deserialize(AppSettings, saved);

场景三：复杂数据关系

class Author { @serializable(identifier()) id: string; @serializable name: string; } class Book { @serializable(identifier()) id: string; @serializable title: string; @serializable(reference(Author)) author: Author; @serializable(list(reference(Book))) relatedBooks: Book[]; }

📊 性能优化建议

1. 避免过度序列化

• 只序列化必要字段
• 使用optional()装饰可选字段
• 对敏感数据使用custom()进行加密

2. 缓存模型架构

Serializr会自动缓存模型架构，但你可以手动优化：

// 预创建模型架构以提高首次序列化性能 createModelSchema(User, { id: identifier(), name: primitive(), email: primitive() });

3. 批量操作优化

对于大量数据的序列化，考虑使用Web Workers或分批次处理。

🔧 调试技巧

1. 查看模型架构

const schema = getDefaultModelSchema(YourClass); console.log(schema);

2. 验证序列化结果

const json = serialize(yourObject); console.log("序列化结果:", JSON.stringify(json, null, 2)); const obj = deserialize(YourClass, json); console.log("反序列化对象:", obj);

3. 处理序列化错误

try { const result = deserialize(YourClass, invalidJson); } catch (error) { console.error("反序列化失败:", error.message); // 提供默认值或降级处理 }

🎉 总结与最佳实践

通过本文的学习，你已经掌握了Serializr三大核心装饰器的使用技巧。记住这些最佳实践：

1. 明确需求选择装饰器：根据数据结构复杂度选择合适的装饰器
2. 保持类型一致性：确保序列化和反序列化使用相同的模型架构
3. 合理使用继承：@subSchema让类继承的序列化变得简单
4. 性能与可读性平衡：在代码简洁性和性能之间找到平衡点

Serializr的装饰器系统为JavaScript/TypeScript开发者提供了一套强大而灵活的序列化解决方案。无论是简单的数据对象还是复杂的对象图，都能通过合适的装饰器组合轻松处理。

现在就开始在你的项目中尝试Serializr吧！你会发现，对象序列化从未如此简单和优雅。✨

💡小贴士：Serializr与MobX配合使用效果更佳，可以创建响应式的数据模型！

【免费下载链接】serializrSerialize and deserialize complex object graphs to and from JSON and Javascript classes项目地址: https://gitcode.com/gh_mirrors/se/serializr