我深深感受到 TypeScript 已经远远不够用了!

开发 前端
TypeScript 能提供的也仅仅是静态类型提示,它提供不了运行时校验,就刚刚上面这两个例子,其实你硬要运行的话,TypeScript 也拦不住你,因为它就做不了运行时校验。

TypeScript 静态类型提示

说到类型校验,很多人都想到了 TypeScript,对的,其实 TypeScript 是挺有用的,它能给予我们静态类型提示:

图片

图片

运行时校验

但是其实,TypeScript 能提供的也仅仅是静态类型提示,它提供不了运行时校验,就刚刚上面这两个例子,其实你硬要运行的话,TypeScript 也拦不住你,因为它就做不了运行时校验。

图片

想要做校验,只能是我们自己写代码去手动去校验。

图片

思考

那么有没有办法可以同时兼顾 静态类型提示 和 运行时校验 呢?也就是,需要兼顾这两件事:

  • TypeScript 类型静态提示。
  • 运行时,根据 TypeScript 的类型进行校验。

答案是有的,近几年有一个库非常火爆,那就是 Zod。

Zod

代码示例来源:https://juejin.cn/post/7426923218952847412

Zod 的特点包括了

  • 类型安全: Zod提供了从运行时验证到静态类型推断的端到端类型安全。
  • 零依赖: Zod没有任何依赖项,这意味着它不会给你的项目增加额外的包袱。
  • 灵活性: Zod支持复杂的嵌套对象和数组模式,可以处理几乎任何数据结构。
  • 可扩展性: 你可以轻松地创建自定义验证器和转换器。
  • 性能: Zod经过优化,可以处理大型和复杂的数据结构,而不会影响性能。

基本用法

首先是基本类型的校验:

图片图片

接着是对象类型的校验:

图片图片

然后是数组的校验:

图片图片

高级用法

上面是 Zod 的基本用法,现在给大家介绍一些它的高级用法。

你可以根据条件去进行验证。

图片图片

递归校验:

图片

自定义验证器:

图片图片

Zod 在前端框架中的使用

其实现在有很多的组件库都是用了Zod 来进行表单检验,我们拿 React 来举例子。

图片图片图片

责任编辑:武晓燕 来源: 前端之神
相关推荐

2021-03-15 23:11:12

内存虚拟化技术

2012-03-15 15:09:47

iPad

2013-12-19 10:08:52

AWS服务器

2017-07-28 14:07:40

DevOps工具文化

2024-07-25 12:33:45

2023-02-17 08:00:00

应用安全首席信息官

2013-05-24 09:57:28

2019-11-15 10:41:10

Vim分屏终端

2011-05-20 10:12:11

webOSGeek

2016-07-06 11:41:42

ICT华为

2019-07-24 14:05:17

Redis内存集群

2022-08-01 10:00:47

AI趋势

2019-07-25 15:23:05

Redis电脑数据库

2022-10-20 10:29:00

元宇宙Meta虚拟

2023-06-13 14:40:15

2021-05-31 15:48:36

网络钓鱼黑客网络攻击

2017-03-23 11:24:26

Windows 10Windows系统盘

2013-10-23 14:28:30

点赞
收藏

51CTO技术栈公众号