TypeScript pour un développeur PHP

// Ce que vous écrivez
function total(prix: number, quantite: number): number {
  return prix * quantite;
}

// Ce qui tourne dans le navigateur
function total(prix, quantite) {
  return prix * quantite;
}

// ❌ Redondant : TypeScript sait déjà
const nom: string = "Amar";
const total: number = 10 * 3;
const tags: string[] = ["php", "js"];

// ✅ Laissez inférer
const nom = "Amar";              // string
const total = 10 * 3;            // number
const tags = ["php", "js"];      // string[]

// ✅ Annotez les FRONTIÈRES : signatures, retours d'API, état vide
function calculer(prix: number, tva: number): number {
  const montant = prix * (1 + tva);   // inféré : number
  return montant;
}

// ✅ Annotez quand la valeur initiale ne dit rien
const [articles, setArticles] = useState<Article[]>([]);
let erreur: string | null = null;

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",

    /* Le réglage le plus important */
    "strict": true,

    /* Fortement recommandés en plus de strict */
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true,

    /* Confort */
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Alias d'import — évite les ../../.. */
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  },
  "include": ["src"]
}

// ❌ any : TypeScript ne dit plus rien, y compris sur les erreurs évidentes
function traiter(data: any) {
  return data.utilisateur.nom.toUpperCase();  // compile, plante peut-être
}

// ✅ unknown : il faut prouver la forme avant d'y toucher
function traiter(data: unknown) {
  // data.nom          → erreur de compilation
  if (typeof data === "object" && data !== null && "nom" in data) {
    console.log(data.nom);   // ici, TypeScript est rassuré
  }
}

// Tableau : longueur variable, type homogène
const tags: string[] = ["php", "js"];
const tags2: Array<string> = ["php"];        // syntaxe équivalente

// Tuple : longueur fixe, types positionnels
const coord: [number, number] = [48.85, 2.35];
const paire: [string, number] = ["âge", 34];

// C'est ce que renvoie useState
const [valeur, setValeur] = useState(0);     // [number, Dispatch<...>]

// Tuple nommé — purement documentaire, mais lisible
type Intervalle = [debut: Date, fin: Date];

// Lecture seule
const figé: readonly string[] = ["a", "b"];
// figé.push("c")  → erreur

// as const : fige tout, y compris les valeurs
const roles = ["admin", "editeur"] as const;
// type : readonly ["admin", "editeur"]
type Role = typeof roles[number];            // "admin" | "editeur"

interface Article {
  id: number;
  title: string;
  slug: string;
  body: string;
  publishedAt: string | null;      // null explicite, comme ?string en PHP
  views?: number;                  // optionnel : number | undefined
  readonly createdAt: string;      // readonly comme en PHP 8.2
  author: {                        // objet imbriqué
    id: number;
    name: string;
  };
  tags: string[];
}

// Équivalent avec type
type Article = {
  id: number;
  title: string;
};

// type sait faire ce que interface ne sait pas
type Id = number | string;
type Callback = (article: Article) => void;
type Paire = [string, number];
type Statut = "draft" | "published" | "archived";

// Clés inconnues, valeurs typées
interface Traductions {
  [cle: string]: string;
}

// Version moderne, plus lisible
type Traductions = Record<string, string>;

// Clés contraintes — très utile
type Statut = "draft" | "published";
type Libelles = Record<Statut, string>;

const libelles: Libelles = {
  draft: "Brouillon",
  published: "Publié",
  // il manque une clé → erreur de compilation
};

// Valeurs hétérogènes
type Config = Record<string, string | number | boolean>;

function formater(valeur: string | number | Date): string {
  if (typeof valeur === "string") {
    return valeur.trim();          // ici : string
  }

  if (typeof valeur === "number") {
    return valeur.toFixed(2);      // ici : number
  }

  return valeur.toISOString();     // ici : Date, par élimination
}

// 1. typeof — pour les primitives
if (typeof x === "string") { … }

// 2. instanceof — pour les classes
if (err instanceof Error) { console.log(err.message); }

// 3. in — pour la présence d'une propriété
if ("email" in contact) { … }

// 4. Vérification de véracité
if (utilisateur) { … }             // écarte null et undefined

// 5. Union discriminée — la plus puissante
if (resultat.statut === "ok") { … }

