JSON to TypeScript
Generate TypeScript interfaces or types from JSON data. Automatically infers types and creates nested interfaces.
Features
- - Automatically infers TypeScript types from JSON values
- - Generates nested interfaces for objects
- - Handles arrays with consistent item types
- - Supports null and optional properties
- - Choose between interface and type syntax
- - Optionally add export keywords
Understanding JSON to TypeScript
JSON (JavaScript Object Notation) is the most widely used data interchange format on the web. Every REST API, configuration file, and NoSQL database speaks JSON. While JSON is simple and universal, it carries no type information beyond its basic primitives: strings, numbers, booleans, null, objects, and arrays.
TypeScript extends JavaScript with a static type system that catches errors at compile time rather than at runtime. When working with external data sources -- API responses, configuration files, database records -- TypeScript requires type definitions so the compiler can verify that your code handles the data correctly.
This tool bridges the gap by analyzing the structure and values of your JSON data and automatically generating TypeScript interfaces or type aliases. Instead of manually writing type definitions by reading through API documentation or inspecting response payloads, you paste your JSON and get production-ready types in seconds.
Why Generate TypeScript Types from JSON?
Manually writing TypeScript interfaces is tedious and error-prone, especially for large or deeply nested JSON structures. Generating types from actual JSON data offers several advantages:
- Rapid API type generation: Paste a sample API response and instantly get typed interfaces for your frontend code. This accelerates development when integrating with new APIs or third-party services.
- Prototyping TypeScript applications: When starting a new project, generate types from your mock data or database seed files to establish a type foundation quickly.
- Documenting API response shapes: Generated interfaces serve as living documentation of your API contracts. Team members can see exactly what fields and types each endpoint returns.
- Reducing runtime errors: With accurate types, TypeScript catches property misspellings, missing fields, and type mismatches before your code ever runs.
- Migrating JavaScript to TypeScript: When converting an existing JavaScript codebase, generate types from the JSON data your application already handles to bootstrap the migration.
How Type Inference Works
The converter walks through your JSON structure recursively, examining each value to determine its TypeScript type. Here is how different JSON constructs are mapped:
| JSON Value | TypeScript Type |
|---|---|
"hello" (string) | string |
42, 3.14 (number) | number |
true, false | boolean |
null | null |
| Nested object | New named interface |
| Array (same types) | Type[] (typed array) |
| Array (mixed types) | (Type1 | Type2)[] (union array) |
| Empty array | unknown[] |
When a JSON object is encountered as a property value, the converter creates a separate named interface for it, using the property key as the basis for the interface name. For example, an address property containing an object generates an Address interface. Arrays of objects follow a similar pattern, singularizing the key name (e.g., users produces a User interface).
You can choose between interface and type keywords depending on your project conventions. Interfaces are generally preferred for object shapes because they support declaration merging and extension, while type aliases offer more flexibility for unions and intersections.
Before and After Example
Below is a typical API response in JSON and the TypeScript interfaces generated by this tool:
JSON API Response
{
"id": 42,
"title": "Build a REST API",
"completed": false,
"assignee": {
"name": "Alice",
"email": "alice@company.com",
"role": "engineer"
},
"tags": ["backend", "api"],
"priority": 1,
"dueDate": "2026-03-15",
"subtasks": [
{
"id": 1,
"title": "Design schema",
"done": true
},
{
"id": 2,
"title": "Implement endpoints",
"done": false
}
]
}Generated TypeScript
export interface Root {
id: number;
title: string;
completed: boolean;
assignee: Assignee;
tags: string[];
priority: number;
dueDate: string;
subtasks: Subtask[];
}
export interface Assignee {
name: string;
email: string;
role: string;
}
export interface Subtask {
id: number;
title: string;
done: boolean;
}Notice how the nested assignee object becomes its own Assignee interface, and the subtasks array of objects generates a Subtask interface with the key name automatically singularized.
Tips and Best Practices
When an array contains mixed types, the converter generates a union type. Review these to ensure they reflect your actual data contract rather than an anomaly in the sample data you provided.
Enable the "Optional properties" option if your API returns fields conditionally. Alternatively, generate types without optionals first, then manually mark specific fields with ? based on your API documentation.
Auto-generated types are excellent scaffolding, but they may not capture every nuance of your data model. Refine them by adding string literal types, enums, or utility types like Partial<T> and Pick<T, K> where appropriate.
The quality of generated types depends on the completeness of your input. Use a JSON sample that includes all possible fields, including nullable and optional ones, for the most accurate output.
Change the "Root Type Name" option to something meaningful like User, ApiResponse, or ProductConfig. This makes the generated code immediately usable without renaming.
JSON has no native date type, so date values appear as string in the generated types. Consider creating a branded type alias like type ISODateString = string to add semantic meaning to date fields in your codebase.
Related Tools
Explore other tools for working with JSON and generating code: