大前端扫地僧之必备技能Zod

为什么需要Zod？

Zod作为一个现代的模式验证与类型推导工具，具有以下优势，使其成为前端进阶必备的工具：

• 与TypeScript无缝集成：Zod允许在定义模式的同时自动生成TypeScript类型，无需重复定义数据结构。
• 运行时验证：TypeScript只能在编译时检查类型，而Zod可以在运行时验证实际数据的正确性，避免潜在的错误。
• 轻量且直观：相比其他工具（如Yup和AJV），Zod的API更加简洁，无需学习复杂的JSON Schema。
• 功能强大：Zod支持嵌套结构、自定义验证、多种数据类型以及异步验证，几乎可以满足所有常见的验证需求。

Zod是什么？

Zod 是一个 TypeScript 优先的模式声明和验证库。它旨在以开发者友好的方式工作，目标是消除重复的类型声明。使用Zod，你只需声明一次验证器，Zod会自动推断出静态TypeScript类型，使得将简单类型组合成复杂数据结构变得容易。Zod具有以下特点：

• 零依赖：没有外部依赖，使得库更加轻量级。
• 适用于Node.js和现代浏览器：可以在多种环境中运行。
• 体积小：压缩后只有8kb，非常轻量。
• 不可变：方法（如.optional()）返回新实例，保证不可变性。
• 简洁、链式接口：提供简洁且易于链式调用的接口。
• 函数式方法：采用解析而非验证的方法。
• 也适用于纯JavaScript：即使不使用TypeScript，也可以使用Zod。

Zod如何使用呢？

1、基本数据

import { z } from 'zod';

const basicSchema = z.string();
console.log(basicSchema.parse('hello')); // hello
console.log(basicSchema.parse(123)); // ZodEror: Expected string, received number

原始数据类型如下：

// primitive values
z.string();
z.number();
z.bigint();
z.boolean();
z.date();
z.symbol();

// empty types
z.undefined();
z.null();
z.void(); // accepts undefined

// catch-all types
// allows any value
z.any();
z.unknown();

// never type
// allows no values
z.never();

2、对象数据

const objectSchema = z.object({
  name: z.string(),
  age: z.number(),
});
console.log(objectSchema.parse({ name: 'hello', age: 18 })); // 验证通过 { name: 'hello', age: 18 } 

3、数组数据

const arraySchema = z.array(z.string());
console.log(arraySchema.parse(['hello', 'world'])); // ['hello', 'world']
console.log(arraySchema.parse(['hello', 123])); // ZodError: Expected string, received number

4、枚举数据

const enumSchema = z.enum(['hello', 'world']);
console.log(enumSchema.parse('hello')); // hello
console.log(enumSchema.parse('hi')