2分钟理解Zod：TypeScript模式验证指南

想找一个在TypeScript中简单高效的数据验证方案吗？来了解一下Zod吧，这个革新数据验证方式的库。只需2分钟，你就能明白为什么Zod变得如此不可或缺！

为什么选择Zod？🎯

Zod是一个脱颖而出的验证库，具有以下特点：

• 直观简洁的语法
• 与TypeScript完美集成
• 自动类型推断
• 清晰且可自定义的错误消息

快速安装 ⚙️

bash
1npm install zod
2# 或
3yarn add zod

30秒掌握Zod基础 🚀

typescript
1import { z } from 'zod';
2
3// 定义简单模式
4const userSchema = z.object({
5  name: z.string().min(2, '名字至少需要2个字符'),
6  age: z.number().min(18, '用户必须年满18岁'),
7  email: z.string().email('邮箱格式无效'),
8});
9
10// 自动推断类型！
11type User = z.infer<typeof userSchema>;
12
13// 数据验证
14const validateUser = (data: unknown) => {
15  const result = userSchema.safeParse(data);
16  return result.success ? result.data : result.error.issues;
17};

高级功能 💪

条件验证

typescript
1const formSchema = z
2  .object({
3    type: z.enum(['individual', 'company']),
4    businessLicense: z.string().optional(),
5  })
6  .refine((data) => !(data.type === 'company' && !data.businessLicense), {
7    message: '公司类型必须提供营业执照号',
8  });

自动转换

typescript
1const dateSchema = z.string().transform((str) => new Date(str));
2const numberSchema = z.string().transform(Number);

最佳实践 🎓

1. 优先使用 safeParse 而不是 parse 以获得更优雅的错误处理：

typescript
1const result = userSchema.safeParse(data);
2if (!result.success) {
3  console.log(result.error.issues);
4  return;
5}
6// 安全地使用 result.data

2. 复用模式以提高可维护性：

typescript
1const addressSchema = z.object({
2  street: z.string(),
3  city: z.string(),
4  postCode: z.string().regex(/^\d{6}$/),
5});
6
7const userSchema = z.object({
8  // ...其他字段
9  address: addressSchema,
10});

常见用例 📋

API验证

typescript
1const apiResponseSchema = z.object({
2  status: z.number(),
3  data: z.array(userSchema),
4  metadata: z.record(z.string()),
5});
6
7async function fetchUsers() {
8  const response = await fetch('/api/users');
9  const data = await response.json();
10
11  const result = apiResponseSchema.safeParse(data);
12  if (!result.success) {
13    throw new Error('API响应无效');
14  }
15
16  return result.data;
17}

表单验证

typescript
1const loginSchema = z.object({
2  email: z.string().email(),
3  password: z.string().min(8),
4});
5
6function handleSubmit(formData: unknown) {
7  const result = loginSchema.safeParse(formData);
8  if (!result.success) {
9    // 显示错误
10    return;
11  }
12  // 处理验证后的数据
13}

深入学习 🎈

• 探索自定义验证
• 了解与React Hook Form的集成
• 使用Zod进行配置验证

总结 ✨

Zod大大简化了TypeScript中的数据验证，同时确保了类型安全。它的直观语法和灵活性使其成为每个TypeScript开发者的重要工具。

---

欢迎查看官方文档以深入了解Zod！