Zod進(jìn)行TypeScript類型驗(yàn)證使用詳解
引言
這篇文章將描述如何使用Zod 為您的項(xiàng)目設(shè)置類型驗(yàn)證。Zod 是一個(gè)用于類型聲明和驗(yàn)證的開(kāi)源 TypeScript 庫(kù)。我們將研究為什么使用 Zod 進(jìn)行類型驗(yàn)證,提供如何使用它的示例,并將其與其他庫(kù)進(jìn)行比較。
什么是類型驗(yàn)證,為什么需要它?
類型驗(yàn)證是驗(yàn)證數(shù)據(jù)結(jié)構(gòu)是否符合特定類型的過(guò)程。您可以使用它來(lái)確保輸入數(shù)據(jù)的有效性,以及記錄和執(zhí)行代碼的數(shù)據(jù)結(jié)構(gòu)。
使用類型驗(yàn)證有兩個(gè)主要好處:
- 運(yùn)行時(shí)的數(shù)據(jù)完整性:確保數(shù)據(jù)以正確的格式輸入您的系統(tǒng)有助于避免錯(cuò)誤并保持?jǐn)?shù)據(jù)一致性。雖然 TypeScript 可以幫助您在編譯時(shí)確保類型安全,但當(dāng)您處理來(lái)自未知數(shù)據(jù)(例如服務(wù)器或用戶輸入)的數(shù)據(jù)時(shí),類型驗(yàn)證在運(yùn)行時(shí)會(huì)大放異彩。
- 文檔:一個(gè)好的類型驗(yàn)證庫(kù)將為您使用的數(shù)據(jù)結(jié)構(gòu)提供準(zhǔn)確的類型定義。類型定義可用于為您的項(xiàng)目生成靜態(tài)文檔。
為什么要使用zod?
雖然有許多 TypeScript 類型校驗(yàn)庫(kù),但個(gè)人認(rèn)為 Zod 是比較好的之一。在為您的項(xiàng)目選擇庫(kù)時(shí),除了其功能集外,您還應(yīng)考慮其實(shí)現(xiàn)細(xì)節(jié)。
- Zod 具有零依賴性,這意味著您可以在沒(méi)有任何其他庫(kù)的情況下安裝和使用 Zod,它將幫助您保持更小的包大小。
- Zod 適用于 Node.js 和所有主流瀏覽器(包括 IE 11)。這使其成為需要支持各種平臺(tái)的項(xiàng)目的不錯(cuò)選擇。
- Zod 被設(shè)計(jì)為 TypeScript 優(yōu)先,這意味著該庫(kù)將自動(dòng)為您的數(shù)據(jù)結(jié)構(gòu)推斷靜態(tài) TypeScript 類型。這消除了兩次聲明類型的需要——一次在 Zod 中,一次在 TypeScript 中。它將為您節(jié)省大量輸入,并幫助您保持代碼更改同步。
- Zod 的 API 簡(jiǎn)潔且可鏈接。這使得創(chuàng)建復(fù)雜的數(shù)據(jù)類型變得容易。您還可以輕松地將更簡(jiǎn)單的類型組合成更復(fù)雜的數(shù)據(jù)類型。
使用 Zod 進(jìn)行類型驗(yàn)證的示例
Primitives
讓我們看看如何驗(yàn)證字符串。假設(shè)我們要驗(yàn)證用戶輸入的密碼。我們希望密碼是一個(gè)非空字符串,長(zhǎng)度至少為 8 個(gè)字符,最多為 32 個(gè)字符:
import { z } from "zod";
const stringSchema = z.string().nonempty().min(8).max(32);
stringSchema.parse("");
stringSchema.parse(""); // throws an exception
stringSchema.parse("I am a valid password"); // returns "I am a valid password"
當(dāng)你運(yùn)行上面的代碼時(shí),你會(huì)看到 parse 方法拋出了一個(gè)異常。異常將包含一個(gè)對(duì)象數(shù)組,其中包含ZodError錯(cuò)誤的詳細(xì)描述:
[
{
"code": "too_small",
"minimum": 1,
"type": "string",
"inclusive": true,
"message": "Should be at least 1 characters",
"path": []
},
{
"code": "too_small",
"minimum": 8,
"type": "string",
"inclusive": true,
"message": "Should be at least 8 characters",
"path": []
}
]
當(dāng)您嘗試解析有效字符串時(shí),parse 將簡(jiǎn)單地返回其值。
對(duì)象
現(xiàn)在讓我們繼續(xù)討論對(duì)象。Zod 對(duì)驗(yàn)證嵌套對(duì)象結(jié)構(gòu)具有強(qiáng)大的支持。
讓我們創(chuàng)建一個(gè)類型來(lái)驗(yàn)證用戶對(duì)象。它將包含以下字段:
- 姓名
- 電子郵件
- 電話號(hào)碼
要聲明類型,我們使用z.object() 方法:
import { z } from "zod";
const User = z.object({
email: z.string().email(),
name: z.string(),
phoneNumber: z.number()
});
讓我們嘗試根據(jù)我們剛剛創(chuàng)建的類型驗(yàn)證示例對(duì)象:
const result = User.parse({
email: "hi@sample.com",
name: "Hello World"
});
該parse方法將返回一個(gè)包含解析結(jié)果的對(duì)象。由于我們忘記在示例中提供該phoneNumber字段,Zod 將拋出異常,并包含以下錯(cuò)誤數(shù)組:
[
{
"code": "invalid_type",
"expected": "number",
"received": "undefined",
"inclusive": true,
"message": "Required"
"path": ["phoneNumber"]
}
]
類型推斷
我們還可以從對(duì)象中推斷出類型。這是您可以免費(fèi)獲取屬性的類型定義并在您的代碼中使用它們的部分:
type UserType = z.infer<typeof User>;
組合類型
Zod 讓您可以輕松地在彼此之上組合復(fù)雜的類型,就像您構(gòu)建樂(lè)高積木一樣。
為了證明這一點(diǎn),讓我們使用User上面的類型對(duì)象并構(gòu)建一個(gè)更詳細(xì)的具有愛(ài)好的用戶對(duì)象:
const User = z.object({
email: z.string().email(),
name: z.string(),
phoneNumber: z.number()
});
const Hobby = z.object({
hobbyName: z.string().min(1)
});
const Hobbyist = User.merge(Hobby);
const result = Hobbyist.safeParse({
email: "hi@sample.com",
name: "Hello World",
phoneNumber: 123
});
通過(guò)組合我們的兩個(gè)類型對(duì)象,我們創(chuàng)建了一個(gè)新類型對(duì)象,您可以使用它來(lái)驗(yàn)證用戶對(duì)象是否具有適當(dāng)?shù)膼?ài)好字段。
在現(xiàn)有對(duì)象之上組合新對(duì)象是一種很好的方法,因?yàn)樗梢詭椭3謹(jǐn)?shù)據(jù)結(jié)構(gòu)中的所有更改同步。
注意事項(xiàng)
在使用 Zod 進(jìn)行驗(yàn)證時(shí),需要牢記幾件事。
安全解析
如果不想讓Zod拋出異常,當(dāng)解析失敗時(shí),可以改用該safeParse方法。這將返回一個(gè)包含解析結(jié)果的對(duì)象:
mySchema.safeParse(""I am a valid password""); // => { success: true; data: "I am a valid password" }
mySchema.safeParse(""); // => { success: false; error: ZodError }
無(wú)法識(shí)別的Key被刪除
默認(rèn)情況下,Zod 在解析過(guò)程中會(huì)去除無(wú)法識(shí)別的key。這意味著任何未知的key都將被忽略。
如果您想通過(guò)無(wú)法識(shí)別的key而不丟失它們,您可以使用該.passthrough()方法。
其他事項(xiàng)
.array() 方法返回一個(gè)新的 ZodArray 實(shí)例,這意味著調(diào)用方法的順序很重要。通過(guò)切換鏈中調(diào)用的順序,您可以獲得完全不同的結(jié)果:
z.string().optional().array(); // (string | undefined)[] z.string().array().optional(); // string[] | undefined
Zod 與其他庫(kù)的比較
其他廣泛使用的類型驗(yàn)證庫(kù)也是不錯(cuò)的選擇,例如 yup 和 io-ts。
以下是您項(xiàng)目的選擇Zod 的一些原因:
- TypeScript 首次支持。Zod 在構(gòu)建時(shí)考慮了 TypeScript,并具有一流的支持。這意味著您可以獲得自動(dòng)完成和出色的 VsCode 支持。
- 無(wú)需額外工作即可為您獲取類型。
- 易于組合的類型對(duì)象 - 通過(guò)組合不同的類型對(duì)象來(lái)構(gòu)建復(fù)雜的驗(yàn)證規(guī)則。
- 強(qiáng)大的錯(cuò)誤處理。Zod 具有出色的錯(cuò)誤處理功能,具有豐富的 API 用于配置錯(cuò)誤處理流程。
- 支持 Promise 和函數(shù)模式。如果您需要驗(yàn)證函數(shù)或 Promise,Zod 可以滿足您的需求。
結(jié)論
在這篇文章中,我們介紹了如何使用 Zod 庫(kù)進(jìn)行 TypeScript 類型驗(yàn)證。我們研究了如何創(chuàng)建類型和使用類型來(lái)驗(yàn)證數(shù)據(jù)結(jié)構(gòu)。我們還看到了使用 Zod 時(shí)需要注意的一些事項(xiàng)以及它相對(duì)于其他庫(kù)的優(yōu)勢(shì)。
有關(guān) Zod 的更多信息,可以查看其 Github 頁(yè)面上的 優(yōu)秀文檔 。
更多關(guān)于Zod TypeScript類型驗(yàn)證的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js基礎(chǔ)語(yǔ)法與maven項(xiàng)目配置教程案例
本篇文章介紹了幾個(gè)javascript的基本語(yǔ)法和maven的配置教程。想學(xué)習(xí)javascript和maven的朋友們可以參考一下,希望能給你帶來(lái)幫助2021-07-07
微信小程序(二十二)action-sheet組件詳細(xì)介紹
這篇文章主要介紹了微信小程序action-sheet組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
JavaScript中的設(shè)計(jì)模式 單例模式
這篇文章主要給大家介紹的是JavaScript中的單例模式,設(shè)計(jì)模式代表了最佳的實(shí)踐,通常被有經(jīng)驗(yàn)的面向?qū)ο蟮能浖_(kāi)發(fā)人員所采用。設(shè)計(jì)模式是軟件開(kāi)發(fā)人員在軟件開(kāi)發(fā)過(guò)程中面臨的一般問(wèn)題的解決方案,需要的朋友可以參考一下2021-09-09
微信小程序 詳解Page中data數(shù)據(jù)操作和函數(shù)調(diào)用
這篇文章主要介紹了微信小程序 詳解Page中data數(shù)據(jù)操作和函數(shù)調(diào)用的相關(guān)資料,需要的朋友可以參考下2017-01-01
JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序
JQ中的$(document).ready()大家應(yīng)該用的非常多,基本每個(gè)JS腳本中都有這個(gè)函數(shù)的出現(xiàn)有時(shí)甚至?xí)霈F(xiàn)多個(gè),那么另一個(gè)加載函數(shù)$(window).load相對(duì)出現(xiàn)的次數(shù)就很少了,下面為大家介紹一下兩者的區(qū)別與他們的執(zhí)行順序2017-03-03
JavaScript知識(shí):構(gòu)造函數(shù)也是函數(shù)
構(gòu)造函數(shù)就是初始化一個(gè)實(shí)例對(duì)象,對(duì)象的prototype屬性是繼承一個(gè)實(shí)例對(duì)象。本文給大家分享javascript構(gòu)造函數(shù)詳解,對(duì)js構(gòu)造函數(shù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2021-08-08