// 6. Predicate maison — une fonction qui enseigne au compilateur
function estArticle(x: unknown): x is Article {
  return typeof x === "object" && x !== null && "slug" in x;
}

if (estArticle(donnees)) {
  donnees.slug;                    // TypeScript est convaincu
}

type EtatRequete<T> =
  | { statut: "inactif" }
  | { statut: "chargement" }
  | { statut: "succes"; donnees: T }
  | { statut: "erreur"; message: string; code: number };

function rendu(etat: EtatRequete<Article[]>) {
  switch (etat.statut) {
    case "inactif":
      return "Prêt.";

    case "chargement":
      return "Chargement…";

    case "succes":
      // etat.donnees existe ici, et seulement ici
      return `${etat.donnees.length} articles`;

    case "erreur":
      // etat.message et etat.code existent ici
      return `Erreur ${etat.code} : ${etat.message}`;
  }
}

function libelle(statut: Statut): string {
  switch (statut) {
    case "draft":     return "Brouillon";
    case "published": return "Publié";
    default: {
      // Si un jour on ajoute "archived" à l'union,
      // cette ligne cesse de compiler. C'est voulu.
      const jamais: never = statut;
      throw new Error(`Statut non géré : ${jamais}`);
    }
  }
}

// Déclaration
function total(prix: number, tva = 0.2): number {
  return prix * (1 + tva);
}

// Expression fléchée — la forme dominante en React
const total = (prix: number, tva = 0.2): number => prix * (1 + tva);

// Paramètre optionnel : number | undefined
function saluer(nom: string, titre?: string): string {
  return titre ? `${titre} ${nom}` : nom;
}

// Reste
function somme(...nombres: number[]): number {
  return nombres.reduce((a, b) => a + b, 0);
}

// Objet de paramètres — plus lisible au-delà de trois arguments
type OptionsRecherche = {
  terme: string;
  page?: number;
  parPage?: number;
};

function rechercher({ terme, page = 1, parPage = 20 }: OptionsRecherche) { … }

// Type de fonction, réutilisable
type Formateur = (valeur: number, devise: string) => string;

const enEuros: Formateur = (v, d) => `${v.toFixed(2)} ${d}`;
// v et d sont inférés depuis Formateur : pas besoin de les annoter

function parser(valeur: string): number;
function parser(valeur: string[]): number[];
function parser(valeur: string | string[]): number | number[] {
  return Array.isArray(valeur) ? valeur.map(Number) : Number(valeur);
}

const a = parser("42");          // number
const b = parser(["1", "2"]);    // number[]

// Sans générique — il faudrait une version par type
function premierArticle(items: Article[]): Article | undefined {
  return items[0];
}

// Avec générique — une seule version pour tout
function premier<T>(items: T[]): T | undefined {
  return items[0];
}

premier([1, 2, 3]);            // number | undefined
premier(articles);             // Article | undefined
premier(["a"]);                // string | undefined

// T doit avoir un id numérique
function trierParId<T extends { id: number }>(items: T[]): T[] {
  return [...items].sort((a, b) => a.id - b.id);
}

trierParId(articles);          // ✅ Article[] en entrée ET en sortie
trierParId([{ nom: "x" }]);    // ❌ pas de propriété id

// K doit être une clé de T — extrêmement utile
function extraire<T, K extends keyof T>(objet: T, cle: K): T[K] {
  return objet[cle];
}

const titre = extraire(article, "title");   // string
const vues  = extraire(article, "views");   // number | undefined
extraire(article, "inexistant");            // ❌ erreur de compilation

// Valeur par défaut d'un paramètre de type
type Reponse<T = unknown> = {
  donnees: T;
  meta: { total: number };
};

type ReponseApi<T> = {
  data: T;
  meta?: { page: number; total: number };
};

async function api<T>(chemin: string, init?: RequestInit): Promise<T> {
  const reponse = await fetch(`/api${chemin}`, {
    headers: { "Content-Type": "application/json" },
    ...init,
  });

  if (!reponse.ok) {
    throw new Error(`HTTP ${reponse.status} sur ${chemin}`);
  }

  return reponse.json() as Promise<T>;
}

// Au point d'appel, le retour est parfaitement typé
const liste = await api<ReponseApi<Article[]>>("/articles");
liste.data[0].title;                 // string, autocomplété

const un = await api<ReponseApi<Article>>("/articles/12");
un.data.publishedAt;                 // string | null

