TypeScript tutorial
How to Create a Mock API from a TypeScript Interface
A TypeScript interface can become a working mock REST endpoint by defining the response contract, binding it to a resource, and running the synchronized project locally. This guide compares that workflow with maintaining JSON fixtures by hand.
By Mock API Studio · Published September 17, 2026 · Updated September 17, 2026
Start with the TypeScript interface
Model the response the frontend expects, including stable IDs, meaningful field names, and explicit unions for finite states.
export interface Product {
id: string;
name: string;
price: number;
inStock: boolean;
category: "keyboards" | "monitors";
}Understand the manual approach
A small team can write a JSON array and return it from a development route. That is reasonable for one static response, but CRUD state, generated variation, pagination, authentication, and relationship integrity add maintenance quickly.
[{ "id": "product-1", "name": "Mechanical Keyboard", "price": 89.99, "inStock": true, "category": "keyboards" }]Avoid drift in hand-maintained JSON
Copied fixtures do not fail when the interface changes. They also tend to repeat IDs and values, omit boundary cases, and become separate from the endpoint behavior. Keep simple fixtures when they are enough; use a stateful mock when the frontend depends on interactions.
Create the Mock API Studio resource
Add the interface to the model workspace, validate it, create /products, bind Product as a collection response, and enable the operations the UI needs.
Inspect generated response data
Start with a fixed seed so teammates see the same initial records. Semantic field names generate useful values while the category union remains constrained.
{ "id": "a87a...", "name": "Ergonomic Keyboard", "price": 114.25, "inStock": true, "category": "keyboards" }Call the endpoint from the frontend
Keep the development base URL in environment configuration so the production switch does not require rewriting request code.
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/products`);
const result: { data: Product[] } = await response.json();Related questions
When is a JSON fixture enough?
Use one when the response is small and static and the frontend does not need persistent CRUD or behavior simulation.
Keep exploring
Last updated September 17, 2026. Product behavior described here is verified against the current Mock API Studio runtime.