JSON to TypeScript Interface Generator
Turn a JSON sample into ready to use TypeScript interfaces.
Use via API
Generate TypeScript interfaces or type aliases from a sample JSON document. Keys missing from some array items become optional. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/json-to-typescript
curl https://pithlab.com/api/v1/tools/json-to-typescript \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"input":"{\"id\":1,\"title\":\"Hello\",\"author\":{\"name\":\"Ada\"},\"tags\":[\"intro\"]}","rootName":"Post"}'About the JSON to TypeScript
Generate TypeScript interfaces or type aliases from JSON, with named nested types, merged array shapes, optional keys and null unions. Runs in your browser.
How to use the JSON to TypeScript
- Paste a JSON sample, such as an API response, into the input box.
- Set the root type name and choose interfaces or type aliases, with or without the export keyword.
- Nested objects become their own named types, and arrays of objects are merged into one item type.
- Copy the generated TypeScript or download it as a .ts file.
Examples
Input
{"id": 1, "name": "Ada", "address": {"city": "London"}}Output
export interface Root {
id: number;
name: string;
address: Address;
}
export interface Address {
city: string;
}
Input
{"users": [{"name": "Ada", "email": null}, {"name": "Linus", "admin": true}]}Output
export interface Root {
users: User[];
}
export interface User {
name: string;
email?: null;
admin?: boolean;
}
Input
[1, "two", null]
Output
export type Root = (number | string | null)[];
Frequently asked questions
How are arrays of objects handled?
Every object in the array is merged into one item type. A key that is missing from some items is marked optional with ?, and a key whose values differ in type gets a union such as string | number.
What happens with null values?
A key that is null in every sample is typed as null. If it is null in some items and a string in others it becomes string | null. Add more realistic sample data for better types.
How are the nested type names chosen?
Names come from the key in PascalCase, so billing_address becomes BillingAddress. Array item types are made singular where possible, so users gives User. Clashing names get a number added.
Why are some property names in quotes?
Keys that are not valid JavaScript identifiers, such as user-name or 2fa, must be quoted in TypeScript, so the generator quotes them for you.
Should I use interfaces or type aliases?
Either works for describing JSON. Interfaces can be extended and merged, while type aliases suit unions. Pick whichever matches your code style.