BaliseTonSite

Inférence de Types & Schémas

Génère des interfaces TypeScript depuis ta REST API WordPress ou ton schéma GraphQL en quelques secondes.

Imagine un forgeron magique qui, au lieu de façonner chaque pièce d'armure à la main, lit les plans du donjon et fabrique instantanément l'équipement parfaitement adapté. C'est exactement ce que fait l'inférence de types automatique.

Tu as une API qui retourne du JSON ? L'IA peut en déduire l'interface TypeScript complète en moins d'une minute.

1.1Les blueprints magiques du forgeron

Dans un RPG de crafting, avant de forger une armure, tu as besoin d'un blueprint : le plan exact de chaque pièce, ses dimensions, ses propriétés. Sans plan, tu forges à l'aveugle et tu obtiens quelque chose d'inutilisable.

Ton JSON d'API, c'est ce blueprint. Tes interfaces TypeScript, c'est l'armure finie. Et l'IA, c'est le forgeron magique qui lit le blueprint et génère l'armure instantanément, sans que tu aies à tailler chaque maille à la main.

1.2Le problème : les types à la main, c'est l'enfer

Tu appelles ton API WordPress REST et tu reçois ça :

Réponse API WordPress /wp/v2/posts
{
  "id": 42,
  "date": "2026-02-20T10:00:00",
  "slug": "mon-article",
  "status": "publish",
  "type": "post",
  "link": "https://monsite.com/mon-article",
  "title": { "rendered": "Mon article" },
  "content": { "rendered": "<p>...</p>", "protected": false },
  "excerpt": { "rendered": "<p>...</p>", "protected": false },
  "author": 1,
  "featured_media": 0,
  "categories": [3, 7],
  "tags": [],
  "_embedded": {
    "author": [{ "id": 1, "name": "Alice", "avatar_urls": { "96": "..." } }],
    "wp:featuredmedia": [{ "id": 0, "source_url": "..." }]
  }
}

Typiquement, tu ouvres un fichier types.ts et tu commences à taper à la main… 20 minutes plus tard, tu as raté 3 champs, mal typé _embedded, et oublié que categories est un tableau de nombres.

L'approche artisanale (lente et faillible)

  • • 20-30 min de saisie manuelle par endpoint
  • • Types désynchronisés dès que l'API change
  • • Erreurs de frappe sur les noms de champs
  • • Objets imbriqués souvent mal typés ou mis à any

1.3La solution : le prompt "forger mes types"

Colle ton JSON dans ton IA (Claude, Copilot, ChatGPT) avec ce prompt :

Prompt : Inférence de types depuis JSON
Tu es un développeur TypeScript senior.

Voici la réponse JSON d'un endpoint WordPress REST API :
[COLLE TON JSON ICI]

Génère les interfaces TypeScript correspondantes :
- Noms en PascalCase (WpPost, WpAuthor, etc.)
- Types précis (pas de any)
- Champs optionnels marqués avec ?
- Objets imbriqués dans des interfaces séparées
- Ajoute un commentaire JSDoc sur chaque interface

Format : un fichier TypeScript propre, prêt à l'emploi.

L'IA génère quelque chose comme :

Résultat : types WordPress auto-générés
/** Média embarqué (image à la une, etc.) */
interface WpFeaturedMedia {
    id: number;
    source_url: string;
}

/** Auteur embarqué */
interface WpAuthor {
    id: number;
    name: string;
    avatar_urls: Record<string, string>;
}

/** Objets embarqués via _embedded */
interface WpEmbedded {
    author: WpAuthor[];
    'wp:featuredmedia'?: WpFeaturedMedia[];
}

/** Contenu ou extrait rendu */
interface WpRendered {
    rendered: string;
    protected: boolean;
}

/** Article WordPress complet */
export interface WpPost {
    id: number;
    date: string;
    slug: string;
    status: 'publish' | 'draft' | 'pending' | 'private';
    type: string;
    link: string;
    title: WpRendered;
    content: WpRendered;
    excerpt: WpRendered;
    author: number;
    featured_media: number;
    categories: number[];
    tags: number[];
    _embedded?: WpEmbedded;
}

Astuce : union types précis

Demande à l'IA de déduire les union types pour les champs à valeurs connues (comme status). Dis-lui explicitement : "Pour les champs à valeurs limitées, utilise un union type plutôt que string."

1.4L'outil dédié : Quicktype

Pour les projets avec beaucoup d'endpoints, il existe Quicktype, un outil spécialisé dans la génération de types depuis du JSON.

Installation Quicktype
# Installation globale
npm install -g quicktype

# Générer les types depuis un fichier JSON
quicktype wp-post.json -o types/WpPost.ts --lang typescript

# Depuis une URL directement
quicktype https://monwp.com/wp-json/wp/v2/posts -o types/WpPost.ts

Quicktype génère des types exacts, avec des classes ou interfaces au choix, et même des fonctions de parsing/validation.

1.5GraphQL : encore plus simple

Si tu utilises GraphQL (WPGraphQL par exemple), tes types sont déjà dans le schéma. Il suffit de les en extraire :

Génération depuis un schéma GraphQL
# Installer le générateur officiel
npm install -D @graphql-codegen/cli @graphql-codegen/typescript

# codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'https://monwp.com/graphql',
  generates: {
    './lib/types/graphql.ts': {
      plugins: ['typescript'],
    },
  },
};

export default config;

# Lancer la génération
npx graphql-codegen

Résultat : un fichier graphql.ts complet avec tous les types de ton schéma, mis à jour en une commande.

La checklist du forgeron express

  • Colle la réponse JSON de chaque endpoint dans l'IA avec le prompt ci-dessus
  • Demande des union types pour les champs à valeurs énumérées
  • Regroupe tous tes types dans lib/types/
  • Pour les gros projets GraphQL : mise en place de graphql-codegen

Verifie tes acquis

5 questions pour valider ce chapitre

1. Qu'est-ce que l'inférence de types avec l'IA ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM complété s'enregistre comme un checkpoint dans ton tableau de bord personnel. Crée ton profil de développeur gratuitement pour débloquer toutes les évaluations du site et suivre ta progression étape par étape.

Commencer l'aventure
Déjà membre ?Connecte-toi