JSON to TypeScript - Generate Interfaces & Types Online
Paste JSON and instantly generate TypeScript interfaces, types, and enums. Convert API responses to type-safe code — 100% in your browser.
Frequently Asked Questions
What is a JSON to TypeScript converter?
A JSON to TypeScript converter is a tool that automatically generates TypeScript interfaces or type aliases from JSON data. Instead of manually writing type definitions for your API responses or configuration files, you paste in a sample JSON object and the tool infers the correct TypeScript types for every field, including nested objects, arrays, and nullable values.
How do I generate TypeScript interfaces from JSON?
Simply paste your JSON data into the input field on the left side. The tool will instantly generate TypeScript interfaces in the output panel on the right. You can customize the output by setting the root interface name, choosing between 'interface' and 'type' syntax, toggling the 'export' keyword, and adjusting other formatting options. Once satisfied, click 'Copy' to copy the generated code to your clipboard.
Should I use TypeScript interface or type alias?
Both work for defining object shapes, but they have differences. Interfaces are generally preferred for object definitions because they can be extended with 'extends' and merged with declaration merging. Type aliases are more versatile and can represent unions, intersections, and primitive types. Use interfaces for public API contracts and type aliases for complex type compositions. This tool lets you toggle between both styles.
How does the converter handle nested JSON objects?
When the tool encounters a nested object, it creates a separate named interface for it. For example, if your JSON has a 'user' object with an 'address' sub-object, the tool generates both a 'User' interface and an 'Address' interface. You can also choose 'inline nested types' in the options to define nested types directly within the parent interface instead of creating separate ones.
Is my JSON data secure when using this tool?
Yes, completely. This tool processes everything in your browser using client-side JavaScript. Your JSON data never leaves your computer - there are no server uploads, no API calls, and no data storage. This makes it safe to use with sensitive API responses, proprietary data schemas, and confidential configuration files.
How does the tool handle null values in JSON?
When a JSON field has a null value, the tool generates a union type with null, such as 'field?: string | null'. The property is marked as optional with the '?' modifier. This ensures your TypeScript types accurately represent the nullable nature of the data.
What happens with arrays that contain mixed types?
If a JSON array contains elements of different types (e.g., strings and numbers), the tool generates a union array type like '(string | number)[]'. For arrays of objects with different shapes, the tool merges the object types into a single interface with optional properties. Empty arrays are typed as 'unknown[]'.
Code Examples
// JSON to TypeScript interface generator
function jsonToTypeScript(json, rootName = 'Root') {
const interfaces = [];
function inferType(value, name) {
if (value === null) return 'null';
if (Array.isArray(value)) {
if (value.length === 0) return 'unknown[]';
const types = [...new Set(value.map((item) => inferType(item, name + 'Item')))];
const typeStr = types.length > 1 ? `(${types.join(' | ')})` : types[0];
return `${typeStr}[]`;
}
if (typeof value === 'object') {
const interfaceName = toPascalCase(name);
const properties = Object.entries(value).map(([key, val]) => {
const type = inferType(val, key);
const optional = val === null ? '?' : '';
return ` ${key}${optional}: ${type};`;
});
interfaces.push(`interface ${interfaceName} {\n${properties.join('\n')}\n}`);
return interfaceName;
}
return typeof value;
}
function toPascalCase(str) {
return str.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase());
}
const parsed = JSON.parse(json);
inferType(parsed, rootName);
return interfaces.reverse().join('\n\n');
}
const json = '{"name": "Alice", "age": 30, "address": {"city": "NYC"}}';
console.log(jsonToTypeScript(json));