Le problème de la sécurité des types dans WordPress headless

WordPress headless signifie que WordPress sert de CMS et qu’un frontend JavaScript séparé (Next.js, Astro, Nuxt, etc.) rend les pages. Le frontend récupère le contenu via l’API REST ou WPGraphQL et l’affiche. Pour un contenu simple — titre, extrait, image à la une — les types TypeScript sont intégrés dans la plupart des SDK.

Les champs personnalisés sont le problème. Les champs personnalisés sont définis par des plugins, pas par le cœur de WordPress. TypeScript ne sait pas que votre groupe de champs “Section Héros” a un title: string, subtitle: string, background_image: WPImage, et cta_button: { text: string; url: string; }. Le code frontend qui accède à data.hero_title n’a pas de sécurité de type — les fautes de frappe, les champs manquants et les refactorisations de renommage de champs deviennent tous des erreurs d’exécution.

Les solutions qui existaient avant Field Forge :

• Écrire des types à la main — fastidieux et se désynchronise lorsque vous modifiez des groupes de champs dans WordPress
• Utiliser un any générique — contredit l’objectif de TypeScript
• Utiliser Zod ou une validation d’exécution similaire — ajoute du code standard à chaque appel API
• Utiliser la génération de code à partir du schéma GraphQL — fonctionne si vous utilisez WPGraphQL + GraphQL Code Generator, mais complexe à configurer

Field Forge fournit un chemin plus simple : générer automatiquement des définitions TypeScript directement à partir de vos groupes de champs.

---

Comment cela fonctionne

Étape 1 : Créer un groupe de champs dans Field Forge

Vous concevez un groupe de champs dans le constructeur visuel — disons “Section Héros” avec des champs pour le titre, le sous-titre, l’image de fond et le bouton CTA.

Étape 2 : Cliquez sur “Télécharger TypeScript”

Dans l’écran d’administration du groupe de champs, Field Forge a un bouton “Télécharger TypeScript” qui génère un fichier .d.ts contenant les définitions de type pour tous vos groupes de champs.

Étape 3 : Utilisez les types dans votre frontend

Engagez le fichier .d.ts dans votre dépôt frontend (ou copiez-collez dans un fichier de types existant). TypeScript sait maintenant la forme exacte des données de chaque groupe de champs.

“`typescript import { HeroSectionFields } from ‘./types/fieldforge.d.ts’;

function Hero({ data }: { data: HeroSectionFields }) { return (

{data.title}

{data.subtitle}

{data.cta_button.text}

); } “`

TypeScript détecte les fautes de frappe, les champs manquants et les mauvais types au moment de la compilation. L’autocomplétion de l’IDE fonctionne. Le refactoring est sûr.

---

Mapping des types de champs

Chaque type de champ de Field Forge a un type TypeScript correspondant :

Champ Field Forge	Type TypeScript
Texte	string
Textarea	string
Nombre	number
Plage	number
Email	string
URL	string
Mot de passe	string (sensible)
Image	WPImage (interface intégrée)
Fichier	WPFile
WYSIWYG	string (HTML)
oEmbed	string (HTML intégré)
Galerie	WPImage[]
Sélection (unique)	`’option_a’	‘option_b’	‘option_c’` (union littérale de choix)
Sélection (multiple)	`Array<'option_a'	‘option_b’>`
Case à cocher	string[]
Radio	`’option_a’	‘option_b’`
Vrai/Faux	boolean
Groupe de boutons	`’option_a’	‘option_b’`
Relation	WPPost[]
Objet Post	WPPost
Lien de page	string (URL)
Taxonomie	WPTerm[] ou WPTerm (selon les paramètres)
Utilisateur	WPUser ou WPUser[]
Sélecteur de date	string (format ISO)
Sélecteur de temps	string
Sélecteur de couleur	string (hex ou rgba)
Répéteur	Array (type imbriqué)
Groupe	type imbriqué
Contenu flexible	`Array<LayoutA	LayoutB	LayoutC>` (union discriminée)
Clone	référence au groupe cloné

Types intégrés

Le .d.ts généré par Field Forge inclut des types d’assistance que vous utiliserez tout au long de votre frontend :

