Validation des données en TypeScript : bibliothèques et…

Validation des données en TypeScript : de la théorie à la pratique

L'un des problèmes clés lors du développement en TypeScript est le fossé entre le typage statique et les données réelles provenant de sources externes (API, formulaires, localStorage). TypeScript vérifie les types au moment de la compilation, mais à l'exécution, les types disparaissent. La validation des données est le processus de vérification de la conformité des données à des règles définies à l'exécution, ce qui est essentiel pour la fiabilité des applications.

Dans cet article, nous allons examiner les bibliothèques populaires pour la validation des données en TypeScript : Zod, Yup, Joi et class-validator. Nous verrons leurs caractéristiques, des exemples d'utilisation et vous aiderons à choisir l'outil adapté à votre projet.

Pourquoi TypeScript seul ne suffit-il pas ?

TypeScript est un outil pour le développeur. Il aide à écrire un code plus sûr, mais ne protège pas contre :

Les données incorrectes provenant d'une API (le champ age peut arriver sous forme de chaîne "25")
L'absence de champs obligatoires
Les formats incorrects (email, URL, téléphone)
Les valeurs en dehors des plages autorisées

La validation des données à l'exécution résout ces problèmes en vérifiant les données par rapport à un schéma et en générant des erreurs compréhensibles.

Zod — le standard moderne

Zod est la bibliothèque la plus populaire pour la validation en TypeScript. Son principal avantage est une intégration étroite avec le système de types : le type peut être déduit automatiquement à partir du schéma.

Installation

npm install zod

Exemple d'utilisation

import { z } from 'zod';

// Définir le schémaconst UserSchema = z.object({  id: z.number().positive(),  email: z.string().email(),  age: z.number().min(18).max(120).optional(),  role: z.enum(['admin', 'user', 'guest']),});

// Déduire le type du schématype User = z.infer<typeof UserSchema>;

// Validationconst result = UserSchema.safeParse({  id: 1,  email: 'user@example.com',  age: 25,  role: 'admin',});

if (result.success) {  // result.data — données valides de type User  console.log(result.data.email);} else {  // result.error — informations détaillées sur les erreurs  console.log(result.error.format());}

Fonctionnalités clés de Zod :

Inférence automatique des types via z.infer
Transformation des données (par exemple, conversion de chaînes en nombres)
Validation d'objets et de tableaux imbriqués
Prise en charge des unions, intersections, discriminated unions
Refinement — vérifications personnalisées

Yup — éprouvé par le temps

Yup est une bibliothèque des auteurs de Formik. Idéale pour la validation de formulaires en React. Yup a une syntaxe plus déclarative et un écosystème riche.

Exemple

import * as yup from 'yup';

const schema = yup.object().shape({  name: yup.string().required('Le nom est obligatoire'),  email: yup.string().email('Email invalide').required(),  age: yup.number().positive().integer().min(18, 'L\'âge doit être d\'au moins 18 ans'),  tags: yup.array().of(yup.string()).min(1, 'Sélectionnez au moins un tag'),});

schema.validate({  name: 'Jean',  email: 'jean@example.com',  age: 25,  tags: ['typescript'],}).then(validData => {  console.log('Données valides :', validData);}).catch(err => {  console.log('Erreur :', err.errors);});

Caractéristiques de Yup :

Localisation des messages d'erreur
Validation à la demande (lazy validation)
Transformation des valeurs (cast)
Intégration avec Formik prête à l'emploi

Joi — puissant et strict

Joi est une bibliothèque avec un vaste ensemble de validateurs. Créée à l'origine pour Node.js (Hapi.js), elle fonctionne également très bien avec TypeScript.