📦 Installer et utiliser Zod en TypeScript

1. Introduction

Quand on développe en TypeScript, on bénéficie déjà d’un typage statique. Mais attention :

Les types TypeScript disparaissent une fois compilés.

👉 Ça veut dire que rien ne garantit la validité des données à l’exécution (API, formulaires, JSON externe…).

C’est là que Zod entre en jeu :

• ✅ Validation runtime (pendant l’exécution)
• ✅ Inférence automatique des types TypeScript
• ✅ API simple et déclarative

En bref : Zod = typage + validation de données.

⚠️ Zod est à utiliser à minima aux frontières de ton application (API externes, formulaires utilisateurs, configuration).

2. Installation

Zod est disponible sur npm.

npm install zod

ou avec yarn :

yarn add zod

ou avec pnpm :

pnpm add zod

Puis importez-le dans vos fichiers :

import { z } from "zod";

3. parse vs safeParse

🔹 parse()

• Valide les données
• Retourne directement les données typées si elles sont valides
• ❌ Lance une exception si les données sont invalides

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

const user = UserSchema.parse({ id: 1, name: "Alice" });
console.log(user); // ✅ { id: 1, name: "Alice" }

UserSchema.parse({ id: "oops", name: "Bob" });
// ❌ Erreur lancée : Expected number, received string

🔹 safeParse()

• Valide les données
• Retourne un objet { success: boolean, data?, error? }
• ✅ Utile si tu veux gérer proprement les erreurs sans try/catch

const result = UserSchema.safeParse({ id: "oops", name: "Bob" });

if (result.success) {
  console.log(result.data);
} else {
  console.log(result.error.format());
}

👉 Règle générale :

• parse si tu es sûr des données (ou dans un test rapide)
• safeParse si tu travailles avec de l’input utilisateur ou une API externe

4. Cas d’usage classiques

4.1 Validation d’entrée utilisateur (formulaire)

const SignUpSchema = z.object({
  username: z.string().min(3),
  password: z.string().min(8),
  age: z.number().min(18),
});

SignUpSchema.parse({ username: "John", password: "12345678", age: 21 }); // ✅

4.2 Sécuriser les données d’une API

4.2.1 Avec fetch()

const PostSchema = z.object({
  id: z.number(),
  title: z.string(),
  body: z.string().optional(),
});

type Post = z.infer<typeof PostSchema>;

async function fetchPost(id: number): Promise<Post> {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await res.json();

  return PostSchema.parse(data); // ⚡ lance une erreur si invalide
}

4.2.2 Avec HttpClient

const PostSchema = z.object({
  id: z.number(),
  title: z.string(),
  body: z.string().optional(),
});

type Post = z.infer<typeof PostSchema>;

function getPost(id: number): Observable<Post> {
  return this.httpClient.get<Post>(`https://jsonplaceholder.typicode.com/posts/${id}`)
  .pipe(
  map((post) => PostSchema.parse(post))
  );
}

4.2.2 Avec HttpResource (v20)

const PostSchema = z.object({
  id: z.number(),
  title: z.string(),
  body: z.string().optional(),
});

readonly
post = httpResource(
() => `https://jsonplaceholder.typicode.com/posts/${id}`,
{ parse: PostSchema.parse },
);

4.3 Générer automatiquement des types

const ProductSchema = z.object({
  id: z.string(),
  price: z.number(),
});

type Product = z.infer<typeof ProductSchema>;

const p: Product = { id: "123", price: 42 };

4.4 Combiner des schémas

const AdminSchema = UserSchema.extend({ role: z.literal("admin") });
const MemberSchema = UserSchema.extend({ role: z.literal("member") });

const PersonSchema = z.union([AdminSchema, MemberSchema]);

4.5 Transformer / nettoyer les données

const EmailSchema = z
.string()
.email()
.transform((val) => val.toLowerCase());

console.log(EmailSchema.parse("ALICE@EXAMPLE.COM"));
// alice@example.com

5. Cas d’usage (non exhaustif)

Voici quelques situations où Zod devient un super allié dans des apps réelles :

• Contrôler ce que renvoie ton backend

• Contrôler le format de fichiers en input

• Contrôler ce que renvoie des API tierces

👉 En résumé : dès que tu manipules des données venant de l’extérieur, pense Zod.

6. Conclusion

Zod est un outil incontournable si tu veux :

• sécuriser tes données côté frontend et backend
• éviter les bugs liés à des entrées invalides
• ne plus écrire deux fois (types + validations)

⚠️ Zod est à utiliser à minima aux frontières de ton application pour valider ce qui entre et ce qui sort.

👉 Pour un développeur Angular/TypeScript, Zod devient vite un réflexe dans :

• les appels API
• la validation d’objets complexes

EasyAngularKit te donne toujours des outils concrets. Ici, tu peux avancer même si ton backend dort encore 😴.

Envie de creuser davantage tes compétences Angular ? 👉Rejoins-nous : https://pim.ms/kyv6IOX