🔷

API JSON to TypeScript — Type Your REST API Responses

Auto-generate TypeScript interfaces from any JSON — nested objects · optional fields · readonly · export · 100% Free

JSON INPUT
⚙ OPTIONS
TYPESCRIPT OUTPUT
🔷
TypeScript interfaces appear here
Paste JSON on the left · click a Sample · or drag & drop a .json file
export interface User {
  id: number;
  name: string;
  active: boolean;
  address: Address;
}
Ctrl+Enter GenerateCtrl+Shift+C Copy outputCtrl+L ClearCtrl+S Download .tsP Pin
💡

Typing REST API responses correctly is the foundation of type-safe frontend development. This tool bridges the gap between raw API JSON and typed TypeScript — paste any REST API JSON response and get complete interface definitions ready for your Angular, React, Vue or Node.js project. Stop using any for API responses and get full IDE autocompletion and type safety.

📌 REST API Response to TypeScript Types
GET /api/orders/456 response — 12 fields, 2 nested objects, 1 array
4 interfaces generated: OrderResponse, Customer, Items, Address · Used in: const data: OrderResponse = await fetchOrder(456)

What is JSON to TypeScript Interface Generation?

This tool analyses the structure of your JSON data and automatically generates TypeScript interface or type declarations — saving you the time of writing them manually. It infers string, number, boolean, null, nested object interfaces, and typed arrays. When your JSON is an array of objects, optional fields are detected automatically.

How Nested Objects Are Handled

Every nested JSON object generates its own named TypeScript interface. For example, if your JSON has "address": { "city": "Ahmedabad" }, the tool generates a separate Address interface and references it as address: Address in the parent interface — matching real-world TypeScript project structure.

Frequently Asked Questions

How do I use generated TypeScript types in an Angular HTTP service?

Generated interface: interface ApiResponse { data: User[]; total: number; }. Angular service: this.http.get<ApiResponse>("/api/users").subscribe(res => { console.log(res.data[0].name); }). HttpClient generic typing gives full type safety. No need for any casting or manual type assertions.

How do I type fetch() API responses in TypeScript?

const res = await fetch("/api/data"); const data: ApiResponse = await res.json(). Note: TypeScript trusts you here — json() returns Promise<any> and you're asserting the type. For runtime safety, validate with Zod: const data = ApiResponseSchema.parse(await res.json()). This catches API shape changes at runtime, not just compile time.

What is the best way to type REST API responses for pagination?

Standard paginated response type: interface PaginatedResponse<T> { data: T[]; page: number; limit: number; total: number; hasNext: boolean; }. Usage: const users: PaginatedResponse<User> = await fetchUsers(). This generic pattern works for any resource type — generate the item type (User) from JSON, wrap in PaginatedResponse<User>.

How do I handle API error responses in TypeScript?

Define a union type: type ApiResult<T> = { success: true; data: T } | { success: false; error: string; code: number }. In calling code: if (result.success) { console.log(result.data); } else { console.error(result.error); }. This discriminated union gives TypeScript full type narrowing for both success and error cases.