如果您正在建立前端應用程式，您可能會使用資料。無論您是從 API 取得資料、處理表單提交還是管理狀態，您都需要確保您正在使用的資料有效。Zod 登場，你最好的新朋友。在本文中，我們將探討如何將這個強大的函式庫與 TypeScript 結合使用來驗證前端應用程式中的資料。
Zod 是什麼？
Zod 是一個 TypeScript 優先的模式宣告和驗證函式庫。它允許您使用架構定義資料的形狀，並根據該架構驗證該資料。它被設計為易於使用、類型安全且高效能，使其成為確保應用程式中的資料有效且一致的絕佳工具。想像一下，編寫更少的樣板程式碼並讓這個程式庫處理資料驗證的繁重工作。
安裝Zod
要求
-
TypeScript 4.5+！
-
您必須在
tsconfig.json中啟用strict模式。這是所有 TypeScript 專案的最佳實務。
// tsconfig.json
{
// ...
"compilerOptions": {
// ...
"strict": true
}
}首先，使用npm或yarn安裝庫：
npm install zod或者，如果您使用的是紗線：
yarn add zod安裝後，您可以開始在 TypeScript 檔案中匯入該程式庫並利用其強大的功能。
理解原語
該庫的核心是原始類型。這些是可用於定義資料形狀的基本建置塊。該程式庫提供了一系列基本類型，包括string 、 number 、 boolean 、 null和undefined 。您可以使用這些類型來定義資料結構並驗證它是否符合您的期望。
字串
字串類型表示字串值。您可以使用它來驗證值是否是字串：
import { z } from "zod";
const stringSchema = z.string();您也可以強制執行各種約束，例如最小和最大長度或特定模式：
const usernameSchema = z.string().min(3).max(20);
const emailSchema = z.string().email();數字
定義數字同樣簡單：
const numberSchema = z.number().int().positive();這可確保該值是正整數。
布林值
不出所料，布林值更加簡單：
const booleanSchema = z.boolean();陣列
該庫使陣列的使用變得輕而易舉：
const stringArraySchema = z.array(z.string());這將為字串陣列建立一個架構。
物件
建立複雜的嵌套物件是該庫真正的亮點。以下是定義物件模式的方法：
const userSchema = z.object({
username: z.string().min(3),
age: z.number().positive(),
email: z.string().email(),
});使用此架構，您可以輕鬆驗證使用者資料。
聯集
您也可以定義不同類型的聯集：
const stringOrNumberSchema = z.union([z.string(), z.number()]);此架構允許值是字串或數字。
交集
交集可讓您組合多個模式：
const userSchema = z.object({
username: z.string().min(3),
age: z.number().positive(),
});
const emailSchema = z.object({
email: z.string().email(),
});
const userWithEmailSchema = z.intersection([userSchema, emailSchema]);此架構可確保資料與使用者和電子郵件架構相符。
這只是您可以使用庫的原始類型執行的操作的一個嘗試。您可以透過多種方式組合它們來建立與資料結構相符的複雜模式。
指南和概念
那麼，如何在實際應用程式中使用這些模式呢？讓我們來看一些實用指南和概念。
模式驗證
定義架構後，您可以使用它來驗證資料。該函式庫提供了一個parse方法，可用於驗證和解析資料：
function createUser(user: unknown) {
userSchema.parse(user);
// If the function gets here, the validation is successful
}如果資料與架構不匹配，則庫將拋出錯誤，並提供有關錯誤原因的詳細資訊。
可選且可為空
您可以在架構中定義optional和nullable欄位：
const userSchema = z.object({
username: z.string().min(3),
age: z.number().positive().optional(),
email: z.string().email().nullable(),
});optional方法允許省略字段，而nullable方法允許字段為null 。
處理錯誤
該庫的錯誤處理非常全面且對開發人員友好。您可以捕捉 parse 引發的錯誤，也可以使用 safeParse 更優雅地處理它：
const result = userSchema.safeParse(userInput);
if (!result.success) {
console.error(result.error.errors);
}這樣，您可以記錄錯誤並向使用者提供回饋。錯誤訊息詳細且資訊豐富，可以輕鬆找出問題。
轉換
該庫允許您在驗證過程中轉換資料。您可以使用transform方法在驗證資料之前將函數應用於資料：
const numberStringSchema = z.string().transform(val => parseFloat(val));
const val = numberStringSchema.parse("123.45"); // val will be 123.45 as number這對於標準化資料或將其轉換為不同的格式非常有用。
為什麼要使用這個函式庫？
該程式庫並不是唯一的模式驗證工具。它與 Joi 或 Yup 等其他產品相比如何？
TypeScript優先
最引人注目的功能之一是其 TypeScript 優先的方法。雖然 Yup 和 Joi 等其他庫事後才加入 TypeScript 支持，但這個庫是在建置時考慮到 TypeScript，確保類型安全和一致性。
易於使用
與 Joi 相比，該程式庫的 API 更加直觀。不再需要事後猜測方法名稱或參數；它簡單明了並且對開發人員友好。
bundle size
對於關心套件大小的前端開發人員來說，它比 Joi 更有優勢。該庫是輕量級的並且易於進行tree-shake。
驗證和轉換
是的，以其強大的驗證和轉換功能而聞名，但這個庫正在快速追趕。憑藉其可連結的 API 和直觀的方法，它正在成為許多開發人員的首選。
結論
該程式庫是一個功能強大且多功能的工具，使資料驗證變得輕而易舉。透過將其與 TypeScript 結合，您可以確保您的前端應用程式健壯、類型安全且高效能。無論您是驗證表單資料、API 回應還是狀態更新，此工具都能滿足您的需求。無論是簡單的基元還是複雜的巢狀物件，它都可以處理。
在本文中，我們僅觸及了該庫功能的皮毛。我鼓勵您探索文件並嘗試不同的模式，看看它如何幫助您建立更好的前端應用程式。利用類型安全資料驗證的強大功能，讓該程式庫簡化您的開發工作流程。
快樂編碼！
原文出處：https://dev.to/codeparrot/using-zod-with-typescript-a-guide-for-frontend-developers-3hfm
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式