TypeScript zod 怎么用

打开网页时偶尔会看到“填写的手机号格式不对”，提交表单时反复因为“邮箱少了个@”被退回——这些小麻烦，本质上都是“输入的数据不符合要求”。在前端开发里，怎么让代码自动帮我们避开这类问题？TypeScript 加 zod 就是一套好用的组合方案，今天咱们就用生活化的例子讲明白它怎么用。

第一步：先搞懂两个核心角色

TypeScript 是咱们前端常用的“类型小助手”，它能帮你提前发现代码里的类型错误，比如你把数字当成字符串用，它会提前报错，但它的能力有个小局限——它只能在代码写的时候检查，没法验证“用户输入的真实数据”是不是符合规则，比如用户填的手机号是11位还是15位，它查不了。

zod 就是专门来补这个缺口的，它是一个“数据规则校验工具”，能给数据定明确的“规矩”，比如“手机号必须是11位数字”“年龄必须在0到120之间”，用户提交数据时，zod会自动检查有没有符合规矩，不符合就直接返回错误。举个例子，就像你订外卖时备注“少放辣、不要香菜”，商家（zod）会核对订单是不是符合你的要求，不符合就会提醒你改。

第二步：用 Zod 定简单数据的规矩

咱们从最基础的规则开始，先拿用户注册时的“昵称”和“年龄”试试。首先得先安装 zod，在终端里输入一行命令就行：npm install zod，装完就能用了。

然后咱们写代码，先导入 zod，再给昵称和年龄定规则：

首先定义昵称的规则：“必须是字符串，最少2个字符，最多10个字符”；年龄的规则：“必须是数字，而且得大于0、小于120”。用代码写出来就是：

`javascript

import { z } from 'zod';

// 定义用户注册的校验规则

const UserSchema = z.object({

nickname: z.string().min(2, '昵称最少2个字').max(10, '昵称最多10个字'),

age: z.number().gt(0, '年龄得大于0').lt(120, '年龄不能超过120岁')

});

`

这就相当于咱们给用户信息做了一张“规则检查表”，现在要检查一组数据是不是符合规则，直接用它校验就行。比如用户填的是{ nickname: '小明', age: 25 }，调用UserSchema.safeParse()，会返回一个“成功”的结果，说明数据合格；如果填的是{ nickname: '小', age: 150 }，就会返回“失败”，还会告诉你哪里错了：昵称太短、年龄超了上限。

第三步：校验复杂表单，结合 TypeScript 拿类型

刚才的例子是简单数据，实际开发里表单会有更多规则，比如注册时的“邮箱”“密码”，还得确保两次输入的密码一致。zod 完全能搞定，它内置了常用的校验规则，不用自己写重复逻辑，比如邮箱规则直接用z.string().email('邮箱格式不对')就行。

更厉害的是，zod 还能结合 TypeScript，自动生成对应的类型，不用咱们自己重复定义类型。比如刚才的 UserSchema，只要用type User = z.infer<typeof UserSchema>，就能自动得到和规则对应的类型，以后用这个类型时，就和普通 TypeScript 类型一样，IDE 还会自动补全提示，不用自己手动写类型，省了不少事。

比如咱们写一个处理表单提交的函数，参数直接用刚才生成的 User 类型，输入不符合规则的话，函数直接报错，根本不会走到后续的逻辑里，就像餐厅只让符合“穿正装”规矩的客人进，不符合的直接拦在门外，从根源上减少了后续的错误。

第四步：避开常见的小坑

用 zod 时，有两个小细节得注意。第一个是，用户输入的内容如果是空的，默认会被当成 undefined，比如昵称没填，zod 的 string 校验会直接报错，要是想允许空值，得加上.optional()或者.nullable()；第二个是，数字类型的校验得注意，用户输入的数字如果是字符串形式（比如表单里的年龄是用户输入的，默认是字符串），得先转成数字再校验，不然会出问题。

最后总结一下，TypeScript 负责帮咱们在代码阶段提前排查类型错误，zod 负责校验实际运行时的数据是否符合规则，两者搭配用，就能轻松搞定前端里的数据校验问题，不用再手动写一堆判断逻辑，代码更干净，也不容易出错。