阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

小編精選 - 技術文章翻譯 · 08月22日

前端開發：將 Zod 與 TypeScript 結合使用

如果您正在建立前端應用程式，您可能會使用資料。無論您是從 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

這對於標準化資料或將其轉換為不同的格式非常有用。