interface Article {
  id: number;
  title: string;
  slug: string;
  body: string;
  publishedAt: string | null;
  authorId: number;
}

// Tous les champs optionnels — parfait pour un PATCH
type ArticlePartiel = Partial<Article>;

// Tous les champs obligatoires
type ArticleComplet = Required<Article>;

// Tous en lecture seule
type ArticleFige = Readonly<Article>;

// Sélectionner
type ApercuArticle = Pick<Article, "id" | "title" | "slug">;

// Exclure — le formulaire de création
type NouvelArticle = Omit<Article, "id" | "publishedAt">;

// Dictionnaire à clés contraintes
type ParStatut = Record<"draft" | "published", Article[]>;

// Manipulation d'unions
type Statut = "draft" | "published" | "archived";
type StatutVisible = Exclude<Statut, "archived">;   // "draft" | "published"
type StatutFinal = Extract<Statut, "archived">;     // "archived"

// Retirer null et undefined
type Date2 = NonNullable<string | null | undefined>;  // string

// Déduire depuis une fonction
type Resultat = ReturnType<typeof recuperer>;        // Promise<Article | null>
type Args = Parameters<typeof recuperer>;            // [id: number]
type Attendu = Awaited<ReturnType<typeof recuperer>>; // Article | null

// Le corps d'un PATCH : tout optionnel, sauf les champs système
type MiseAJourArticle = Partial<Omit<Article, "id" | "authorId">>;

// Un aperçu enrichi
type ArticleListe = Pick<Article, "id" | "title" | "slug"> & {
  auteur: Pick<User, "id" | "name">;
  nbCommentaires: number;
};

// Rendre certains champs optionnels et pas d'autres
type Optionnel<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

type BrouillonArticle = Optionnel<Article, "slug" | "body">;
// title reste obligatoire, slug et body deviennent facultatifs

class Compte {
  private solde = 0;      // privé pour TypeScript seulement
  #secret = "abc";        // privé réellement, à l'exécution

  verifier() {
    // (compte as any).solde  → accessible à l'exécution
    // compte.#secret         → SyntaxError depuis l'extérieur
  }
}

enum Statut {
  Draft = "draft",
  Published = "published",
}

// Problèmes :
// • génère du code JS à l'exécution (contredit l'effacement des types)
// • incompatible avec l'option isolatedModules dans certains cas
// • const enum est déconseillé et parfois interdit par les bundlers

type Statut = "draft" | "published" | "archived";

const article: { statut: Statut } = { statut: "draft" };
// article.statut = "brouillon"  → erreur, avec suggestion des valeurs valides

// Autocomplétion, zéro code généré, exhaustivité vérifiée dans les switch.
// C'est l'équivalent le plus direct d'un enum PHP backed par string.

export const STATUT = {
  Draft: "draft",
  Published: "published",
  Archived: "archived",
} as const;

// Le type dérivé de l'objet
export type Statut = (typeof STATUT)[keyof typeof STATUT];
// → "draft" | "published" | "archived"

// On garde l'itération et les libellés, comme un enum PHP avec méthode
export const LIBELLES: Record<Statut, string> = {
  draft: "Brouillon",
  published: "Publié",
  archived: "Archivé",
};

Object.values(STATUT).forEach((s) => console.log(LIBELLES[s]));

interface Article {
  publishedAt: string | null;    // colonne nullable en base → null
  views?: number;                // champ facultatif → number | undefined
}

const a: Article = { publishedAt: null };
a.views;             // undefined — la propriété n'existe pas
a.publishedAt;       // null — la propriété existe et vaut null

// Chaînage optionnel — identique à PHP 8
const nom = article?.author?.name;         // $article?->author?->name

// Coalescence nulle — identique à PHP 7
const vues = article.views ?? 0;           // $article->views ?? 0

// ⚠️ Différence importante avec ||
const p1 = valeur || 10;      // remplace aussi 0, "" et false
const p2 = valeur ?? 10;      // remplace SEULEMENT null et undefined

// Affectation par coalescence
options.parPage ??= 20;                    // $options['parPage'] ??= 20

// Appel optionnel
callback?.(resultat);

// Accès indexé optionnel
const premier = liste?.[0];

// ! dit au compilateur : « fais-moi confiance, ce n'est pas null »
const element = document.getElementById("app")!;
element.innerHTML = "…";

