JSON to TypeScript

Automatically convert JSON data to TypeScript interfaces or type definitions

JSON Input
Lines: 1 | Chars: 0
TypeScript Output
// TypeScript type definitions will be generated automatically
Types: 0 | Lines: 1

What is JSON to TypeScript?

JSON to TypeScript is a tool that automatically converts JSON data to TypeScript type definitions. It analyzes the JSON structure and generates corresponding interface or type declarations, helping developers achieve type safety and code hints in TypeScript projects.

How to Use

  1. Paste JSON data in the left input box, or click the sample button to load an example
  2. Configure options: set root type name, choose interface/type style, whether to add export, etc.
  3. The corresponding TypeScript type definitions are automatically generated on the right
  4. Click the 'Copy' button to copy the generated type definitions to clipboard
  5. Paste the type definitions into your TypeScript project to use

Examples

Simple Object Conversion

输入 JSON:
{
  "name": "张三",
  "age": 28,
  "isActive": true
}

输出 TypeScript:
export interface Root {
  name: string;
  age: number;
  isActive: boolean;
}

Nested Object Conversion

输入 JSON:
{
  "user": {
    "id": 1,
    "profile": {
      "avatar": "url",
      "bio": "简介"
    }
  }
}

输出 TypeScript:
export interface UserProfile {
  avatar: string;
  bio: string;
}

export interface User {
  id: number;
  profile: UserProfile;
}

export interface Root {
  user: User;
}

FAQ

Q: How do I use the generated types?

A: Copy the generated type definitions to a .ts file, then use them in your code. For example: const data: Root = JSON.parse(response)

Q: What's the difference between interface and type?

A: interface can be extended and implemented, suitable for defining object types; type is more flexible and can define union types, intersection types, etc. For simple object structures, both function similarly.

Q: How are array-type JSON handled?

A: The tool automatically recognizes array element types. For arrays of objects, separate type definitions are generated for array elements, then represented using ItemType[].

Q: Can the generated types be edited?

A: Yes, they can be freely edited after generation. We recommend adjusting type names, adding optional field markers (?), or modifying type definitions for some fields as needed.