Converting JSON to TypeScript interfaces means inferring field names, value types, arrays, and nested objects from a real sample.
When frontend developers integrate an API, they often receive a JSON response first and write the TypeScript type by hand. That works for small objects, but nested responses make it easy to miss fields or misread nullable values.
A Simple Example
{
"id": 1001,
"name": "ToolGarden",
"active": true,
"tags": ["json", "typescript"],
"profile": {
"score": 98.5,
"city": null
}
}This sample contains a root object, a nested profile object, a string array, and a null field.
interface Root {
id: number;
name: string;
active: boolean;
tags: string[];
profile: Profile;
}
interface Profile {
score: number;
city: null;
}How Types Are Inferred
| JSON value | TypeScript type | Notes |
|---|---|---|
| String value | string | Common for names, emails, and URLs |
| Number value | number | TypeScript does not separate int and float |
| true / false | boolean | Common for status fields |
| Array value | T[] | Element types are inferred from array items |
| Object value | interface | Nested objects usually become new interfaces |
| null value | null or union type | A single sample may not reveal every possible value |
What Should You Check After Generation?
- Empty arrays cannot reveal their item type, so provide a more complete sample when possible.
- Fields that may be null should often become union types such as string | null.
- Rename temporary interfaces such as Root or Item to match your domain model.
- Date-like strings are still strings unless your code actively converts them to Date objects.
Summary
Generated interfaces are an excellent first draft. Before using them in production code, review optional fields, nullable values, enum-like strings, and naming.