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

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

運行時校驗

但是其實，TypeScript 能提供的也僅僅是靜態(tài)類型提示，它提供不了運行時校驗，就剛剛上面這兩個例子，其實你硬要運行的話，TypeScript 也攔不住你，因為它就做不了運行時校驗。

想要做校驗，只能是我們自己寫代碼去手動去校驗。

思考

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

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

答案是有的，近幾年有一個庫非?；鸨?，那就是 Zod。

Zod

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

Zod 的特點包括了

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

基本用法

首先是基本類型的校驗：

圖片

接著是對象類型的校驗：

圖片

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

圖片

高級用法

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

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

圖片

遞歸校驗：

自定義驗證器：

圖片

Zod 在前端框架中的使用

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

圖片