// Si l'élément n'existe pas → plantage à l'exécution, sans avertissement.
// TypeScript s'est tu parce que vous le lui avez demandé.

// ✅ Préférable
const element = document.getElementById("app");
if (!element) {
  throw new Error("Conteneur #app introuvable");
}
element.innerHTML = "…";     // narrowing : ici, element n'est pas null

const articles: Article[] = [];

// Sans l'option : TypeScript prétend que c'est un Article
const premier = articles[0];        // Article  (mensonge !)
premier.title;                      // plante à l'exécution

// Avec noUncheckedIndexedAccess : la vérité
const premier = articles[0];        // Article | undefined
premier.title;                      // ❌ erreur de compilation

// Vous êtes forcé de gérer le cas
if (premier) {
  premier.title;                    // ✅
}
// ou
const titre = articles[0]?.title ?? "Aucun";

interface Article {
  id: number;
  title: string;
  publishedAt: string | null;
}

// keyof — l'union des clés
type CleArticle = keyof Article;          // "id" | "title" | "publishedAt"

// Accès indexé — le type d'une propriété
type Titre = Article["title"];            // string
type Valeurs = Article[keyof Article];    // number | string | null

// typeof — récupérer le type d'une VALEUR existante
const config = {
  apiUrl: "https://api.exemple.fr",
  timeout: 5000,
  debug: false,
};

type Config = typeof config;
// { apiUrl: string; timeout: number; debug: boolean }

// Combinaison très fréquente
type CleConfig = keyof typeof config;     // "apiUrl" | "timeout" | "debug"

// C'est ainsi que Partial<T> est écrit dans la bibliothèque standard
type MonPartial<T> = {
  [K in keyof T]?: T[K];
};

// Tout mettre en lecture seule
type MonReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

// Retirer les modificateurs avec le préfixe -
type Mutable<T> = {
  -readonly [K in keyof T]-?: T[K];
};

// Cas réel : un formulaire dérivé d'une entité
type Formulaire<T> = {
  [K in keyof T]: { valeur: T[K]; erreur: string | null; touche: boolean };
};

type FormulaireArticle = Formulaire<Article>;
// { id: { valeur: number; erreur: string | null; touche: boolean }, … }

// Renommer les clés
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type ArticleGetters = Getters<Article>;
// { getId: () => number; getTitle: () => string; … }

type EstTableau<T> = T extends unknown[] ? true : false;

type A = EstTableau<string[]>;    // true
type B = EstTableau<string>;      // false

// infer : capturer un type au passage
type Element<T> = T extends (infer U)[] ? U : never;

type C = Element<Article[]>;      // Article

// C'est ainsi qu'Awaited est écrit
type MonAwaited<T> = T extends Promise<infer U> ? U : T;

type Methode = "GET" | "POST" | "DELETE";
type Ressource = "articles" | "users";

type Route = `/api/${Ressource}`;
// "/api/articles" | "/api/users"

type Endpoint = `${Methode} ${Route}`;
// "GET /api/articles" | "POST /api/articles" | … (6 combinaisons)

// Cas réel : des clés d'événements typées
type Evenement = `article:${"created" | "updated" | "deleted"}`;

function on(evt: Evenement, cb: () => void) { … }

on("article:created", () => {});     // ✅
on("article:publie", () => {});      // ❌ erreur, avec suggestions

type Couleurs = Record<string, [number, number, number]>;

// Avec une annotation : le type devient Couleurs, on perd les clés précises
const palette1: Couleurs = {
  moss: [63, 107, 34],
  rust: [166, 58, 32],
};
palette1.inexistante;        // ✅ accepté — pas ce qu'on veut

// Avec satisfies : vérifié ET précis
const palette2 = {
  moss: [63, 107, 34],
  rust: [166, 58, 32],
} satisfies Couleurs;

palette2.moss;               // [number, number, number]
palette2.inexistante;        // ❌ erreur — les clés sont connues

import { a, b } from "./module";           // nommés
import defaut from "./module";              // par défaut
import defaut, { a } from "./module";       // les deux
import * as tout from "./module";           // espace de noms
import { a as alias } from "./module";      // renommage
import "./styles.css";                      // effet de bord

// import type : supprimé à la compilation, à privilégier pour les types
import type { Article } from "@/types/article";
import { type Article, recuperer } from "@/api/articles";

// Ré-export — le "barrel file" src/types/index.ts
export type { Article } from "./article";
export type { User } from "./user";

