JSON to TypeScript
Generate TypeScript interfaces from a JSON sample: nested objects, arrays, null fields, four naming conventions and clashing keys.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
export interface RootOwner {
name: string;
email: null;
}
export interface RootItems {
sku: string;
price: number;
note?: string;
}
export interface Root {
id: number;
name: string;
isActive: boolean;
score: number;
owner: RootOwner;
tags: string[];
items: RootItems[];
meta: null;
}Summary: Types 3 · Fields 13 · Name clashes 0
What this tool does
- Turn a sample API response into TypeScript interfaces so the frontend has types immediately instead of copying fields out of the docs.
- Get nullability right: null values become T | null and keys missing from some array elements become optional with ?, which decides whether callers need null checks.
- Keys that are not valid identifiers (dashes, spaces) are emitted as quoted property names, so the generated interface always compiles.
- Annotate mocks and fixtures: tick readonly for an immutable shape, or export to drop the interfaces straight into a .d.ts or module.
Example
Input
{"id":1,"name":"UniKit","tags":["a","b"]}Output
export interface Root {
id: number;
name: string;
tags: string[];
}TypeScript has a single number type, so integers and decimals both become number; null fields become T | null and optional fields are marked with ?.
Frequently asked questions
Why do integers and decimals both become number?
TypeScript's number is an IEEE 754 double, and there is no separate int type. If you need to distinguish integers at runtime you have to add a validation function or a branded type.
What is the difference between nullable and optional?
A null value generates id: number | null — the key must exist but may hold null, so a null check is needed. A key present in only some array elements generates id?: number — it may be absent altogether, so an existence check comes first. A key that is only ever null in the sample is typed as null outright.
What happens with mixed array element types?
They merge into a union, so [1, "a"] becomes (number | string)[] and a nullable item becomes (string | null)[]. Nested unions are parenthesised automatically so precedence stays correct.
Can I use the generated interfaces as-is?
The types are inferred from one sample, so they are only guaranteed for that sample. A real API may have other branches (a field that is sometimes a string and sometimes an object), so review it against the docs first.
Is my JSON uploaded anywhere?
No. Parsing and code generation run locally in your browser, with no network requests, and it works offline.
Keywords：jsontypescriptinterfacejson to typescripttype inferencejson 转 typescriptJSON 转接口类型推断接口生成代码生成