网站首页 > 技术文章 正文
大家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
什么是 Zod
TypeScript-first schema validation with static type inference
Zod 是一个 TypeScript 优先的 schema 声明和验证库,支持从简单的字符串到复杂的嵌套对象。Zod 的设计尽可能方便开发人员使用,目标是消除重复的类型声明。使用 Zod,开发者只需声明一次验证器,Zod 就会自动推断静态 TypeScript 类型,从而简化简单类型组合成复杂的数据结构的过程。
Zod 的特点包括:
- 零依赖性、适用于 Node.js 和所有现代浏览器
- 体积微小:8kb 最小化 + 压缩
- 不可变:方法(例如 .optional())返回一个新实例,简洁、可链接的接口
- 函数式方法:解析,不验证
- 同样适用于纯 JavaScript
目前 Zod 在 Github 通过 MIT 协议开源,有超过 31.6k 的 star、1.1k 的 fork、代码贡献者 300+、妥妥的前端优质开源项目。
如何使用 Zod
Zod 支持 TypeScript 4.5+,同时开发者必须在 tsconfig.json 中启用严 schema,这也是所有 TypeScript 项目的最佳实践。
// tsconfig.json
{
// ...
"compilerOptions": {
// ...
"strict": true
}
}
然后可以通过下面命令安装:
npm install zod # npm
yarn add zod # yarn
bun add zod # bun
pnpm add zod # pnpm
import {z} from "https://deno.land/x/zod/mod.ts";
// deno
下面是 Zod 的简单示例:
import {z} from "zod";
// creating a schema for strings
const mySchema = z.string();
// parsing
mySchema.parse("tuna"); // => "tuna"
mySchema.parse(12); // => throws ZodError
// "safe" parsing (doesn't throw error if validation fails)
mySchema.safeParse("tuna"); // => { success: true; data: "tuna" }
mySchema.safeParse(12); // => { success: false; error: ZodError }
下面是对 Object 进行验证的示例:
import {z} from "zod";
const User = z.object({
username: z.string(),
});
User.parse({username: "Ludwig"});
// extract the inferred type
type User = z.infer<typeof User>;
// {username: string}
Zod 枚举是定义和验证枚举的推荐方法。但是,如果开发者需要针对第三方库中的枚举进行验证(或者您不想重写现有枚举),可以使用 z.nativeEnum()。
enum Fruits {
Apple,
Banana,
}
const FruitEnum = z.nativeEnum(Fruits);
type FruitEnum = z.infer<typeof FruitEnum>; // Fruits
FruitEnum.parse(Fruits.Apple); // passes
FruitEnum.parse(Fruits.Banana); // passes
FruitEnum.parse(0); // passes
FruitEnum.parse(1); // passes
FruitEnum.parse(3); // fails
开发者还可以使用 .extend 方法向对象 schema 添加其他字段:
const DogWithBreed = Dog.extend({
breed: z.string(),
});
默认情况下,Zod 对象 schema 会在解析过程中剔除无法识别的键,开发者可以使用 .strict() 禁止未知密钥。如果输入中有任何未知的键,Zod 将抛出错误。
const person = z
.object({
name: z.string(),
})
.strict();
person.parse({
name: "bob dylan",
extraKey: 61,
});
// => throws ZodError
在错误处理方面,Zod也足够优秀。Zod 提供了一个 Error 的子类,称为 ZodError, ZodErrors 包含一个 issues 数组,其中包含有关验证问题的详细信息:
const result = z
.object({
name: z.string(),
})
.safeParse({ name: 12 });
if (!result.success) {
result.error.issues;
/* [
{
"code": "invalid_type",
"expected": "string",
"received": "number",
"path": [ "name" ],
"message": "Expected string, received number"
}
] */
}
更多关于 Zod 的用法和示例可以参考文末资料,本文不再过多展开。
参考资料
https://zod.dev/?id=introduction
https://zod.dev/?id=requirements
https://medium.com/@xsankalp13/zod-simplifying-validation-in-typescript-3486aeb402d8
https://isamatov.com/typescript-schema-validation-with-zod/
猜你喜欢
- 2025-01-10 如何写好产品需求文档(PRD)
- 2025-01-10 产品思维:产品内核与快速验证
- 2025-01-10 React前端权限管理思路
- 2025-01-10 SpringBoot接口 - 如何优雅的对参数进行校验?
- 2025-01-10 确保数据安全!使用Spring Boot 实现强大的API输入验证
- 2025-01-10 揭秘前端滑块验证技术
- 2025-01-10 SpringBoot数据校验与优雅处理详解
- 2025-01-10 前端开发必备神器:9个测试网站让你告别调试烦恼
- 2025-01-10 SpringBoot如何优雅的进行参数校验(一)
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)