src/
  types/            // interfaces partagées, miroir de vos entités API
    article.ts
    user.ts
    api.ts          // ReponseApi<T>, pagination, erreurs
    index.ts        // barrel
  api/              // couche d'accès HTTP — le seul endroit qui fetch
    client.ts
    articles.ts
  features/         // par domaine métier, pas par type technique
    articles/
      ArticleList.tsx
      ArticleCard.tsx
      useArticles.ts
      articlesSlice.ts
  components/       // composants réutilisables sans logique métier
  hooks/
  lib/              // utilitaires purs
  store.ts

import type { ReactNode } from "react";
import type { Article } from "@/types/article";

type ArticleCardProps = {
  article: Article;
  compact?: boolean;
  onSelect?: (id: number) => void;
  children?: ReactNode;
};

export function ArticleCard({ article, compact = false, onSelect }: ArticleCardProps) {
  return (
    <article onClick={() => onSelect?.(article.id)}>
      <h3>{article.title}</h3>
      {!compact && <p>{article.body}</p>}
    </article>
  );
}

// Inférence suffisante
const [ouvert, setOuvert] = useState(false);        // boolean
const [compteur, setCompteur] = useState(0);        // number

// Annotation nécessaire : la valeur initiale ne dit rien
const [articles, setArticles] = useState<Article[]>([]);
const [selection, setSelection] = useState<Article | null>(null);
const [erreur, setErreur] = useState<string | null>(null);

// Refs
const inputRef = useRef<HTMLInputElement>(null);       // élément DOM
const timerRef = useRef<number | undefined>(undefined); // valeur mutable

// Reducer avec union discriminée — le pattern le plus solide
type Etat = { articles: Article[]; chargement: boolean; erreur: string | null };

type Action =
  | { type: "chargement" }
  | { type: "succes"; payload: Article[] }
  | { type: "erreur"; payload: string };

function reducer(etat: Etat, action: Action): Etat {
  switch (action.type) {
    case "chargement": return { ...etat, chargement: true, erreur: null };
    case "succes":     return { articles: action.payload, chargement: false, erreur: null };
    case "erreur":     return { ...etat, chargement: false, erreur: action.payload };
  }
}

const [etat, dispatch] = useReducer(reducer, initial);
dispatch({ type: "succes", payload: articles });     // payload vérifié

// Laissez inférer quand le handler est en ligne
<button onClick={(e) => console.log(e.currentTarget)}>OK</button>

// Handler extrait : il faut annoter
import type { ChangeEvent, FormEvent, MouseEvent, KeyboardEvent } from "react";

const onChange = (e: ChangeEvent<HTMLInputElement>) => {
  setValeur(e.target.value);
};

const onSubmit = (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
};

const onClick = (e: MouseEvent<HTMLButtonElement>) => { … };
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
  if (e.key === "Enter") { … }
};

// Select et textarea
const onSelect = (e: ChangeEvent<HTMLSelectElement>) => { … };

type EtatRequete<T> =
  | { statut: "chargement" }
  | { statut: "succes"; donnees: T }
  | { statut: "erreur"; message: string };

export function useApi<T>(chemin: string): EtatRequete<T> {
  const [etat, setEtat] = useState<EtatRequete<T>>({ statut: "chargement" });

  useEffect(() => {
    let annule = false;

    fetch(chemin)
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json() as Promise<T>;
      })
      .then((donnees) => {
        if (!annule) setEtat({ statut: "succes", donnees });
      })
      .catch((e: unknown) => {
        if (!annule) {
          setEtat({
            statut: "erreur",
            message: e instanceof Error ? e.message : "Erreur inconnue",
          });
        }
      });

    return () => { annule = true; };
  }, [chemin]);

  return etat;
}

// Utilisation : le composant ne peut pas oublier un état
const etat = useApi<Article[]>("/api/articles");

if (etat.statut === "chargement") return <Spinner />;
if (etat.statut === "erreur") return <Erreur message={etat.message} />;
return <Liste articles={etat.donnees} />;

import { configureStore } from "@reduxjs/toolkit";
import articlesReducer from "@/features/articles/articlesSlice";

export const store = configureStore({
  reducer: {
    articles: articlesReducer,
  },
});

// Les deux types dérivés du store — jamais écrits à la main
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

