Convert JSON to TypeScript
This tool converts JSON data into TypeScript interface or type definitions. Paste or type JSON on the left, and TypeScript types appear on the right. Customize interface names, choose between interface and type syntax, and handle optional properties.
Conversion Examples
JSON Input
{
"name": "Alice",
"age": 25,
"active": true,
"email": "[email protected]"
}
TypeScript Output
export interface Root {
name: string;
age: number;
active: boolean;
email: string;
}
JSON Array
{
"users": [
{ "id": 1, "name": "Bob" },
{ "id": 2, "name": "Carol" }
]
}
TypeScript Output
export interface RootUser {
id: number;
name: string;
}
export interface Root {
users: RootUser[];
}
Nested Objects and Complex Types
JSON Input
{
"user": {
"name": "Dave",
"contact": {
"email": "[email protected]",
"phone": null
},
"roles": ["admin", "user"]
}
}
TypeScript Output
export interface RootUserContact {
email: string;
phone: null;
}
export interface RootUser {
name: string;
contact: RootUserContact;
roles: string[];
}
export interface Root {
user: RootUser;
}
Nested objects are extracted as separate interfaces with descriptive names. Arrays of primitives become typed arrays. Null values are preserved as type "null".
About JSON to TypeScript Conversion
TypeScript is a typed superset of JavaScript that adds static type checking. When working with JSON data from APIs, databases, or configuration files, defining TypeScript interfaces ensures type safety and enables IDE autocomplete, refactoring, and error detection at compile time.
How the conversion works
- Strings map to
stringtype. - Numbers map to
numbertype (integers and floats are bothnumberin TypeScript). - Booleans map to
booleantype. - null maps to
nulltype (or union with the expected type if data is inconsistent). - Arrays are typed based on their contents. Homogeneous arrays become
Type[], heterogeneous arrays become union types like(string | number)[]. - Nested objects are extracted as separate interfaces with names derived from their parent property (e.g.,
UserAddressforuser.address). - Property names are preserved exactly as they appear in JSON. Invalid TypeScript identifiers are quoted.
When to use this tool
- Defining types for API responses from REST or GraphQL endpoints.
- Creating interfaces for JSON configuration files.
- Generating types from sample data for testing or prototyping.
- Migrating JavaScript projects to TypeScript with existing JSON data.
- Documenting data structures from third-party APIs.
Interface vs Type Alias
interface is best for object shapes that may be extended or implemented by classes. Interfaces can be merged (declaration merging) and are slightly more performant for the compiler.
type is more flexible and supports unions, intersections, mapped types, and conditional types. Use types for complex type compositions or when you need features beyond simple object shapes.
Frequently Asked Questions
How do I convert JSON to TypeScript interfaces?
Paste your JSON into the input field. The converter parses the structure and generates TypeScript interface definitions. Nested objects become separate interfaces, arrays are typed with proper array syntax, and primitive values map to TypeScript types (string, number, boolean). The output appears instantly.
What is the difference between interface and type in TypeScript?
Both define object shapes, but interfaces can be extended and merged, while types are more flexible and support unions, intersections, and mapped types. For simple object shapes, use interfaces. For complex types, unions, or computed types, use type aliases. This tool lets you choose either format.
How does the converter handle nested objects?
Nested objects are extracted as separate named interfaces. For example, if your JSON has a "user" object with an "address" object inside, the converter generates a UserAddress interface and references it in the User interface. This keeps types organized and reusable.
How are JSON arrays converted to TypeScript types?
Arrays with consistent item types become typed arrays (e.g., string[], number[], User[]). Arrays with mixed types become union arrays (e.g., (string | number)[]). Arrays of objects generate a separate interface for the object type.
How does the tool handle null values?
Null values are typed as null by default. If the "Make properties optional" option is enabled, nullable fields also get the optional (?) modifier. This follows TypeScript best practices for nullable data from APIs.
Can I customize the generated interface names?
Yes. The Root Interface Name option lets you set the name of the top-level interface. Nested interfaces are named automatically based on their parent property name (e.g., UserAddress for the address property in User).
What if my JSON has inconsistent types in arrays?
If an array contains multiple types (e.g., strings and numbers), the converter generates a union type like (string | number)[]. If objects in an array have different shapes, the converter merges all properties into one interface and marks differing fields as optional.
Is my JSON data sent to a server?
No. This converter runs entirely in your browser using JavaScript. Your JSON data is never uploaded to any server. Nothing is stored or logged.
Privacy and Limitations
Privacy: All conversion runs locally in your browser. No data is transmitted to any server. Your JSON input and TypeScript output remain on your device.
Limitations: This tool infers types from sample JSON data. If your actual data has fields that are sometimes strings and sometimes numbers, the converter can only infer types from the sample you provide. For complete type safety, review and adjust the generated types. Very large JSON documents may be slow to convert.
Related Tools
Related Tools
View all toolsBig-O Notation Visualizer
Interactive plot of O(1) through O(n!) complexity curves with operation count comparison
JSON Formatter
Format and beautify JSON with proper indentation
JSON Validator
Validate JSON syntax and show errors
CSV to JSON Converter
Convert CSV data to JSON format with auto-detection
JSON to CSV Converter
Convert JSON arrays to CSV format with nested object handling
JWT Decoder
Decode JWT tokens and display header and payload
JSON to TypeScript Converter FAQ
How do I convert JSON to TypeScript interfaces?
Paste your JSON into the input field. The converter parses the structure and generates TypeScript interface definitions. Nested objects become separate interfaces, arrays are typed with proper array syntax, and primitive values map to TypeScript types (string, number, boolean). The output appears instantly in the right panel.
What is the difference between interface and type in TypeScript?
Both define object shapes, but interfaces can be extended and merged, while types are more flexible and support unions, intersections, and mapped types. For simple object shapes, use interfaces. For complex types, unions, or computed types, use type aliases. This tool lets you choose either output format.
How does the converter handle nested objects?
Nested objects are extracted as separate named interfaces. For example, if your JSON has a "user" object with an "address" object inside, the converter generates a UserAddress interface and references it in the User interface. This keeps types organized and reusable.
How are JSON arrays converted to TypeScript types?
Arrays with consistent item types become typed arrays (e.g., string[], number[], User[]). Arrays with mixed types become union arrays (e.g., (string | number)[]). Arrays of objects generate a separate interface for the object type.
How does the tool handle null values?
Null values are typed as "null" by default. If the "Make properties optional" option is enabled, nullable fields also get the optional (?) modifier. This follows TypeScript best practices for nullable data from APIs.
Can I customize the generated interface names?
Yes. The Root Interface Name option lets you set the name of the top-level interface. Nested interfaces are named automatically based on their parent property name (e.g., UserAddress for the address property in User).
Is my JSON data sent to a server?
No. This converter runs entirely in your browser using JavaScript. Your JSON data is never uploaded to any server. Nothing is stored or logged.
What if my JSON has inconsistent types in arrays?
If an array contains multiple types (e.g., strings and numbers), the converter generates a union type like (string | number)[]. If objects in an array have different shapes, the converter merges all properties into one interface and marks differing fields as optional.