What is the difference between TypeScript interface and type alias for JSON models?

Both work for defining the shape of a JSON object. Interfaces support declaration merging (multiple interface declarations with the same name merge) and are slightly preferred for public API definitions. Type aliases are more flexible: they can represent unions (A | B) and intersections (A & B). For simple JSON models, either works fine.

How are nested JSON objects handled?

Each nested object generates a separate TypeScript interface or type with a name derived from the JSON key in PascalCase. These are referenced from the parent interface.

How are JSON arrays converted?

An array of objects generates an array type (TypeName[]) and a corresponding interface definition. An array of strings becomes string[], an array of numbers becomes number[], and mixed arrays become (string | number | ...)[].

How are null values handled?

JSON null values produce TypeScript types with null in a union: for example string | null. If the value appears nullable in your JSON, the property is also often marked as optional.

Should I use strict null checks with these types?

Yes. Enable strictNullChecks: true in your tsconfig.json. This ensures that null and undefined values must be explicitly handled, making the optional and nullable properties generated by this tool meaningful.

Can I use these interfaces with fetch or axios responses?

Yes. Type your response: const data = await response.json() as YourInterface. Or with axios: axios.get (url). The TypeScript compiler will then enforce the correct shape at compile time.

How do I handle API responses where fields are sometimes missing?

Mark uncertain fields as optional in the interface (propertyName?: Type). If you know the field is always present, remove the question mark. If it can be null or absent, use propertyName?: Type | null.

Completely free. The conversion runs entirely in your browser: no data is sent to any server.

JSON to TypeScript JSON to Go Struct CSS to React Native RN Shadow Generator RN Flexbox Playground JSON to Kotlin JSON to Swift Kotlin Formatter Swift Formatter

JSON → TypeScript

Convert JSON objects into TypeScript interfaces or type aliases. Designed for React Native and mobile development contexts.

Root name

Export as:

Optional nulls (?)Readonly

JSON Input442 chars

TypeScript Output

export interface Preferences {
  theme: string;
  notifications: boolean;
  fontSize: number;
}

export interface User {
  id: number;
  name: string;
  email: string;
  avatar: null;
  roles: string[];
  preferences: Preferences;
  createdAt: string // ISO 8601;
}

export interface Post {
  id: number;
  title: string;
  published: boolean;
  tags: string[];
  views: number;
}

export interface Root {
  user: User;
  posts: Post[];
}

Interfaces generated

Total properties

interface

Export style

Why TypeScript interfaces matter for API-driven applications

Untyped API responses are one of the most common sources of runtime errors in JavaScript applications. A field that was a string in development becomes a number in production; a nested object that always existed starts arriving as null; a camelCase property becomes snake_case after a backend refactor. These issues are invisible at development time without types, and they surface as runtime exceptions that are hard to debug.

TypeScript interfaces define the contract between your API and your application code. When the API changes, TypeScript immediately shows you everywhere in your codebase that depends on the changed field: before you ship, not after. This generator accelerates the tedious part of setting up these contracts by inferring the interface structure from actual JSON responses. Paste a real response, adjust the optionals for your API's actual guarantees, and you have a type-safe model in seconds.

How to convert JSON to a TypeScript interface: step by step

1
Paste your JSON
Copy any valid JSON: an object, array, or nested structure: and paste it into the left input area. The converter handles arbitrarily deep nesting.
2
Set the root interface name
Type a name for the top-level TypeScript interface or type. Use PascalCase as TypeScript convention: for example User, ApiResponse, or ProductList.
3
Choose interface or type alias
Select interface for the traditional TypeScript interface syntax, or type for a type alias. Interfaces can be extended and merged; type aliases support union and intersection types.
4
Review and adjust optional properties
The converter marks properties optional (?) when they appear with null values in the JSON or are missing from some objects in an array. Review these and adjust as needed for your actual API contract.
5
Copy and add to your project
Click Copy to grab the TypeScript definitions and paste them into a .ts or .d.ts file in your project. They are ready to use immediately.

Related Tools

🐹

JSON to Go Struct

Generate Go structs from JSON with json tags, omitempty, pointer types for nullables, and proper PascalCase field name conversion.

📱

CSS to React Native

Convert CSS rules to React Native StyleSheet objects. Handles shorthand expansion, property mapping, and flags unsupported properties.

🌗

RN Shadow Generator

Visually generate React Native shadow props for iOS and Android. Preview shadows in real time and copy platform-specific code.

📐

RN Flexbox Playground

Interactively explore React Native flexbox. Tweak direction, wrap, alignment, and item properties: see live code output.

Frequently Asked Questions

What is the difference between TypeScript interface and type alias for JSON models?: Both work for defining the shape of a JSON object. Interfaces support declaration merging (multiple interface declarations with the same name merge) and are slightly preferred for public API definitions. Type aliases are more flexible: they can represent unions (A | B) and intersections (A & B). For simple JSON models, either works fine.
How are nested JSON objects handled?: Each nested object generates a separate TypeScript interface or type with a name derived from the JSON key in PascalCase. These are referenced from the parent interface.
How are JSON arrays converted?: An array of objects generates an array type (TypeName[]) and a corresponding interface definition. An array of strings becomes string[], an array of numbers becomes number[], and mixed arrays become (string | number | ...)[].
How are null values handled?: JSON null values produce TypeScript types with null in a union: for example string | null. If the value appears nullable in your JSON, the property is also often marked as optional.
Should I use strict null checks with these types?: Yes. Enable strictNullChecks: true in your tsconfig.json. This ensures that null and undefined values must be explicitly handled, making the optional and nullable properties generated by this tool meaningful.
Can I use these interfaces with fetch or axios responses?: Yes. Type your response: const data = await response.json() as YourInterface. Or with axios: axios.get<YourInterface>(url). The TypeScript compiler will then enforce the correct shape at compile time.
How do I handle API responses where fields are sometimes missing?: Mark uncertain fields as optional in the interface (propertyName?: Type). If you know the field is always present, remove the question mark. If it can be null or absent, use propertyName?: Type | null.
Is this tool free?: Completely free. The conversion runs entirely in your browser: no data is sent to any server.

AlteredIdea vs alternatives

vs other online tools: Everything runs in your browser: private, instant, no account needed.

vs desktop apps: No install required. Works on any device.

vs paid tools: Completely free, unlimited use.

Share:Share on X Share on LinkedIn