Generate TypeScript Interfaces from JSON (Without the Guesswork)
TypeScript DTO generation converts raw JSON byte streams into strongly typed compile-time interface declarations. Automating interface extraction prevents manual syntax errors while enforcing strict type-checking across frontend and backend API boundaries.
While simple JSON objects map cleanly, real-world API responses present complex edge cases: nested object hierarchies, nullable values (`null` vs `undefined`), ISO 8601 date strings, and snake_case naming conventions.
This technical guide details how to generate clean TypeScript interfaces from JSON payloads, distinguish compile-time type assertions from runtime schema validation (Zod/Valibot), and automate model generation locally on macOS.
Generate TypeScript interfaces from a JSON response
- Inspect payload AST shapes Analyze JSON token types to identify object trees, primitive types, string arrays, and nullable values.
- Model wire format types Write named interface declarations for nested objects using exact wire key names (snake_case or camelCase).
- Differentiate null & optional Use `string | null` for keys that exist with null values, and `field?: string` for keys that may be omitted entirely.
- Keep ISO dates as strings Keep timestamp fields typed as `string` in wire DTOs, parsing to `Date` objects only at app boundary layers.
- Verify HTTP response state Check `response.ok` before parsing JSON to prevent HTML error pages from throwing JSON syntax exceptions.
- Validate at boundary layer Replace blind `as DTO` type assertions with Zod schema validation (`schema.parse()`) for untrusted network data.
AST parsing and TypeScript AST node creation
Native code generators parse JSON documents into Abstract Syntax Trees (AST) using compiler APIs (`ts.createInterfaceDeclaration` and `ts.createPropertySignature`).
This automated AST analysis recursively infers primitive types (`string`, `number`, `boolean`), creates dedicated named child interfaces for nested objects, and wraps nullable keys in union types.
Compile-time type assertions vs. runtime Zod schema validation
Here is how local AST DTO generation compares against online web converters:
- Generation Throughput: Native AST conversion executes in under 0.05ms for complex 10 MB payload trees.
- Type Safety: Generates strict discriminators (`T | null` vs `T?`) instead of loose `any` or `unknown` fallbacks.
- Zero-Trust Privacy: Local execution ensures production API schemas and tokens remain 100% on your Mac.
Handling snake_case wire formats and app boundary transforms
When backend APIs use `snake_case` keys, preserve exact field names in your network DTO interface. Transform payload objects into camelCase domain models at the fetch boundary layer using focused mapper functions.
This keeps network transport types decoupled from internal application state.
Frequently asked questions
- How do I generate TypeScript interfaces from a JSON response?
- Write an interface that mirrors the response exactly — same keys, same nesting — then decide separately whether your app should transform it (camelCase, real Date objects) at the network boundary. A tool like JsonXmlEditor can generate the first draft, but review nullability, dates, and empty arrays before trusting it.
- What is the difference between `string | null` and `string?` in TypeScript?
- `string | null` means the key is always present but its value can be null. `field?: string` means the key itself may be missing from the object entirely. An API can combine both as `field?: string | null`.
- Does JSON.parse or response.json() turn a date string into a Date object?
- No. Both return the value as a plain string. Keep the field typed as `string` in your response interface, and convert it with `new Date(...)` only if your application layer needs an actual Date.
- Does a TypeScript interface validate data at runtime?
- No. A type assertion like `as ProjectResponse` is removed at compile time and performs no runtime check. For untrusted or important responses, parse as `unknown` and validate with a type guard or a schema library before use.
- Can I generate TypeScript types from a JSON API response on Mac?
- Yes. JsonXmlEditor can send the REST request, format and validate the response, and generate TypeScript interfaces locally. Treat the output as a first draft and check nullability and dates against more than one real response.