📖 What is JSON to TypeScript?
JSON to TypeScript generates TypeScript interface definitions from a JSON sample. Paste any JSON and get properly typed interfaces with string, number, boolean, array and nested object types. Use it when consuming REST APIs in Angular, React or Node.js projects, or when building type-safe data models. Everything runs in your browser.
💡 Example
Input
{"name":"Alice","age":30,"address":{"city":"NYC","zip":"10001"}}
Output
interface Root {
name: string;
age: number;
address: Address;
}
interface Address {
city: string;
zip: string;
}
🛠️ Common Use Cases
- Generating TypeScript interfaces from REST API response samples
- Building type-safe models for React, Angular or Vue components
- Creating request/response types for Node.js API handlers
- Scaffolding types from GraphQL or OpenAPI JSON examples
- Adding type safety to existing JavaScript projects migrating to TypeScript
📝 Type Mapping
- JSON string →
string - JSON number →
number - JSON boolean →
boolean - JSON null →
null - JSON array →
T[] - JSON object → nested
interface
TypeScript does not distinguish between int and float — all JSON numbers map to number.
⚠️ Common Mistakes
- Using a single sample — if a field is missing from your sample, it won't appear in the interface. Use the most complete response available.
- Forgetting optional fields — fields that may be absent should be marked with
? (e.g. middle_name?: string) - Array type ambiguity — an empty array
[] generates any[]. Use a sample with at least one element for accurate typing.
❓ Frequently Asked Questions
Does it handle nested objects? ▾
Yes — nested JSON objects generate separate TypeScript interfaces. The parent interface references the child by name.
Should I use interface or type? ▾
Interfaces are preferred for object shapes — they are extendable and produce better error messages. Use type aliases for unions, intersections or mapped types.
How do I handle optional fields? ▾
Add ? after the property name: middle_name?: string. You may need to manually mark fields as optional based on your API's actual behavior.
Is my data private? ▾
Yes — all processing runs entirely in your browser. Your data is never sent to any server.
Is this tool free? ▾
Completely free — no login, no usage limits, works offline once loaded.
Yes — completely free, no login required, no usage limits.
Is my data private? ▾
Yes — all processing runs in your browser. Your data is never sent to any server.
Does it work offline? ▾
Yes — once the page is loaded, the tool works without an internet connection.