TypeScript 靜態(tài)類型提示

說到類型校驗(yàn)，很多人都想到了 TypeScript，對(duì)的，其實(shí) TypeScript 是挺有用的，它能給予我們靜態(tài)類型提示：

運(yùn)行時(shí)校驗(yàn)

但是其實(shí)，TypeScript 能提供的也僅僅是靜態(tài)類型提示，它提供不了運(yùn)行時(shí)校驗(yàn)，就剛剛上面這兩個(gè)例子，其實(shí)你硬要運(yùn)行的話，TypeScript 也攔不住你，因?yàn)樗妥霾涣诉\(yùn)行時(shí)校驗(yàn)。

想要做校驗(yàn)，只能是我們自己寫代碼去手動(dòng)去校驗(yàn)。

思考

那么有沒有辦法可以同時(shí)兼顧 靜態(tài)類型提示 和 運(yùn)行時(shí)校驗(yàn) 呢？也就是，需要兼顧這兩件事：

• TypeScript 類型靜態(tài)提示。
• 運(yùn)行時(shí)，根據(jù) TypeScript 的類型進(jìn)行校驗(yàn)。

答案是有的，近幾年有一個(gè)庫非常火爆，那就是 Zod。

Zod

代碼示例來源：https://juejin.cn/post/7426923218952847412

Zod 的特點(diǎn)包括了

• 類型安全: Zod提供了從運(yùn)行時(shí)驗(yàn)證到靜態(tài)類型推斷的端到端類型安全。
• 零依賴: Zod沒有任何依賴項(xiàng),這意味著它不會(huì)給你的項(xiàng)目增加額外的包袱。
• 靈活性: Zod支持復(fù)雜的嵌套對(duì)象和數(shù)組模式,可以處理幾乎任何數(shù)據(jù)結(jié)構(gòu)。
• 可擴(kuò)展性: 你可以輕松地創(chuàng)建自定義驗(yàn)證器和轉(zhuǎn)換器。
• 性能: Zod經(jīng)過優(yōu)化,可以處理大型和復(fù)雜的數(shù)據(jù)結(jié)構(gòu),而不會(huì)影響性能。

基本用法

首先是基本類型的校驗(yàn)：

圖片

接著是對(duì)象類型的校驗(yàn)：

圖片

然后是數(shù)組的校驗(yàn)：

圖片

高級(jí)用法

上面是 Zod 的基本用法，現(xiàn)在給大家介紹一些它的高級(jí)用法。

你可以根據(jù)條件去進(jìn)行驗(yàn)證。

圖片

遞歸校驗(yàn)：

自定義驗(yàn)證器：

圖片

Zod 在前端框架中的使用

其實(shí)現(xiàn)在有很多的組件庫都是用了Zod 來進(jìn)行表單檢驗(yàn)，我們拿 React 來舉例子。

圖片