3个技巧解锁SuperJSON自定义类型扩展，让你的数据传输更安全高效

3个技巧解锁SuperJSON自定义类型扩展，让你的数据传输更安全高效

【免费下载链接】superjsonSafely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more.项目地址: https://gitcode.com/gh_mirrors/su/superjson

你是否遇到过这样的场景：在前后端数据交互时，Date对象变成了字符串，BigInt丢失了精度，Map和Set结构被破坏？这些JSON的天然限制让开发者不得不手动转换数据类型，既繁琐又容易出错。

今天，我将带你深入了解SuperJSON的自定义类型扩展功能，让你能够轻松处理任何复杂的数据类型，彻底告别手动转换的烦恼。

问题场景：当JSON遇上复杂数据类型

想象一下，你正在开发一个金融应用，需要处理精确的货币计算。你可能会使用Decimal.js来避免浮点数精度问题，但当数据需要在客户端和服务器之间传输时，问题就出现了：

• 金融数据精度丢失导致计算错误
• 日期对象被序列化为字符串，失去原生方法
• 自定义类实例被转换为普通对象
• 敏感信息无意中被序列化传输

💡技巧提示：JSON只能处理基本数据类型，对于Date、Map、Set、BigInt等复杂类型，会丢失其原型信息和方法。

解决方案：SuperJSON的自定义注册系统

SuperJSON通过两大核心系统来解决这些问题：自定义转换器注册和类注册系统。这就像给你的应用装备了"数据翻译官"，能够准确识别和转换各种数据类型。

自定义转换器：通用的数据类型适配器

自定义转换器是SuperJSON最灵活的部分，它可以处理任何你想要的类型。让我们看看它的工作原理：

export interface CustomTransfomer<I, O extends JSONValue> { name: string; isApplicable: (v: any) => v is I; serialize: (v: I) => O; deserialize: (v: O) => I; }

这个设计模式非常巧妙：isApplicable负责识别类型，serialize负责转换为JSON兼容格式，deserialize负责还原为原始类型。

类注册系统：面向对象的序列化控制

类注册系统专门处理类的序列化，它允许你精确控制哪些属性可以被序列化：

export class ClassRegistry extends Registry<Class> { private classToAllowedProps = new Map<Class, string[]>(); register(value: Class, options?: string | RegisterOptions): void { if (typeof options === 'object' && options.allowProps) { this.classToAllowedProps.set(value, options.allowProps); } }

🚀升级装备：现在你已经了解了SuperJSON的核心机制，让我们进入实战环节。

实战案例：为金融应用添加Decimal类型支持

动手时刻：让我们通过一个完整的例子，看看如何为Decimal.js类型添加支持。

import SuperJSON from 'superjson'; import { Decimal } from 'decimal.js'; // 注册Decimal类型转换器 SuperJSON.registerCustom<Decimal, string>( { name: 'decimal.js', isApplicable: (v): v is Decimal => Decimal.isDecimal(v), serialize: v => v.toJSON(), deserialize: v => new Decimal(v), } );

这个实现看似简单，但背后蕴含着强大的功能：

• 类型安全：通过TypeScript泛型确保类型一致性
• 精度保持：Decimal的精确计算特性在序列化过程中不会丢失
• 双向转换：确保序列化和反序列化的数据完全一致

💡技巧提示：在注册自定义类型时，确保serialize和deserialize是互逆操作。

类序列化的精确控制

在某些场景下，你可能希望控制类的哪些属性可以被序列化。比如用户类中可能包含密码等敏感信息：

class User { constructor(public name: string, public email: string, private password: string) {} } // 只允许序列化name和email属性 SuperJSON.registerClass(User, { allowProps: ['name', 'email'] );

避坑指南：自定义类型扩展的常见问题

如何避免循环引用问题

循环引用是序列化过程中的常见陷阱。当两个对象相互引用时，会导致无限递归：

class User { posts: Post[] = []; } class Post { author: User; } // 解决方案：使用allowProps限制序列化属性 SuperJSON.registerClass(User, { allowProps: ['name', 'email'] // 不包含posts );

性能优化技巧

处理大型对象时，性能是需要考虑的重要因素：

// 使用inPlace选项提升性能 const { json, meta } = SuperJSON.serialize(largeObject); const deserialized = SuperJSON.deserialize({ json, meta }, { inPlace: true });

💡技巧提示：inPlace: true选项可以显著提升大对象的处理性能，但前提是你确定可以安全地修改输入对象。

类型注册的最佳时机

确保你的自定义类型注册在应用启动时就完成：

// 在Next.js的_app.ts中 import SuperJSON from 'superjson'; import { Decimal } from 'decimal.js'; export default function App({ Component, pageProps }) { // 注册自定义类型 SuperJSON.registerCustom<Decimal, string>( { name: 'decimal.js', isApplicable: (v): v is Decimal => Decimal.isDecimal(v), serialize: v => v.toJSON(), deserialize: v => new Decimal(v), } ); return <Component {...pageProps} />; }

进阶挑战：构建完整的数据类型生态系统

现在你已经掌握了基础，让我们来挑战一个更复杂的场景：为整个项目构建统一的数据类型处理系统。

集中式类型注册管理

创建一个专门的配置文件来管理所有的自定义类型注册：

// types/superjson-config.ts import SuperJSON from 'superjson'; import { Decimal } from 'decimal.js'; import { Prisma } from '@prisma/client'; export function configureSuperJSON() { // 注册Decimal.js SuperJSON.registerCustom<Decimal, string>( { name: 'decimal.js', isApplicable: (v): v is Decimal => Decimal.isDecimal(v), serialize: v => v.toJSON(), deserialize: v => new Decimal(v), } ); // 注册Prisma Decimal（如果使用） SuperJSON.registerCustom<Prisma.Decimal, string>( { name: 'prisma.decimal', isApplicable: (v): v is Prisma.Decimal => Prisma.Decimal.isDecimal(v), serialize: v => v.toJSON(), deserialize: v => new Prisma.Decimal(v), } ); }

前后端一致性保障

为了确保前后端的数据类型处理一致，你可以在客户端和服务端都使用相同的配置：

// 在客户端入口文件 import { configureSuperJSON } from './types/superjson-config'; configureSuperJSON();

立即行动：你的自定义类型扩展计划

现在你已经了解了SuperJSON自定义类型扩展的全部要点，是时候开始行动了：

1. 识别需求：列出项目中所有需要特殊处理的数据类型
2. 设计转换器：为每个类型定义序列化和反序列化逻辑
3. 集中配置：创建统一的配置文件管理所有类型注册
4. 测试验证：确保序列化和反序列化的数据完全一致

通过这4个简单步骤，你就能为你的应用构建一个强大而可靠的数据类型处理系统。记住，好的工具应该让开发更简单，而不是更复杂。SuperJSON正是这样一个工具，它让你专注于业务逻辑，而不是数据转换的细节。

现在就开始你的SuperJSON自定义类型扩展之旅吧！你会发现，原来数据处理可以如此简单高效。

【免费下载链接】superjsonSafely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more.项目地址: https://gitcode.com/gh_mirrors/su/superjson