Generate TypeScript Types from API Responses
Generate TypeScript interfaces from JSON data in your browser. Handles nested objects, arrays, optional fields. Private, no upload.
The problem
You're integrating with an API that returns JSON, and you need TypeScript types for the response. You could write the interfaces by hand — reading through the JSON, noting each field's type, handling nested objects and arrays. For a simple object, that takes 5 minutes. For a complex API response with nested arrays of objects, optional fields, and mixed types, it takes much longer and you'll probably miss something.
Type generators exist, but most are web apps that upload your data. If you're typing an API response that contains user records, you probably don't want to send that to a third-party server.
How it works
- Paste a JSON sample — an API response, a config object, a database record. The tool auto-generates types on paste.
- See TypeScript interfaces — each object becomes a named interface, arrays get typed, nested objects get their own interfaces.
- Customize the output — set the root type name, choose
interfacevstype, toggle optional fields, toggleexportkeyword. - Copy or download — copy to clipboard or download as a
.tsfile, ready to drop into your project.
Your data never leaves your browser. All processing happens locally.
Why I built it
I write TypeScript daily and I'm tired of manually typing API responses. Paste the JSON, get the interfaces, move on. It handles the tedious parts — inferring types from arrays of objects, marking optional fields, generating named sub-interfaces for nested structures. Pairs naturally with the JSON Formatter for inspecting API responses before generating types.
Tips and reference
Here's how JSON values map to TypeScript types:
| JSON value | TypeScript type | Notes |
|---|---|---|
"hello" | string | |
42 | number | Integers and floats both become number |
true | boolean | |
null | null | Property typed as string | null or marked optional |
{"a": 1} | New interface | Named after the parent key in PascalCase |
[1, 2, 3] | number[] | Element type inferred from contents |
[{"id": 1}, {"id": 2}] | Item[] | Properties merged across all array elements |
[] | unknown[] | Empty array — can't infer element type |
interface vs type in TypeScript
Interfaces support declaration merging (defining the same interface twice combines them) and extends for inheritance. They produce clearer error messages in most editors. Use interfaces for object shapes — especially public API contracts.
Type aliases support unions (A | B), intersections (A & B), mapped types, and can alias primitives. Use types when you need union types, conditional types, or complex transformations.
For generated types from JSON, either works. This tool defaults to interface because it's the most common convention for object shapes in TypeScript codebases.
Built with vanilla HTML/JS. No frameworks, no backend, loads instantly.