import { useDispatch, useSelector, useStore } from "react-redux";
import type { RootState, AppDispatch, store } from "@/store";

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();
export const useAppStore = useStore.withTypes<typeof store>();

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import type { Article } from "@/types/article";

interface ArticlesState {
  items: Article[];
  chargement: boolean;
  erreur: string | null;
}

const initialState: ArticlesState = {
  items: [],
  chargement: false,
  erreur: null,
};

export const chargerArticles = createAsyncThunk<
  Article[],                     // ce que le thunk retourne
  { page: number },              // son argument
  { rejectValue: string }        // le type d'un rejet
>("articles/charger", async ({ page }, { rejectWithValue }) => {
  const r = await fetch(`/api/articles?page=${page}`);

  if (!r.ok) {
    return rejectWithValue(`HTTP ${r.status}`);
  }

  const json = (await r.json()) as { data: Article[] };
  return json.data;
});

const articlesSlice = createSlice({
  name: "articles",
  initialState,
  reducers: {
    // PayloadAction<T> donne le type de action.payload
    ajouter(state, action: PayloadAction<Article>) {
      state.items.push(action.payload);      // Immer : mutation autorisée
    },
    vider(state) {
      state.items = [];
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(chargerArticles.pending, (state) => {
        state.chargement = true;
        state.erreur = null;
      })
      .addCase(chargerArticles.fulfilled, (state, action) => {
        state.chargement = false;
        state.items = action.payload;        // Article[], inféré
      })
      .addCase(chargerArticles.rejected, (state, action) => {
        state.chargement = false;
        state.erreur = action.payload ?? "Erreur inconnue";
      });
  },
});

export const { ajouter, vider } = articlesSlice.actions;
export default articlesSlice.reducer;

// Sélecteurs typés — l'état est connu
export const selectArticles = (s: RootState) => s.articles.items;
export const selectChargement = (s: RootState) => s.articles.chargement;

import { useAppDispatch, useAppSelector } from "@/hooks";
import { chargerArticles, selectArticles } from "./articlesSlice";

export function ArticleList() {
  const dispatch = useAppDispatch();
  const articles = useAppSelector(selectArticles);   // Article[]

  useEffect(() => {
    dispatch(chargerArticles({ page: 1 }));          // argument vérifié
  }, [dispatch]);

  return <ul>{articles.map((a) => <li key={a.id}>{a.title}</li>)}</ul>;
}

const reponse = await fetch("/api/articles");
const articles = (await reponse.json()) as Article[];

// ⚠️ Aucune vérification. Si l'API renvoie autre chose
// — champ renommé, null inattendu, erreur 500 en HTML —
// le plantage arrive plus loin, au moment de l'affichage,
// avec un message incompréhensible.

function estArticle(v: unknown): v is Article {
  return (
    typeof v === "object" && v !== null &&
    "id" in v && typeof v.id === "number" &&
    "title" in v && typeof v.title === "string"
  );
}

const brut: unknown = await reponse.json();

if (!Array.isArray(brut) || !brut.every(estArticle)) {
  throw new Error("Réponse d'API inattendue sur /api/articles");
}

const articles: Article[] = brut;

import { z } from "zod";

// Une seule source de vérité
export const ArticleSchema = z.object({
  id: z.number().int(),
  title: z.string().min(1),
  slug: z.string(),
  body: z.string(),
  published_at: z.string().datetime().nullable(),
  author: z.object({
    id: z.number().int(),
    name: z.string(),
  }),
  tags: z.array(z.string()).default([]),
});

// Le type TypeScript EST le schéma
export type Article = z.infer<typeof ArticleSchema>;

export const ReponseArticles = z.object({
  data: z.array(ArticleSchema),
  meta: z.object({
    current_page: z.number(),
    total: z.number(),
  }),
});

export async function recupererArticles(page = 1) {
  const r = await fetch(`/api/articles?page=${page}`, {
    headers: { Accept: "application/json" },
  });

  if (!r.ok) {
    throw new Error(`HTTP ${r.status} sur /api/articles`);
  }

  const brut: unknown = await r.json();

  // Ici la vérification est RÉELLE, à l'exécution
  const parsed = ReponseArticles.safeParse(brut);

  if (!parsed.success) {
    console.error("Contrat d'API rompu :", parsed.error.format());
    throw new Error("Réponse inattendue de l'API");
  }

  return parsed.data;      // typé ET vérifié
}