Valibot TypeScript：方法、示例、安装

引言：什么是 Valibot 以及为什么需要它？

\n\n

Valibot 是一个用于 TypeScript 和 JavaScript 的现代、模块化且轻量级的数据验证库。与 Zod 或 Joi 等巨头不同，Valibot 的设计侧重于最小化包体积和 tree-shaking（删除未使用代码的能力）。

\n\n

Valibot 的核心哲学是“只为使用部分付费”。如果您只需要检查字符串的最小长度，您只需导入 string 和 minLength，而不是整个库。这使得 Valibot 成为注重最终 JavaScript 包体积的项目（例如移动应用程序或组件库）的理想选择。

\n\n

该库完全类型化，并提供与 TypeScript 的出色集成，能够从验证模式中自动推断类型。Valibot 支持简单的基本类型（字符串、数字、布尔值）以及复杂结构（对象、数组、联合类型、递归模式）。

\n\n

安装

\n\n

Valibot 通过 npm 包管理器分发。要安装，请在项目的终端中执行以下命令：

\n\n

npm install valibot

\n\n

如果您使用 yarn：

\n\n

yarn add valibot

\n\n

对于 pnpm：

\n\n

pnpm add valibot

\n\n

安装后，您可以将所需的函数导入到您的 TypeScript 文件中：

\n\n

import { string, number, object, minLength, maxValue } from 'valibot';

\n\n

快速入门与代码示例

\n\n

让我们为用户注册表单创建一个简单的验证模式。我们将验证姓名、电子邮件和年龄。

\n\n

import { object, string, number, email, minLength, maxValue, safeParse } from 'valibot';\n\n// 1. 定义模式\nconst UserSchema = object({\n  name: string([minLength(2, '姓名至少需要2个字符')]),\n  email: string([email('无效的电子邮件')]),\n  age: number([maxValue(120, '年龄不能超过120岁')])\n});\n\n// 2. 待验证的数据\nconst inputData = {\n  name: '安娜',\n  email: 'anna@example.com',\n  age: 30\n};\n\n// 3. 进行验证\nconst result = safeParse(UserSchema, inputData);\n\nif (result.success) {\n  console.log('数据有效:', result.output);\n  // result.output 的类型为 { name: string; email: string; age: number; }\n} else {\n  console.error('验证错误:', result.issues);\n  // result.issues — 包含错误描述的对象数组\n}

\n\n

在此示例中，我们使用了 safeParse —— 一种安全的方法，它不会抛出异常，而是返回一个包含 success 字段的对象。如果验证成功，result.output 将包含经过验证且类型正确的数据。

\n\n

主要方法和函数

\n\n

Valibot 提供了许多用于创建模式的函数。让我们看看其中最重要的几个。

\n\n

1. `string()`

功能： 创建一个用于验证字符串值的模式。接受一个可选的验证器数组以进行额外检查（长度、模式等）。

参数：

validations（可选）：验证函数数组，例如 minLength、maxLength、email、url、regex 等。

示例：

import { string, minLength, maxLength, email } from 'valibot';\n\nconst UsernameSchema = string([minLength(3), maxLength(20)]);\nconst EmailSchema = string([email()]);\n\nconsole.log(safeParse(UsernameSchema, 'Jo')); // { success: false, issues: [...] }\nconsole.log(safeParse(EmailSchema, 'test@test.com')); // { success: true, output: 'test@test.com' }

\n\n