TypeScript 靜態類型提示

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

運行時校驗

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

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

思考

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

• TypeScript 類型靜態提示。
• 運行時，根據 TypeScript 的類型進行校驗。

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

Zod

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

Zod 的特點包括了

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

基本用法

首先是基本類型的校驗：

圖片

接著是對象類型的校驗：

圖片

然后是數組的校驗：

圖片

高級用法

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

你可以根據條件去進行驗證。

圖片

遞歸校驗：

自定義驗證器：

圖片

Zod 在前端框架中的使用

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

圖片