Valibot TypeScript : méthodes, exemples, installation |…

Introduction : qu'est-ce que Valibot et pourquoi l'utiliser ?

Valibot est une bibliothèque moderne, modulaire et légère pour la validation de données en TypeScript et JavaScript. Contrairement à des géants comme Zod ou Joi, Valibot est conçu pour minimiser la taille du bundle et tirer parti du tree-shaking (suppression du code inutilisé).

La philosophie principale de Valibot est « ne payez que pour ce que vous utilisez ». Si vous avez seulement besoin de vérifier la longueur minimale d'une chaîne, vous importez uniquement string et minLength, et non la bibliothèque entière. Cela fait de Valibot un choix idéal pour les projets où la taille du bundle JavaScript final est cruciale (par exemple, pour les applications mobiles ou les bibliothèques de composants).

La bibliothèque est entièrement typée et offre une excellente intégration avec TypeScript, en déduisant automatiquement les types à partir des schémas de validation. Valibot prend en charge aussi bien les primitives simples (chaînes, nombres, booléens) que les structures complexes (objets, tableaux, types union, schémas récursifs).

Installation

Valibot est distribué via le gestionnaire de paquets npm. Pour l'installer, exécutez la commande suivante dans le terminal de votre projet :

npm install valibot

Si vous utilisez yarn :

yarn add valibot

Pour pnpm :

pnpm add valibot

Après l'installation, vous pouvez importer les fonctions nécessaires dans votre fichier TypeScript :

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

Démarrage rapide avec un exemple de code

Créons un schéma de validation simple pour un formulaire d'inscription utilisateur. Nous allons valider le nom, l'email et l'âge.

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

// 1. Définir le schéma
const UserSchema = object({
  name: string([minLength(2, 'Le nom doit contenir au moins 2 caractères')]),
  email: string([email('Email invalide')]),
  age: number([maxValue(120, 'L\'âge ne peut pas dépasser 120')])
});

// 2. Données à valider
const inputData = {
  name: 'Marie',
  email: 'marie@exemple.com',
  age: 28
};

// 3. Valider
const result = safeParse(UserSchema, inputData);

if (result.success) {
  console.log('Données valides :', result.output);
  // result.output est de type { name: string; email: string; age: number; }
} else {
  console.error('Erreurs de validation :', result.issues);
  // result.issues est un tableau d'objets décrivant les erreurs
}

Dans cet exemple, nous avons utilisé safeParse — une méthode sécurisée qui ne lève pas d'exception, mais retourne un objet avec un champ success. Si la validation réussit, result.output contient les données validées avec les types corrects.

Méthodes et fonctions principales

Valibot propose de nombreuses fonctions pour créer des schémas. Voici les plus importantes.

1. `string()`

Fonction : Crée un schéma pour valider les chaînes de caractères. Accepte un tableau optionnel de validateurs pour des vérifications supplémentaires (longueur, motif, etc.).

Paramètres :

validations (optionnel) : un tableau de fonctions de validation, comme minLength, maxLength, email, url, regex, etc.

Exemple :

import { string, minLength, maxLength, email } from 'valibot';

const UsernameSchema = string([minLength(3), maxLength(20)]);
const EmailSchema = string([email()]);

console.log(safeParse(UsernameSchema, 'Jo')); // { success: false, issues: [...] }
console.log(safeParse(EmailSchema, 'test@test.com')); // { success: true, output: 'test@test.com' }