Zod的学习, 非技术分享

什么是Zod

Zod 是一个 帮助Ts的使用者们在Ts的编写和运行时，进行类型的推断和校验的库，极大的维护了Ts类型安全，0外部依赖， 轻巧，十分流行。

Zod的简单用法

下面是在NuxtContent里面看见的Zod的用法，今天看文档的时候看见了Zod，发现不会使用于是就学习了下

// 代码
      schema: z.object({
        // Hero 区: CTA 按钮组 + 跑马灯图片组
        hero: z.object({
          links: z.array(createButtonSchema()),
          images: z.array(createImageSchema())
        }),

Zod的用法很简单，简单到把上面的代码翻译一遍给你听你就知道他应该如何去使用了

• schema必须是一个对象类型，下面必须要有hero属性
• hero属性必须是一个对象，必须要有links和images属性
• links必须是一个数组，并且数组内的元素类型必须是creatButtonSchema() 这个方法的返回值类型，或者说通过这个返回值的校验（这个方法名的后缀是Schema其实从侧面说明了，这个方法的返回值也是一个z。object约束的对象）
• images跟links同理 对吧，就是一看就会，一用也会（大概？）。然后你可以使用parse() 去验证你的数据，好比这样schema.parse(data)。如果在运行的时候parse的校验没有通过，那么会直接报错，而Ts只有当你使用这种错误数据类型的时候才会报错（比如你在String类型上使用了toFixed方法），这样也说明了他比Ts更加的安全，注重运行的数据安全。

如果你不希望他在运行时报错，你可以使用safeParse(使用这个api往往表示你希望数据是正确的)，方法会返回一个对象：

// 代码
{
  success:false,
  error:ZodError
}

如果数据正确则会返回这样的对象：

// 代码
{
  success:true,
  data:{
    name:"Tom",
    age:18
  }
}

在使用Ts的前端开发中，你想要去校验一个表单数据，不需要先interface 再去写校验数据逻辑了， 直接可以使用Zod去规定一个schema， 然后使用parse去验证，或者使用type register = z.infer直接生成一个interface，而且还有校验的规则。

// 代码
const RegisterSchema=z.object({

 username:z.string(),

 age:z.number()

})


type RegisterForm = z.infer<typeof RegisterSchema>

总结

Zod的出现给运行时候的Ts代码套上一层安全的外壳，也简便了一些基础的校验规则，更多特性等有需求的时候再看吧。