How to generate typescript types from api response json
- Step 1Capture a real API response — Make the API call from Postman or the browser DevTools Network tab. Copy the full response body. Use a successful response with all fields populated — a minimal response generates an incomplete type.
- Step 2Generate the TypeScript interfaces — Paste the JSON and convert. For a paginated response like { data: [...], pagination: {...} }, the tool generates both a Data item interface and a Pagination interface.
- Step 3Apply to your fetch wrapper — Annotate your API function with the generated type: async function getUsers(): Promise<UsersResponse> { const res = await fetch('/api/users'); return res.json() as Promise<UsersResponse>; }.
- Step 4Keep types in sync with the API — Regenerate types when the API changes. For production APIs, consider generating types from the OpenAPI spec using openapi-typescript: npx openapi-typescript api/openapi.yaml -o types/api.d.ts.
Frequently asked questions
How do I type an API response that can be either a success or an error shape?+
Generate interfaces for both shapes: SuccessResponse and ErrorResponse. Define a union type: type ApiResult = SuccessResponse | ErrorResponse. Use a type guard to discriminate: function isError(r: ApiResult): r is ErrorResponse { return 'error' in r; }.
What is the best way to keep API types in sync as the API evolves?+
For APIs you control: generate types from the OpenAPI spec using openapi-typescript as a build step. For third-party APIs: check if they publish TypeScript types (DefinitelyTyped @types/stripe, @types/twilio). For APIs with no types, regenerate manually from a fresh API response when you detect a discrepancy.
Is the API response data transmitted to JAD Apps?+
No. Conversion runs entirely in your browser. API responses with customer data are never transmitted to JAD Apps servers.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.