How to use JSON to TypeScript Types
The JSON to TypeScript interface generator infers TypeScript type definitions from any JSON object or API response, handling nested objects, arrays, optional fields, and union types automatically. Manually writing TypeScript interfaces for large API payloads is tedious and error-prone; this tool produces a ready-to-use interface block in seconds — entirely in your browser, with no uploads.
- Paste a JSON object or array into the input field, or upload a .json file.
- The tool analyses the structure and infers types for every key at every nesting level.
- Review the generated TypeScript interfaces in the output panel — nested objects become separate named interfaces.
- Rename the root interface if desired (default is "Root").
- Toggle options: mark fields with null values as optional (?), generate type aliases instead of interfaces, or use readonly modifiers.
- Copy the output and paste it into your TypeScript source file or a dedicated types.ts module.
Your data never leaves your device — 100% private processing.
How type inference works
The generator examines the value of each key to determine its type. Strings map to string, numbers to number, booleans to boolean, null to null (or the union T | null if the same key is non-null elsewhere), arrays to Array<T> where T is inferred from the first element. When an array contains objects, those objects are recursively converted to a named interface. Fields present in some objects but absent in others across a JSON array are marked optional with the ? modifier. Keys whose values vary between primitive types (e.g. sometimes a string, sometimes a number) are typed as string | number.
| JSON value example | Inferred TypeScript type |
|---|---|
| "hello" | string |
| 42 or 3.14 | number |
| true / false | boolean |
| null | null (or T | null) |
| [1, 2, 3] | number[] |
| [{...}, {...}] | MyObject[] |
| (absent in some objects) | T | undefined (optional field) |
Handling edge cases and polymorphic data
Real API responses contain edge cases the generator handles conservatively. Fields that appear as null in the sample but are documented as strings are inferred as null — always review and widen these types manually. Deeply nested structures produce deeply nested interface hierarchies; consider flattening by extracting commonly reused sub-types. Discriminated unions (where a type field determines the shape of sibling fields) cannot be inferred from a single sample and should be written by hand. After generating, run tsc --noEmit to confirm the interfaces compile without errors against your actual usage.
Worked examples
Infer an interface
Inputs: {"id":1,"name":"Al"}
Result: interface Root { id: number; name: string }
Nested object
Inputs: {"user":{"name":"Al"}}
Result: interface User {…}; Root { user: User }
Optional field
Inputs: key absent in some array items
Result: name?: string
Glossary
- TypeScript interface
- A TypeScript construct that describes the shape of an object, specifying required and optional properties and their types.
- Type alias
- A TypeScript "type" keyword declaration that names a type expression, usable for primitives, unions, and intersections as well as objects.
- Optional property
- An interface property marked with ? indicating the key may be absent; its type is implicitly T | undefined.
- Union type
- A TypeScript type like string | number that accepts values of either constituent type.
- Discriminated union
- A union of object types that share a literal-typed "tag" field, enabling exhaustive type narrowing with switch statements.
Related reading
Frequently Asked Questions
Why use JSON to TypeScript Types?
- Infer TypeScript interfaces from any JSON object without writing type definitions by hand
- Generate named sub-interfaces for nested objects at every nesting level automatically
- Mark fields that are null or absent in some array items as optional (T | null or ?)
- Toggle between interface and type alias output to match your project style guide
Common use cases
- Generate interfaces from a REST API response to add type safety to a new service client
- Create a types.ts file from a large API payload to enable autocompletion in VS Code
- Bootstrap TypeScript definitions for a third-party webhook payload before implementing the handler
- Convert a JSON configuration file into typed interfaces for a typed config loader module
- Type a GraphQL query result returned as raw JSON to reduce runtime field-access errors
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Related Developer Tools
JSON Formatter & Validator
Format, validate, and minify JSON instantly. Includes syntax highlighting, error detection, and a collapsible tree view — free, private, in-browser.
JSON to CSV Converter
Convert JSON arrays to CSV format online. Supports nested objects, custom delimiters, and CSV to JSON conversion. Free and private.
YAML ↔ JSON Converter
Convert YAML to JSON and JSON to YAML online. Validate syntax instantly with error messages. Free, private converter that runs in your browser.
XML Formatter
Format and beautify XML online with proper indentation. Pretty print or minify XML and validate basic structure. Free XML formatter in your browser.
Cron Expression Generator
Build and decode cron expressions online. Get a plain-English description of any crontab schedule and a field-by-field breakdown. Free cron generator.
Regex Tester
Test and debug regular expressions online. See live matches, capture groups, and replace output. Free, private, instant.
Explore all Developer Tools.