How to use the json to typescript converter
- Paste your JSON into the input area.
- Set the Root name for the top-level interface or type alias.
- Choose between
interfaceandtypeoutput styles. - Toggle Add export keyword if you need the declarations exported.
- Copy the generated TypeScript code directly from the result area.
How the inference works
The converter walks the parsed JSON tree and maps each value to a TypeScript type. Strings become string, finite numbers become number, booleans become boolean and null stays null. Nested objects are extracted into their own named declarations using PascalCase derived from the parent key.
Arrays require special handling. If every element shares the same primitive type, the result is that type followed by brackets, such as string[]. When elements are objects, the converter merges all keys found across every element. Keys present in some objects but absent in others are marked optional with a question mark. An empty array produces unknown[] because there is no data to infer from. Mixed types within an array produce a union wrapped in parentheses, like (string | number)[], including when the root value itself is an array. An empty array merged with a typed array of the same property is treated as the typed array, so ["a"] and [] give string[].
Naming conventions
Nested objects receive names based on their key. The key is split on every character that is not a letter or digit (hyphens, underscores, dots, spaces, symbols) and each segment is capitalised into PascalCase. For example, user_profile becomes UserProfile and a.b becomes AB. A name that would start with a digit gets a T prefix, so 2fa becomes T2fa, and a key with no letters or digits at all falls back to Item.
Names that collide with TypeScript or browser globals such as Number, Date, String or Record get a Type suffix (DateType) so the generated declaration does not merge with the built-in one. When a key holds an array of objects, the tool does a naive singularisation by removing a trailing s (but not from words ending in ss, us or is), so users yields User and order_items yields OrderItem; irregular plurals such as categories become Categorie, so rename those by hand. If two keys produce the same name, a numeric suffix is added automatically.
Interface versus type alias
TypeScript offers two ways to declare object shapes. Selecting interface produces declarations that can be extended and merged via declaration merging. Selecting type produces type aliases that use an equals sign and end with a semicolon.
Both forms are structurally identical for most use cases. Interfaces are generally preferred in public library APIs because consumers can augment them. Type aliases are useful when you want a closed shape that cannot be reopened elsewhere. This json to typescript converter supports both so you can match your project conventions without manual editing.
Handling invalid identifiers
JSON keys can contain characters that are not valid identifiers, such as hyphens, dots, spaces or leading digits. When the converter meets such a key it writes the property name as a quoted string, using standard JSON string escaping. For instance, {"my-key": 1} produces "my-key": number;, and a key such as a"b is escaped correctly. Property names that are reserved words, like class, are legal as property names and are left unquoted.
The names of the generated interfaces are sanitised separately (see naming conventions above), so you do not need to rename your JSON properties beforehand. Keys with non-ASCII characters are quoted rather than converted.
Common edge cases
A few patterns deserve attention when you generate typescript types from json. First, numeric values that exceed the safe integer range are still typed as number because TypeScript does not distinguish integer sizes at the type level. Second, if a property holds null in your sample data, it is typed as null unless you enable the optional nulls setting, which adds a question mark instead.
Third, deeply nested structures produce many separate declarations. The root interface always appears first, followed by child interfaces in the order they are encountered during a depth-first traversal. Finally, passing a bare JSON array as the root value means the root declaration describes the shape of each element rather than a wrapper object.
Worked examples
| Example | Input | Result |
|---|---|---|
| Nested object with array | JSON input: {"id":1,"name":"a","tags":["x"],"owner":{"email":"e"},"n":null}; Root name: Root; Output style: interface; Make null values optional: no; Add export keyword: yes | export interface Root { / id: number; / name: string; / tags: string[]; / owner: Owner; / n: null; / } / export interface Owner { / email: string; / } / |
| Array of objects with missing keys | JSON input: [{"a":1},{"a":2,"b":"x"}]; Root name: Item; Output style: interface; Make null values optional: no; Add export keyword: yes | export interface Item { / a: number; / b?: string; / } / |
| Keys requiring quotes | JSON input: {"my-key":1,"valid_key":true}; Root name: Config; Output style: type; Make null values optional: no; Add export keyword: no | type Config = { / "my-key": number; / valid_key: boolean; / }; / |
| Mixed types in an array | JSON input: {"data":[1,"two",null,true]}; Root name: Response; Output style: interface; Make null values optional: yes; Add export keyword: yes | export interface ResponseType { / data: (boolean | null | number | string)[]; / } / |
FAQ
Does this tool upload my JSON to a server?
No. The conversion happens entirely in your browser using JavaScript. Your data never leaves your device.
What happens if my JSON array contains mixed types?
The converter creates a union type. For example, an array containing both numbers and strings produces (number | string)[].
Can I use the output directly in a TypeScript file?
Yes in almost every case. Enable the export keyword option and paste the result into a .ts file. Interface names are sanitised into valid identifiers and awkward property keys are quoted, so the output is syntactically valid. It describes only the sample you pasted, so review optional fields, unknown[] placeholders and union types against the real API.
How are empty arrays handled?
An empty array has no elements to inspect, so the tool types it as unknown[]. You should replace unknown with the actual type later.
Why are some property names wrapped in quotes?
JSON keys that contain hyphens, dots, spaces or start with digits are not valid TypeScript identifiers, so they are written as quoted property names. Quoted names are legal in interfaces and type aliases.
What does the optional nulls setting do?
When enabled, any property whose value is null in the sample JSON is marked with a question mark instead of being typed strictly as null. This is useful when null indicates a missing value.