33. TypeScript Generation | Field Forge - Custom Fields, Built for Speed
Download Log in

33. TypeScript Generation

Developer Guide

Generate TypeScript interfaces from your field groups for type-safe headless frontends. Requires PRO license.

Generated Types Structure

typescript
/**
 * Auto-generated by Field Forge v1.0.0
 */

export interface WPImage {
  ID: number;
  url: string;
  width: number;
  height: number;
  alt: string;
  title: string;
  sizes: Record<string, string>;
}

export interface WPFile {
  ID: number;
  url: string;
  filename: string;
  title: string;
  filesize: number;
  mime_type: string;
}

export interface ProductFields {
  price: number;
  sale_price?: number;
  product_gallery?: WPImage[];
  product_badge?: 'new' | 'sale' | 'bestseller' | '';
  product_specs?: Array<{ label?: string; value?: string }>;
}

export interface FieldForgePostTypeMap {
  'product': ProductFields;
  'page': PageFields;
}

Using in Next.js

typescript
import type { ProductFields, WPImage } from './fieldforge.d.ts';

interface WPPost<T = Record<string, unknown>> {
  id: number;
  title: { rendered: string };
  fieldforge: T;
}

export async function getProduct(id: number): Promise<WPPost<ProductFields>> {
  const res = await fetch(`${process.env.WP_URL}/wp-json/wp/v2/product/${id}`);
  return res.json();
}

const product = await getProduct(42);
const price: number = product.fieldforge.price;

Downloading Types

text
GET /wp-admin/admin-ajax.php?action=fieldforge_download_types&format=typescript&nonce=xxx

Returns fieldforge.d.ts as a file download.

Forge AI Assistant Online

Hi! I'm the Field Forge AI assistant. Ask me anything about the plugin — setup, features, troubleshooting, or development.

Just now
Powered by Forge AI · Browse docs