“`typescript interface WPImage { id: number; url: string; alt: string; width: number; height: number; sizes: { thumbnail: string; medium: string; large: string; full: string; }; }

interface WPFile { id: number; url: string; filename: string; mime_type: string; filesize: number; }

interface WPPost { id: number; title: string; slug: string; content: string; excerpt: string; date: string; modified: string; featured_image: WPImage | null; categories: WPTerm[]; tags: WPTerm[]; }

interface WPUser { id: number; name: string; email: string; avatar: string; }

interface WPTerm { id: number; name: string; slug: string; description: string; } “`

---

Exemple : Groupe de champs Héros

Un groupe de champs appelé “Section Héros” avec titre, sous-titre, image de fond et bouton CTA génère :

“typescript export interface HeroSectionFields { title: string; subtitle: string; background_image: WPImage; cta_button: { text: string; url: string; open_in_new_tab: boolean; }; } “

Utilisation dans un composant Next.js :

“`typescript import type { HeroSectionFields } from ‘@/types/fieldforge’;

interface Props { hero: HeroSectionFields; }

export function Hero({ hero }: Props) { return (

{hero.title}

{hero.subtitle}

<a href={hero.cta_button.url} target={hero.cta_button.open_in_new_tab ? '_blank' : undefined}

{hero.cta_button.text}

); } “`

Chaque propriété est typée. TypeScript détecte hero.titel (faute de frappe), hero.background_image.URL (mauvaise casse), et hero.cta_button.open_new_tab (mauvais nom de champ) au moment de la compilation.

---

Types de répéteur

Les champs de répéteur deviennent Array. Les répéteurs imbriqués fonctionnent de manière récursive :

“typescript export interface TeamPageFields { team_members: Array<{ name: string; photo: WPImage; bio: string; skills: Array; }>; } “

TypeScript comprend l’imbrication. L’itération sur team_members puis sur skills est entièrement typée.

---

Contenu flexible en tant qu’unions discriminées

Les champs de contenu flexible génèrent des unions discriminées — la fonctionnalité native de TypeScript pour gérer des tableaux de plusieurs types :

“`typescript type HeroLayout = { acf_fc_layout: ‘hero’; title: string; subtitle: string; background_image: WPImage; };

type FeaturesLayout = { acf_fc_layout: ‘features’; section_title: string; features: Array; };

type CTALayout = { acf_fc_layout: ‘cta’; headline: string; button: { text: string; url: string }; };

export interface LandingPageFields { page_sections: Array; } “`

Dans votre composant frontend, utilisez un garde de type pour rendre la bonne mise en page :

“typescript function PageSections({ sections }: { sections: LandingPageFields['page_sections'] }) { return ( {sections.map((section, i) => { if (section.acf_fc_layout === 'hero') { return ; } if (section.acf_fc_layout === 'features') { return ; } if (section.acf_fc_layout === 'cta') { return ; } })} “

À l’intérieur de chaque bloc if, TypeScript réduit section au bon type. Aucun casting nécessaire.

---

Flux de travail de régénération

Lorsque vous modifiez des groupes de champs dans l’administration de Field Forge, les types changent. Pour garder votre frontend synchronisé :

1. Modifiez le groupe de champs dans WordPress
2. Cliquez sur “Télécharger TypeScript” dans l’administration de Field Forge
3. Remplacez le fichier .d.ts dans votre dépôt frontend
4. Engagez le changement

Ou automatisez-le via l’API REST de Field Forge :

“`bash

Récupérer les dernières définitions TypeScript via curl

curl https://wp.example.com/wp-json/fieldforge/v1/typescript > types/fieldforge.d.ts “`

Ajoutez cela à votre pipeline de construction frontend et les types sont toujours à jour.

---

Fonctionne avec n’importe quel framework frontend

Les types TypeScript sont indépendants du framework. Les types générés par Field Forge fonctionnent avec :

• Next.js — basé sur React, excellente intégration TypeScript
• Astro — architecture en îlots, idéale pour les sites de contenu
• Nuxt — basé sur Vue, intégration Nuxt Content
• SvelteKit — basé sur Svelte, support TypeScript intégré
• Remix — basé sur React, orienté serveur
• TypeScript Vanilla — tout frontend qui utilise TypeScript

---

Prêt pour un WordPress headless sécurisé par les types ?

Obtenez Field Forge — à partir de 35 $/an →

La génération TypeScript est incluse dans chaque plan payant. Aucun autre plugin de champs personnalisés WordPress n’a cette fonctionnalité.