Validation des données en TypeScript : Zod, Yup, Joi |…

Validation des données en TypeScript : aperçu des outils et des pratiques

Dans le développement web moderne avec TypeScript, l'une des tâches clés est d'assurer l'intégrité des données. Même avec un typage statique strict, TypeScript ne peut pas garantir que les données provenant du monde extérieur (API, formulaires, localStorage) correspondent au format attendu. C'est là qu'intervient la validation runtime — la vérification des données pendant l'exécution du programme. Dans cet article, nous examinerons trois bibliothèques populaires : Zod, Yup et Joi, comparerons leurs approches et montrerons comment intégrer la validation dans un projet TypeScript.

Pourquoi les types simples de TypeScript ne suffisent-ils pas ?

TypeScript vérifie les types au moment de la compilation, mais à l'exécution, toutes les annotations sont effacées. Cela signifie que :

Les données de l'utilisateur peuvent contenir des champs superflus ou manquer de champs obligatoires
Les nombres peuvent arriver sous forme de chaînes de caractères
Les objets peuvent être null ou undefined

Les bibliothèques de validation résolvent ce problème en fournissant des schémas qui fonctionnent à la fois comme vérification et comme déduction de types.

1. Zod — le standard moderne

Zod est la bibliothèque de validation la plus populaire en TypeScript. Son principal avantage est la déduction automatique des types TypeScript à partir des schémas.

Installation

npm install zod

Exemple de schéma de base

import { z } from 'zod';

const UserSchema = z.object({  id: z.number().positive(),  name: z.string().min(2).max(50),  email: z.string().email(),  age: z.number().int().min(18).optional(),});

// Déduction du type : { id: number; name: string; email: string; age?: number }type User = z.infer<typeof UserSchema>;

// Validationconst result = UserSchema.safeParse(inputData);if (!result.success) {  console.error(result.error.errors);} else {  // result.data — données valides avec le type User  processUser(result.data);}

Fonctionnalités avancées

Transformation : z.string().transform(val => val.trim())
Unions discriminées : z.discriminatedUnion('type', [...])
Schémas récursifs : z.lazy(() => NodeSchema)
Erreurs personnalisées : z.string().refine(val => !val.includes('bad'), 'Le mot bad est interdit')

2. Yup — un outil éprouvé par le temps

Yup est une bibliothèque avec une riche histoire, initialement créée pour la validation de formulaires. Elle s'intègre parfaitement avec Formik et React Hook Form.

Installation

npm install yup

Exemple de schéma

import * as yup from 'yup';

const productSchema = yup.object({  title: yup.string().required('Le titre est obligatoire').min(3),  price: yup.number().positive('Le prix doit être positif').required(),  inStock: yup.boolean().default(true),});

type Product = yup.InferType<typeof productSchema>;

// ValidationproductSchema.validate(inputData, { abortEarly: false })  .then(validData => console.log(validData))  .catch(err => console.error(err.errors));

Caractéristiques de Yup

Prise en charge de la validation conditionnelle : .when('field', ...)
Messages d'erreur intégrés en français (après configuration de la locale)
Travail simple avec les objets imbriqués et les tableaux
Méthodes cast() et transform() pour la conversion de types

3. Joi — puissant, mais plus lourd

Joi est une bibliothèque légendaire de l'écosystème Node.js (Hapi.js). Elle offre une flexibilité maximale, mais ne dispose pas d'intégration native avec TypeScript (nécessite une définition manuelle des types).