Advanced Typescript
Typage au runtime

zod

Validation de types au runtime

TypeScript est un outil très pratique pour garantir la sécurité de nos types... à la compilation.
Mais que se passe-t-il une fois notre code transformé en JavaScript ? TypeScript disparaît, et avec lui, ses types.

Typescript ne vous protège pas des données venant de l'exterieur, même si pendant vos tests une API vous donnait une réponse sous une certaine forme, rien ne vous protège d'un changement de contrat: une réponse d'API qui change, un formulaire envoyé par un utilisateur avec des données erronées, des données lues depuis le localStorage erronées, etc...

zod à la rescousse

zod est une librairie de déclaration et de validation de schémas.
Le principe est simple:

  • Vous déclarez la "forme" que vos données devraient avoir à l'aide d'un schéma Zod.
  • Vous passez vos données à ce schéma pour les valider.
  • zod vous dit si les données sont conformes. Si oui, il vous les retourne en garantissant leur type. Si non, il vous donne une erreur détaillée.

Il vient un peu remplacer les guards typescript qu'on a pu écrire dans les chapitres précédents.

Définir un schéma de base

import { z } from 'zod';
const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(), // Zod a des validateurs de format intégrés !
  isAdmin: z.boolean().optional(), // La propriété est optionnelle
});

Valider des données : parse vs safeParse

zod offre deux méthodes principales pour valider des données.

  • .parse() : Cette méthode valide vos données. Si elles sont conformes, elle les retourne. Si elles ne le sont pas, elle lève une exception (throw), ce qui peut faire planter votre application si vous ne la catchez pas.
  • .safeParse() : C'est la méthode recommandée. Elle ne lève jamais d'exception. Elle retourne un objet qui contient un booléen success.
    • Si success est true, l'objet contient aussi les data validées.
    • Si success est false, l'objet contient une error détaillée.