zod

阿超

发布于 2025-04-19 14:22:31

1810

人们因为能忘却，所以自己能渐渐的脱离了受过的苦痛，也因为能忘却，所以照样得再犯前人的错误。——鲁迅

探索 Zod：TypeScript-first 的模式验证库

在现代 JavaScript 和 TypeScript 开发中，数据验证是不可或缺的一部分。而 Zod，一个以 TypeScript 为中心的模式验证库，提供了简洁、强大的工具来解决这一问题。本文将带你了解 Zod 的核心功能、使用方法及其开发者友好的特性。

什么是 Zod？

Zod 是一个专为 TypeScript 设计的模式声明和验证库，旨在简化开发者的工作。它允许你定义模式（schema），并自动推断出 TypeScript 类型，同时对运行时数据进行验证。

Zod 的核心特点：

TypeScript-first：Zod 的设计完全围绕 TypeScript，能够利用其类型推断和静态检查功能。
零依赖：与其他库不同，Zod 是一个零依赖的轻量级库，体积仅为 8kb（minified + gzipped）。
函数式编程风格：Zod 提供了一种连贯的链式接口，支持函数式编程。
跨平台支持：支持 Node.js 和现代浏览器。
开发者友好：通过简洁的 API 和详细的错误提示，降低学习曲线并提高开发效率。

Zod 的功能不仅限于 JavaScript，也可以无缝集成到 TypeScript 项目中。

快速上手

安装

Zod 可通过多种包管理器安装：

123	npm install zod # npmyarn add zod # yarnpnpm add zod # pnpm

基础用法

定义一个简单的字符串模式：

12345678	import { z } from "zod";// 创建字符串模式const mySchema = z.string();// 验证数据mySchema.parse("hello"); // ✅ 返回 "hello"mySchema.parse(123); // ❌ 抛出 ZodError

创建对象模式

1234567	const userSchema = z.object({ username: z.string(), age: z.number().min(0),});// 验证对象userSchema.parse({ username: "Alice", age: 25 }); // ✅ 通过验证

安全解析

123	const result = mySchema.safeParse(123);console.log(result); // 输出：{ success: false, error: ZodError }

深入功能

Zod 提供了丰富的数据类型支持，包括：

基础类型：string、number、boolean 等
复杂类型：object、array、tuple、union
高级特性：递归类型、函数验证、Promise 验证等

函数验证

Zod 可用于验证函数的参数和返回值：

1234567	const addSchema = z.function() .args(z.number(), z.number()) .returns(z.number());const add = addSchema.implement((a, b) => a + b);console.log(add(1, 2)); // ✅ 输出 3

类型推断

Zod 自动推断 TypeScript 类型，避免冗余的类型声明：

1234567	const userSchema = z.object({ username: z.string(), age: z.number(),});type User = z.infer<typeof userSchema>;// 等价于 { username: string; age: number }

Zod 的生态系统

Zod 的生态系统非常丰富，支持与多种库无缝集成：

表单验证：React Hook Form、Formik、Vue 等。
API 工具：tRPC、express-zod-api。
文档生成：zod-to-json-schema、zod-to-openapi。

例如，与 React Hook Form 集成：

123456789101112131415161718192021222324

import { useForm } from "react-hook-form";import { z } from "zod";import { zodResolver } from "@hookform/resolvers/zod";const schema = z.object({ name: z.string(), age: z.number(),});const { register, handleSubmit } = useForm({ resolver: zodResolver(schema),});function App() { const onSubmit = (data) => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} /> <input type="number" {...register("age")} /> <button type="submit">提交</button> </form> );}