DevBolt
Processed in your browser. Your data never leaves your device.

How do I generate TypeScript interfaces from JSON?

Paste your JSON data and instantly get TypeScript interfaces with correctly inferred types for strings, numbers, booleans, arrays, nested objects, and nullable fields. Customize the root interface name and toggle between interface and type alias output. Everything runs in your browser — your data never leaves your device.

Convert API response to interfaces
Input
{"id":1,"name":"Alice","email":"a@b.com","active":true}
Output
interface Root {
  id: number;
  name: string;
  email: string;
  active: boolean;
}
← Back to tools

JSON to TypeScript

Generate TypeScript interfaces or type aliases from JSON data. Handles nested objects, arrays, nulls, and mixed types.

About JSON to TypeScript

  • Interfaces vs Types — interfaces are extendable and commonly used for object shapes; type aliases support unions and intersections.
  • Nested objects— by default, each nested object gets its own named type. Enable "Inline nested" to embed them directly.
  • Arrays — element types are inferred from all items. Mixed-type arrays become union types (e.g., (string | number)[]).
  • Root arrays — if your JSON is an array of objects, all objects are merged to produce a complete type.
  • Null values — inferred as null. Enable "Optional props" to mark all properties with ?.
  • Everything runs in your browser — no data is sent over the network.

Tips & Best Practices

Pro Tip

Prefer interfaces over types for object shapes

TypeScript interfaces support declaration merging, better error messages, and faster type checking. Use 'interface' for object shapes (API responses, props, configs) and 'type' for unions, intersections, and mapped types. In large codebases, this distinction improves IDE performance and compiler speed.

Common Pitfall

Inferred types from JSON samples miss nullable fields

If your JSON sample has all fields populated, the generated TypeScript types won't include null or undefined. Real API responses often have optional fields. After generating types, review each field: should it be required or optional (?)? Can it be null? The sample data is just one snapshot — your types should cover all valid states.

Real-World Example

Use utility types to derive related types

Generate the base type from JSON, then use TypeScript utilities: Partial<User> for patch endpoints, Pick<User, 'id' | 'name'> for list views, Omit<User, 'password'> for public responses. This avoids duplicating type definitions and ensures changes propagate automatically.

Security Note

Runtime validation must match your TypeScript types

TypeScript types are erased at runtime — they don't validate actual API data. An API returning {age: "thirty"} won't trigger a type error at runtime even if you typed age as number. Use Zod, io-ts, or valibot to validate data at system boundaries (API calls, form inputs, file reads).

Frequently Asked Questions

How do I generate TypeScript types from JSON?
Paste your JSON data into DevBolt's JSON to TypeScript converter and it automatically infers TypeScript interfaces from the structure. Object keys become interface properties with inferred types (string, number, boolean, null). Nested objects generate separate named interfaces. Arrays infer their element type from the first element. The tool handles optional fields (present in some array items but not others), null values (typed as null union), and mixed-type arrays. You can toggle between interface and type alias output, add export keywords, and download the generated .ts file.
Should I use interface or type for TypeScript types?
Both work for object shapes, but conventions differ. Use interface for object contracts and public APIs — interfaces support declaration merging (extending across files), extends for inheritance, and are the TypeScript team's recommendation for object types. Use type aliases for unions (string | number), intersections, mapped types, conditional types, and non-object types. In practice, for JSON-to-TypeScript conversion, both produce identical results. Most codebases pick one for objects and stay consistent. React component props typically use interface; utility types use type.
How does the JSON to TypeScript converter handle nested objects and arrays?
Nested objects are extracted into separate named interfaces. For example, { "user": { "name": "string" } } generates a root interface with a user property typed as a separate User interface. Arrays of objects generate an interface for the array element type. Arrays of primitives infer the primitive type (string[], number[]). Mixed-type arrays become union types. Deeply nested structures produce multiple interfaces with clear naming based on the property path. Null values create nullable union types (string | null). Empty arrays default to any[] since the element type cannot be inferred.

Related Convert Tools

API

OpenAPI to TypeScript

Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types

ZOD

JSON to Zod Converter

Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields

GQL

GraphQL to TypeScript

Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations

TS

TypeScript to JavaScript

Convert TypeScript to JavaScript — strip types, interfaces, enums, generics, and access modifiers to get clean JS output