2025年TypeScript已經(jīng)不夠用了，搭配這個(gè)每周下載2000萬次的神器使用，完美！
為什么 TypeScript “不夠用”？
TypeScript作為JavaScript的超集，憑借靜態(tài)類型檢查在開發(fā)階段極大提升了代碼的健壯性。然而，隨著應(yīng)用復(fù)雜度的提升，其局限性愈發(fā)明顯：
? 僅靜態(tài)檢查：TypeScript的類型僅在編譯時(shí)生效，運(yùn)行時(shí)無法驗(yàn)證外部輸入（如API、表單數(shù)據(jù)）是否符合類型預(yù)期，可能導(dǎo)致運(yùn)行時(shí)錯(cuò)誤。
? 無法處理動(dòng)態(tài)數(shù)據(jù)：如用戶提交的JSON數(shù)據(jù)、第三方接口返回的字段等，若未嚴(yán)格匹配類型定義，程序可能崩潰。
? 缺乏運(yùn)行時(shí)驗(yàn)證邏輯：例如密碼長度、郵箱格式等業(yè)務(wù)規(guī)則，需開發(fā)者手動(dòng)編寫額外驗(yàn)證代碼，增加維護(hù)成本。
而 Zod——這個(gè)周下載量近 2000 萬的新星工具——正是為了解決這些問題而生。
圖片
Zod 是什么？
Zod 是一個(gè) TypeScript 優(yōu)先的模式聲明和驗(yàn)證庫，專為開發(fā)者在運(yùn)行時(shí)對(duì)數(shù)據(jù)進(jìn)行類型驗(yàn)證而設(shè)計(jì)，可以彌補(bǔ) TypeScript 僅提供靜態(tài)類型檢查的不足。它允許開發(fā)者以聲明式的方式定義數(shù)據(jù)的結(jié)構(gòu)和規(guī)則，并在運(yùn)行時(shí)對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證，確保數(shù)據(jù)的正確性和一致性。
Zod 的核心優(yōu)勢(shì)在于它與 TypeScript 的無縫集成，能夠從定義的模式中自動(dòng)推斷 TypeScript 類型，從而在編譯時(shí)和運(yùn)行時(shí)都提供類型安全保障。它的設(shè)計(jì)理念是“一次定義，處處使用”，既減少了代碼冗余，又提升了開發(fā)效率和代碼健壯性。
Zod 提供了許多強(qiáng)大的功能，使其在數(shù)據(jù)驗(yàn)證領(lǐng)域脫穎而出。以下是它的主要特點(diǎn)：
? 類型推斷：Zod 可以從定義的模式中自動(dòng)推斷 TypeScript 類型，開發(fā)者無需手動(dòng)編寫重復(fù)的類型聲明。例如，定義一個(gè)對(duì)象模式后，可以直接從中獲取對(duì)應(yīng)的 TypeScript 類型，減少手動(dòng)維護(hù)類型的工作量。
? 靈活的驗(yàn)證規(guī)則：Zod 支持多種數(shù)據(jù)類型（如字符串、數(shù)字、對(duì)象、數(shù)組、聯(lián)合類型等）和豐富的驗(yàn)證規(guī)則。它通過鏈?zhǔn)?API 提供直觀的語法，讓開發(fā)者能夠輕松定義復(fù)雜的驗(yàn)證邏輯。
? 詳細(xì)的錯(cuò)誤消息：當(dāng)數(shù)據(jù)驗(yàn)證失敗時(shí)，Zod 會(huì)返回清晰且用戶友好的錯(cuò)誤信息，具體指出哪個(gè)字段不符合要求以及原因。這大大方便了調(diào)試和錯(cuò)誤處理。
? 與 TypeScript 無縫集成：Zod 的設(shè)計(jì)與 TypeScript 高度契合，幾乎沒有額外的學(xué)習(xí)成本。它增強(qiáng)了類型安全，幫助開發(fā)者在開發(fā)過程中更早地發(fā)現(xiàn)潛在問題。
? 強(qiáng)大的社區(qū)支持：Zod 擁有活躍的社區(qū)和豐富的生態(tài)系統(tǒng)，許多流行框架（如 Next.js、React Hook Form 等）都提供了與 Zod 的集成，進(jìn)一步擴(kuò)展了它的應(yīng)用場(chǎng)景。
? 輕量且無依賴：Zod 是一個(gè)輕量級(jí)的庫，沒有外部依賴，易于集成到任何 TypeScript 項(xiàng)目中。
? 可擴(kuò)展性：Zod 支持自定義驗(yàn)證器和模式，開發(fā)者可以根據(jù)項(xiàng)目需求擴(kuò)展其功能，適應(yīng)更復(fù)雜的驗(yàn)證場(chǎng)景。
Zod 怎么用？
安裝 Zod
在使用 Zod 之前需要先安裝它。可以通過以下命令使用 npm 安裝：
npm install zod基本用法
Zod 的核心概念是 schema（模式），它用于定義數(shù)據(jù)的結(jié)構(gòu)和驗(yàn)證規(guī)則。以下是一些常見的基本用法：
基本類型
Zod 支持多種基本數(shù)據(jù)類型，例如字符串、數(shù)字和布爾值：
import { z } from 'zod';
// 定義一個(gè)字符串 schema
const stringSchema = z.string();
// 定義一個(gè)數(shù)字 schema
const numberSchema = z.number();
// 定義一個(gè)布爾值 schema
const booleanSchema = z.boolean();對(duì)象
使用 z.object 可以定義對(duì)象的結(jié)構(gòu)：
const userSchema = z.object({
name: z.string(),
age: z.number(),
isActive: z.boolean(),
});數(shù)組
使用 z.array 定義數(shù)組及其元素的類型：
const stringArraySchema = z.array(z.string()); // 字符串?dāng)?shù)組
const numberArraySchema = z.array(z.number()); // 數(shù)字?jǐn)?shù)組聯(lián)合類型
Zod 支持聯(lián)合類型，允許數(shù)據(jù)是多種類型中的一種：
const stringOrNumberSchema = z.union([z.string(), z.number()]);可選和可空類型
可以用 .optional() 和 .nullable() 定義可選或可為空的字段：
const optionalStringSchema = z.string().optional(); // 可選字符串
const nullableStringSchema = z.string().nullable(); // 可為空字符串數(shù)據(jù)驗(yàn)證
定義好 schema 后，可以使用 parse 方法驗(yàn)證數(shù)據(jù)。如果數(shù)據(jù)符合 schema，parse 返回驗(yàn)證后的數(shù)據(jù)；否則會(huì)拋出 ZodError。
const data = { name: 'John', age: 30, isActive: true };
try {
const validatedData = userSchema.parse(data);
console.log('數(shù)據(jù)有效:', validatedData);
} catch (err) {
if (err instanceof z.ZodError) {
console.log('數(shù)據(jù)無效:', err.errors);
}
}當(dāng)驗(yàn)證失敗時(shí)，Zod 會(huì)拋出 ZodError，其中包含詳細(xì)的錯(cuò)誤信息。例如：
const invalidData = { name: 'John', age: '30' }; // age 應(yīng)該是 number
try {
userSchema.parse(invalidData);
} catch (err) {
if (err instanceof z.ZodError) {
console.log('錯(cuò)誤信息:', err.errors);
}
}輸出會(huì)指出 age 字段的類型錯(cuò)誤。
類型推斷
Zod 的一個(gè)亮點(diǎn)是能從 schema 自動(dòng)推斷 TypeScript 類型，使用 z.infer 獲取對(duì)應(yīng)的類型：
type User = z.infer<typeof userSchema>;
// User 類型為 { name: string; age: number; isActive: boolean }這使得你在開發(fā)時(shí)既能享受類型安全，又能在運(yùn)行時(shí)驗(yàn)證數(shù)據(jù)。
高級(jí)用法
自定義驗(yàn)證
可以使用 .refine 添加自定義驗(yàn)證邏輯：
const passwordSchema = z.string().refine(
(val) => val.length >= 8,
{ message: '密碼至少需要8個(gè)字符' }
);數(shù)據(jù)轉(zhuǎn)換
使用 .transform 在驗(yàn)證時(shí)轉(zhuǎn)換數(shù)據(jù)：
const stringToNumberSchema = z.string().transform((val) => parseInt(val, 10));驗(yàn)證 "123" 時(shí)會(huì)返回 123。
嵌套 schema
可以在 schema 中嵌套其他 schema：
const addressSchema = z.object({
street: z.string(),
city: z.string(),
});
const userWithAddressSchema = z.object({
name: z.string(),
address: addressSchema,
});Zod 使用場(chǎng)景
Zod 在需要運(yùn)行時(shí)數(shù)據(jù)驗(yàn)證的場(chǎng)景中非常有用，例如：
? 表單驗(yàn)證：確保用戶輸入的數(shù)據(jù)符合預(yù)期格式和規(guī)則。
? API 響應(yīng)驗(yàn)證：驗(yàn)證后端返回的數(shù)據(jù)結(jié)構(gòu)和類型是否符合預(yù)期。
表單驗(yàn)證
在一個(gè)用戶注冊(cè)頁面中，我們需要驗(yàn)證用戶輸入的以下字段：
? 姓名：必須是字符串，長度至少為 2 個(gè)字符。
? 電子郵件：必須是有效的郵箱格式。
? 密碼：必須是字符串，長度至少為 8 個(gè)字符，且包含至少一個(gè)字母和一個(gè)數(shù)字。
代碼實(shí)現(xiàn)如下：
1. 定義模式：使用 Zod 定義一個(gè)模式來描述這些規(guī)則，并推斷 TypeScript 類型：
import { z } from'zod';
// 定義用戶表單數(shù)據(jù)的 schema
constUserSchema = z.object({
name: z.string().min(2, '姓名至少需要2個(gè)字符'),
email: z.string().email('請(qǐng)輸入有效的電子郵件地址'),
password: z.string()
.min(8, '密碼至少需要8個(gè)字符')
.regex(/[a-zA-Z]/, '密碼必須包含至少一個(gè)字母')
.regex(/[0-9]/, '密碼必須包含至少一個(gè)數(shù)字'),
});
// 推斷 TypeScript 類型
typeUser = z.infer<typeofUserSchema>;2. HTML 表單：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>用戶注冊(cè)表單</title>
</head>
<body>
<h1>用戶注冊(cè)</h1>
<form id="registerForm">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required />
</div>
<div>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" required />
</div>
<div>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required />
</div>
<button type="submit">提交</button>
</form>
<div id="message"></div>
<script type="module" src="script.ts"></script>
</body>
</html>3. 驗(yàn)證用戶輸入：以下是處理表單提交并使用 Zod 驗(yàn)證的代碼：
// 獲取表單和消息元素
const form = document.getElementById('registerForm') asHTMLFormElement;
const messageDiv = document.getElementById('message') asHTMLDivElement;
// 表單提交事件處理
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默認(rèn)提交行為
// 從表單中收集數(shù)據(jù)
const formData = newFormData(form);
const userData = {
name: formData.get('name') asstring,
email: formData.get('email') asstring,
password: formData.get('password') asstring,
};
// 使用 Zod 驗(yàn)證數(shù)據(jù)
try {
UserSchema.parse(userData);
messageDiv.textContent = '用戶數(shù)據(jù)有效！提交成功。';
messageDiv.style.color = 'green';
console.log('用戶數(shù)據(jù)有效:', userData);
} catch (err) {
if (err instanceof z.ZodError) {
const errorMessages = err.errors.map((error) => error.message).join('; ');
messageDiv.textContent = `用戶數(shù)據(jù)無效: ${errorMessages}`;
messageDiv.style.color = 'red';
console.log('用戶數(shù)據(jù)無效:', err.errors);
}
}
});4. 錯(cuò)誤信息：對(duì)于無效數(shù)據(jù)，Zod 會(huì)返回詳細(xì)的錯(cuò)誤信息：
用戶數(shù)據(jù)無效: [
{ code: 'too_small', path: ['name'], message: '姓名至少需要2個(gè)字符' },
{ code: 'invalid_string', path: ['email'], message: '請(qǐng)輸入有效的電子郵件地址' },
{ code: 'too_small', path: ['password'], message: '密碼至少需要8個(gè)字符' },
{ code: 'custom', path: ['password'], message: '密碼必須包含至少一個(gè)數(shù)字' }
]API 響應(yīng)驗(yàn)證
假設(shè)需要從后端 API 獲取用戶信息，預(yù)期的響應(yīng)結(jié)構(gòu)如下：
? id：數(shù)字類型，用戶 ID。
? name：字符串類型，用戶姓名。
? email：字符串類型，用戶郵箱。
? isActive：布爾類型，用戶是否活躍。
代碼實(shí)現(xiàn)如下：
1. 定義 API 響應(yīng)模式：使用 Zod 定義 API 響應(yīng)數(shù)據(jù)的模式，并推斷 TypeScript 類型：
import { z } from'zod';
// 定義 API 響應(yīng)數(shù)據(jù)的 schema
constApiResponseSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string().email(),
isActive: z.boolean(),
});
// 推斷 TypeScript 類型
typeApiResponse = z.infer<typeofApiResponseSchema>;2. 驗(yàn)證 API 響應(yīng)：以下是發(fā)起 API 請(qǐng)求并使用 Zod 驗(yàn)證返回?cái)?shù)據(jù)的代碼。
// 模擬從后端獲取數(shù)據(jù)的函數(shù)
asyncfunctionfetchUserData(endpoint: string): Promise<void> {
try {
// 發(fā)起 API 請(qǐng)求
const response = awaitfetch(endpoint);
if (!response.ok) {
thrownewError(`HTTP error! status: ${response.status}`);
}
// 解析 JSON 數(shù)據(jù)
const data = await response.json();
// 使用 Zod 驗(yàn)證數(shù)據(jù)
const validatedData = ApiResponseSchema.parse(data);
console.log('API 響應(yīng)有效:', validatedData);
} catch (err) {
if (err instanceof z.ZodError) {
console.log('API 響應(yīng)無效:', err.errors);
} else {
console.error('請(qǐng)求失敗:', err);
}
}
}
// 示例 1：調(diào)用 API 并假設(shè)返回有效數(shù)據(jù)
// 假設(shè)后端返回的數(shù)據(jù)是 { id: 1, name: "Jane Doe", email: "jane@example.com", isActive: true }
console.log('測(cè)試有效數(shù)據(jù):');
fetchUserData('https://api.example.com/user/1');
// 示例 2：調(diào)用 API 并假設(shè)返回?zé)o效數(shù)據(jù)
// 假設(shè)后端返回的數(shù)據(jù)是 { id: "1", name: "Jane Doe", email: "jane@example.com", isActive: "true" }
console.log('測(cè)試無效數(shù)據(jù):');
fetchUserData('https://api.example.com/user/invalid');3. 錯(cuò)誤信息：對(duì)于無效數(shù)據(jù)，Zod 會(huì)返回類似以下的錯(cuò)誤信息：
API 響應(yīng)無效: [
{ code: 'invalid_type', path: ['id'], message: 'Expected number, received string' },
{ code: 'invalid_type', path: ['isActive'], message: 'Expected boolean, received string' }
]TypeScript+Zod = 終極類型安全
在 2025 年，僅依賴TypeScript的靜態(tài)檢查已不足以應(yīng)對(duì)復(fù)雜應(yīng)用的挑戰(zhàn)。Zod 通過運(yùn)行時(shí)驗(yàn)證、類型強(qiáng)制、錯(cuò)誤處理等特性，與TypeScript形成完美互補(bǔ)。兩者的結(jié)合不僅降低了開發(fā)成本，更大幅提升了應(yīng)用的健壯性與安全性。
Zod是TypeScript 缺失的那塊拼圖，沒有它，你的類型系統(tǒng)永遠(yuǎn)不完整。
