interface Address {
city: string;
zip: string;
country: string;
}
interface User {
name: string;
email: string;
age: number;
active: boolean;
address: Address;
tags: string[];
scores: number[];
metadata: null;
}
interface Items {
id: number;
name: string;
price: number;
}
interface Root {
user: User;
items: Items[];
}Understanding TypeScript Types from JSON
TypeScript interfaces and types provide compile-time type safety for your JavaScript code. When working with JSON data from APIs, configuration files, or external sources, having accurate types prevents runtime errors and improves editor autocomplete. Converting JSON to TypeScript interfaces gives you a head start — you get a type definition that matches your data structure without writing it by hand.
Type inference from JSON is inherently best-effort: the converter inspects the values present and infers types from them. If your JSON is a complete sample, the generated types will be accurate. For partial data, consider enabling the "all optional" option to allow missing fields.
JSON to TypeScript Conversion Best Practices
Start with representative JSON — include samples that cover all possible shapes, including nested objects, arrays, and null values. Use descriptive root interface names (e.g. ApiResponse, UserProfile) instead of the default "Root" to make the output self-documenting.
For API response typing, paste a real response from your API and generate types. You can then refine the output: add JSDoc comments, rename interfaces, or adjust optional vs required fields based on your API contract. Many teams use generated types as a starting point and maintain them manually as the API evolves.
Type Safety for API Responses
Typing API responses is one of the most common use cases for JSON-to-TypeScript conversion. When you fetch data from a REST or GraphQL API, the response is typically JSON. Without types, you're left with any or unknown, and you lose autocomplete and compile-time checks.
By converting a sample API response to TypeScript interfaces, you get types that describe the shape of your data. Use these types as the generic parameter for fetch or axios: fetch<ApiResponse>(url). Then TypeScript will enforce that you access only existing properties and use the correct types when passing data to components or functions.
Handling Nullable and Optional Fields
JSON often contains null values for optional or missing data. The converter automatically adds | null to types when it encounters null in the input. For example, {"name": "Alice", "nickname": null} produces name: string and nickname: string | null.
The "all optional" option adds ? to every property, making them optional. This is useful when your JSON sample doesn't include every possible field — for instance, when the API returns different fields depending on the request. Combining optional properties with union types gives you flexible, accurate types that match real-world API behavior.
Frequently Asked Questions
Related Tools
Explore More Tools
Find this tool useful? Buy us a coffee to keep DuskTools free and ad-light.