JSON to TypeScript
Generate TypeScript interfaces from JSON data online. Free JSON to TypeScript converter with nested types and optional properties.
Features
- Generates nested interfaces for objects
- Handles arrays and infers item types
- Supports null and undefined values
- Auto-singularizes array item interface names
- Handles special characters in property names
About JSON to TypeScript
Generate TypeScript interfaces from JSON data automatically. Perfect for creating type definitions for API responses, configuration files, and data models.
How to Use JSON to TypeScript
Paste your JSON
Paste a JSON sample (typical API response, config object, or data structure) into the input editor. More representative samples produce more accurate types.
Configure options
Choose root interface name, whether to use 'interface' or 'type' keyword, optional vs required field detection, and naming for nested types.
View TypeScript types
Generated interfaces appear instantly with all nested types, arrays correctly typed, and unions where mixed types are detected.
Copy into your project
Click Copy and paste into a .ts file. Import where needed for typed API responses, function parameters, or component props. Adjust types after generation if your data has more nuances than the sample shows.
When to Use JSON to TypeScript
Generating types for untyped APIs
When integrating with an API that has no TypeScript SDK, capture a sample response and generate types. You get autocomplete and type-checking for that API immediately, even without official type definitions. Update the types when the API changes by re-generating from new samples.
Typing third-party SDK return values
Some libraries return generic 'object' or 'any'. Generate proper types from sample outputs to give your code better safety. Useful for older libraries without TypeScript declarations or generic data-fetching libraries (axios, fetch wrappers).
Documentation through types
Types generated from sample data serve as living documentation of your API's structure. Place them in a 'types/' directory in your project; new team members can understand the API by reading types instead of guessing from documentation.
Validating GraphQL or REST responses
When your backend uses GraphQL or generates REST responses dynamically, generated types catch unexpected field changes. Combined with a runtime validator (Zod, io-ts), you can ensure responses match expectations and gracefully handle API drift.
JSON to TypeScript Examples
Simple object
{"name":"Alice","age":30,"active":true}interface Root {\n name: string;\n age: number;\n active: boolean;\n}Each key becomes a property with its inferred type. String values become 'string', numbers become 'number', booleans become 'boolean'. The interface name defaults to 'Root' (configurable in most converters).
Nested objects
{"user":{"name":"Alice","address":{"city":"NYC"}},"role":"admin"}interface User {\n name: string;\n address: Address;\n}\n\ninterface Address {\n city: string;\n}\n\ninterface Root {\n user: User;\n role: string;\n}Nested objects produce separate interfaces. Names are inferred from parent keys (user → User, address → Address). Each interface references the next, building up to the root. Cleaner than inline types for deeply nested structures.
Arrays and unions
{"items":[1,2,3],"mixed":[1,"two",true]}interface Root {\n items: number[];\n mixed: (number | string | boolean)[];\n}Arrays of consistent type become T[]. Arrays with mixed types produce union types. While syntactically correct, mixed arrays often indicate poor API design — consider whether you really want them or whether the data should be normalized.
Tips & Best Practices for JSON to TypeScript
- 1.Provide multiple JSON samples for accurate inference. A single sample can't show optional fields, nullable values, or rare type variations. Combining samples (or analyzing a representative dataset) produces more accurate types.
- 2.Review and refine generated types. Auto-generation produces correct but sometimes overly permissive types. Tighten unions, mark fields as optional or required based on actual API behavior, and add JSDoc comments for documentation.
- 3.For arrays, consider whether order matters. Generated types use T[] which preserves order. If your data is set-like (no duplicates, order doesn't matter), document that intent or use Set<T> in your code.
- 4.Handle nullable fields explicitly. The converter detects null in samples but might not infer 'optional' (missing key) without multiple samples showing the variation. Add '?' to optional fields manually if needed.
- 5.Generated types are a starting point, not the final answer. Use them as a base, then add: branded types for IDs (UserId vs string), discriminated unions for variant data, type guards for runtime narrowing.
- 6.For very complex APIs with many endpoints, consider generating types automatically from OpenAPI/Swagger specs (using tools like openapi-typescript) rather than from sample JSON. Spec-based generation is more accurate and stays in sync.
Frequently Asked Questions
Related Tools
JSON to Python Dataclass
Convert JSON to Python dataclass or Pydantic model definitions. Auto-generate typed Python classes from JSON data. Free converter.
JSON to Rust Struct
Convert JSON to Rust struct definitions with serde derive macros. Auto-generate typed Rust structs from JSON data. Free converter.
JSON to XML
Convert JSON to XML format online instantly. Free JSON to XML converter with proper nesting, attributes, and formatted output.
XML to JSON
Convert XML to JSON format online instantly. Free XML to JSON converter with proper structure mapping and clean formatted output.
JSON to YAML
Convert JSON to YAML format online instantly. Free JSON to YAML converter for configuration files with clean indented output.
YAML to JSON
Convert YAML to JSON format online instantly. Free YAML to JSON converter for parsing configuration and data files accurately.