使用 Zod 和 TypeScript：前端开发人员指南

如果您正在构建前端应用程序，那么您很可能需要处理数据。无论您是从 API 获取数据、处理表单提交还是管理状态，您都需要确保所处理的数据有效。Zod，您的新好朋友。在本文中，我们将探讨如何将这个强大的库与 TypeScript 结合使用，以验证前端应用程序中的数据。

Zod 是什么？

Zod 是一个 TypeScript 优先的模式声明和验证库。它允许您使用模式定义数据的结构，并根据该模式验证数据。它设计为易于使用、类型安全且性能卓越，是确保应用程序中数据有效且一致的强大工具。想象一下，您可以少写一些样板代码，让这个库来处理繁重的数据验证工作。

安装 Zod

要求

• TypeScript 4.5+！

• strict您必须在 中启用模式tsconfig.json。这是所有 TypeScript 项目的最佳实践。
  

// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strict": true
  }
}

首先，使用 npm 或 yarn 安装库：

npm install zod

或者如果你使用纱线：

yarn add zod

安装后，您可以开始在 TypeScript 文件中导入库并利用其强大的功能。

理解原语

该库的核心是原始类型。这些是可用于定义数据形状的基本构建块。该库提供了一系列原始类型，包括string、number、boolean、null和undefined。您可以使用这些类型来定义数据的结构并验证其是否符合您的预期。

细绳

字符串类型表示字符串值。你可以使用它来验证某个值是否为字符串：

import { z } from "zod";

const stringSchema = z.string();

您还可以强制执行各种约束，例如最小和最大长度或特定模式：

const usernameSchema = z.string().min(3).max(20);
const emailSchema = z.string().email();

数字

定义数字同样简单：

const numberSchema = z.number().int().positive();

这确保该值是一个整数并且为正数。

布尔值

毫不奇怪，布尔值甚至更简单：

const booleanSchema = z.boolean();

数组

该库使数组的使用变得轻而易举：

const stringArraySchema = z.array(z.string());

这将为字符串数组创建一个模式。

对象

创建复杂的嵌套对象是该库的真正亮点。定义对象模式的方法如下：

const userSchema = z.object({
  username: z.string().min(3),
  age: z.number().positive(),
  email: z.string().email(),
});

使用此模式，您可以轻松验证用户数据。

工会

您还可以定义不同类型的联合：

const stringOrNumberSchema = z.union([z.string(), z.number()]);

该模式允许值为字符串或数字。

交叉路口

交叉点允许您组合多个模式：

const userSchema = z.object({
  username: z.string().min(3),
  age: z.number().positive(),
});

const emailSchema = z.object({
  email: z.string().email(),
});

const userWithEmailSchema = z.intersection([userSchema, emailSchema]);

该模式确保数据与用户和电子邮件模式匹配。

这只是库中原始类型的简单示例。您可以用各种方式组合它们，以创建与数据结构匹配的复杂模式。

指南和概念

那么，如何在实际应用中使用这些模式呢？让我们来看一些实用的指南和概念。

模式验证

定义好架构后，即可使用它来验证数据。该库提供了一种parse可用于验证和解析数据的方法：

function createUser(user: unknown) {
  userSchema.parse(user);
  // If the function gets here, the validation is successful
}

如果数据与模式不匹配，库将抛出错误并提供有关出错原因的详细信息。

可选且可为空

您可以在架构中定义optional和字段：nullable

const userSchema = z.object({
  username: z.string().min(3),
  age: z.number().positive().optional(),
  email: z.string().email().nullable(),
});

方法optional允许省略字段，而nullable方法允许字段为null。

处理错误

该库的错误处理功能全面且对开发人员友好。您可以捕获 parse 抛出的错误，也可以使用 safeParse 更优雅地处理它：

const result = userSchema.safeParse(userInput);

if (!result.success) {
  console.error(result.error.errors);
}

这样，您就可以记录错误并向用户提供反馈。错误消息详细且信息丰富，可以轻松查明问题所在。

变换

该库允许您在验证过程中转换数据。您可以使用该transform方法在验证数据之前将函数应用于数据：

const numberStringSchema = z.string().transform(val => parseFloat(val));

const val = numberStringSchema.parse("123.45"); // val will be 123.45 as number

这对于规范化数据或将其转换为不同的格式很有用。

为什么要使用这个库？

这个库并不是目前唯一的模式验证工具。它与 Joi 或 Yup 等工具相比如何？

TypeScript-First

最引人注目的功能之一是其 TypeScript 优先的理念。虽然其他库（例如 Yup 和 Joi）在构建时会考虑 TypeScript 支持，但这个库在构建时就考虑到了 TypeScript，确保了类型安全性和一致性。

易于使用

与 Joi 相比，这个库的 API 更加直观。无需再费力猜测方法名称或参数；它直观易用，对开发者友好。

捆绑包大小

对于关心 bundle 大小的前端开发者来说，它比 Joi 更有优势。该库轻量级，易于 tree-shaking。

验证和转换

Yup 以其强大的验证和转换功能而闻名，但这个库正在迅速迎头赶上。凭借其可链接的 API 和直观的方法，它正在成为许多开发人员的首选。

结论

这个库功能强大，用途广泛，让数据验证变得轻而易举。通过将其与 TypeScript 结合使用，您可以确保前端应用程序的健壮性、类型安全性和高性能。无论您要验证表单数据、API 响应还是状态更新，此工具都能满足您的需求。无论是简单的基元类型还是复杂的嵌套对象，它都能处理。

本文只是粗略地介绍了这个库的功能。建议您仔细阅读文档，并尝试不同的架构，看看它如何帮助您构建更好的前端应用程序。拥抱类型安全数据验证的强大功能，让这个库简化您的开发工作流程。

编码愉快！