Zod JavaScript

2025 年 3 月 3 日 | 阅读 6 分钟

什么是 Zod JavaScript?

Zod 是一个 JavaScript 和 TypeScript 库,它帮助开发人员定义数据模式。在这种情况下,模式是描述数据形状和约束的蓝图。Zod 帮助开发人员简洁地定义这些模式,然后使用它们在运行时验证数据。

简而言之,Zod 是一个用于 JavaScript 的模式声明和验证。借助 Zod,开发人员可以为任何数据设计模式,包括原始数据类型对象数组等。

为什么我们需要在 JavaScript 中使用 Zod?

JavaScript 中,Zod 为 JavaScript 提供了运行时模式验证。借助模式验证,我们可以确认数据符合开发人员定义的标准。

当我们在表单中获取用户数据、将数据发送到 API 等情况时,这非常有用。通常,JavaScript 仅在编译时提供模式验证,而 Zod 在运行时提供验证。

运行时验证

在 JavaScript 中,Zod 不仅仅是关于类型,它还在运行时主动验证数据。当我们处理外部来源(如用户输入、API 响应或数据库条目)时,这一点很重要,因为这些情况下您无法完全信任传入的数据。

开发者体验

它因其开发人员友好的语法而受到称赞。它帮助我们创建感觉直观自然的模式,从而生成更清晰、更易于维护的代码。

在 JavaScript 中安装 Zod

要将 Zod 安装到您的项目中,您可以使用 npm 或 yarn 安装它

如果您正在使用 yarn,请使用以下命令

安装后,您可以导入 Zod 并开始定义您的模式。

如上例所示,我们定义了一个简单的用户对象模式,指定它应该有一个用户名、年龄和电子邮件,分别是字符串、数字和电子邮件格式的字符串。

Zod 在 JavaScript 中的特性

Zod 中使用了一些特性。一些特性如下:

静态类型

在 JavaScript 中,Zod 构建在 Typescript 之上,因此我们可以利用 Typescript 的静态类型系统,它提供了编译时保证,确保您的代码以正确的方式处理数据。通过使用静态类型,我们可以通过在开发过程的早期捕获错误来节省大量时间和麻烦。

模式验证

借助 JavaScript 中的 Zod,可以轻松定义复杂的S数据模式,其中包括各种模式类型,如字符串、数字、布尔值、数组、对象等。我们还可以定义自定义模式和验证器以适应我们的特定用例。

自定义错误消息

在 JavaScript 中,Zod 提供了一个用于自定义错误消息的 API。它允许您提供更具信息性的错误消息,帮助最终用户了解验证过程中出了什么问题。

嵌套

在 JavaScript 中,Zod 允许模式嵌套,这使得构建复杂的验证逻辑变得容易。它的功能在处理嵌套对象和数组时特别有用。

异步验证

它还提供了一个用于执行异步验证的 API。它允许您验证需要异步操作(例如网络请求)的数据。您无需等待数据返回即可对其进行验证。

轻量级

在 JavaScript 中,Zod 是一个轻量级库,API 表面小。它易于学习和使用。

如何避免错误?

在 JavaScript 中,如果您想在解析失败时避免错误,我们需要使用 safeParse 函数。如果字符串解析成功,它将返回状态 400 和一个 success 属性设置为 true 的对象。否则,它将设置为 false。在后一种情况下,该函数还会返回一个包含错误对象的 error 属性。

示例

让我们举个例子,我们将使用 safeParse 函数。让我们运行代码看看输出

如果字符串解析成功,此代码将打印“Valid Data”和数据。否则,它将打印“Invalid Data”和错误消息。

为什么我们在 JavaScript 中使用 Zod?

我们在 JavaScript 中使用 Zod 的原因有一些。一些原因如下:

类型安全

在 JavaScript 中,Zod 与 JavaScript 无缝集成,这有助于我们定义强类型模式。它确保您的数据符合预期结构,从而降低运行时错误的风险。

易用性

在 JavaScript 中,Zod 直观的 API 使定义和验证模式变得容易。它提供了一种易于阅读和编写的简单语法,即使对于刚接触 JavaScript 或模式验证的开发人员也易于访问。

全面的验证

在 JavaScript 中,Zod 开箱即用地支持各种数据类型和验证规则,从简单的原始类型(如字符串和数字)到复杂的嵌套对象和数组。

可扩展性

它允许我们创建自定义验证逻辑,使您能够根据特定需求定制验证过程。

安全性

在 JavaScript 中,通过验证传入数据,Zod 有助于防止恶意负载被处理。这对于保护您的应用程序免受常见的安全威胁(如 SQL 注入和其他形式的基于数据的攻击)至关重要。

集成

Zod 可以轻松与各种框架和库集成,包括 React、Express 等,这使其成为不同类型项目的多功能选择。

在后端和前端使用 Zod

在典型的全栈应用程序中,我们通常需要在前端和后端验证相同的数据。为了避免重复并确保一致性,最佳实践是在可以在两个环境中使用的共享包中定义您的 Zod 模式。借助这种方法,我们不仅减少了代码重复,而且还确保客户端和服务器在数据结构上达成一致。

创建共享 Zod 模式包

让我们看看如何创建一个共享的 Zod 模式包,它可以发布到 npm 并在您的前端和后端项目中使用。

设置项目

首先,您需要为您的共享包创建一个新目录并使用 npm 对其进行初始化

安装 Zod

现在,将 Zod 安装为依赖项

定义您的模式

创建一个 schema 目录并在文件中定义您的 Zod 模式,例如 userSchema.ts

构建和发布包

更新您的 package.json 以包含必要的构建脚本并准备发布包。您可以使用 tsc 等工具编译您的 typescript 代码

添加 tsconfig.json 文件以配置 TypeScript

现在,构建并发布包

使用共享模式包

随着您的共享模式包发布到 npm,我们现在可以在您的前端和后端项目中安装和使用它。

在前端

安装共享模式包

在将数据发送到后端之前,使用模式验证数据

在后端

安装共享模式包

使用模式验证来自前端的传入数据

通过在前端和后端定义和共享您的 Zod 模式,我们需要确保在每个步骤中都对数据进行一致验证。这不仅提高了代码质量,还通过防止无效或恶意数据被服务器处理来增强安全性。