Generate TypeScript Types from JSON

TypeScript type definitions are essential for building type-safe applications. DataLensia can generate complete TypeScript interfaces from any JSON structure — no manual typing required.

🚩 The Problem

You receive an API response and need TypeScript types for your frontend code:

{
  "users": [
    {
      "id": "usr_001",
      "name": "Alice",
      "email": "alice@example.com",
      "role": "admin",
      "settings": {
        "theme": "dark",
        "notifications": true,
        "language": "en"
      },
      "tags": ["developer", "team-lead"]
    }
  ],
  "meta": {
    "total": 150,
    "page": 1,
    "perPage": 20
  }
}

🛠️ Step-by-Step

1. Open the JSON Convert tool.
2. Paste your API response JSON.
3. Select TypeScript from the Programming category in the format grid.
4. Copy the generated types:

interface Settings {
  theme: string;
  notifications: boolean;
  language: string;
}

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  settings: Settings;
  tags: string[];
}

interface Meta {
  total: number;
  page: number;
  perPage: number;
}

interface RootType {
  users: User[];
  meta: Meta;
}

5. Paste directly into your project's type definitions file.

✨ What Gets Detected

JSON Pattern	TypeScript Type
"hello"	string
42	number
3.14	number
true / false	boolean
null	null
[1, 2, 3]	number[]
["a", "b"]	string[]
Mixed array [1, "a"]	(number | string)[]
Nested object	Separate interface
Array of objects	Interface + InterfaceName[]

💡 Advanced Workflow

Combine with Schema Generator

1. Generate TypeScript types from the Convert Tool.
2. Generate a JSON Schema from the Schema Generator.
3. Use both in your project:
   • TypeScript types for compile-time safety.
   • JSON Schema for runtime validation (e.g., with Ajv or Zod).

Combine with Mock API

1. Generate types from a sample response.
2. Create a Mock API from the same sample.
3. Your frontend is now fully typed AND has a working mock endpoint during development.

🔄 Iterative Refinement

If your API has optional fields, you may want to manually adjust the generated types:

1. Generate the base types from DataLensia.
2. Add ? (optional markers) where needed.
3. Replace generic string with literal unions where applicable (e.g., role: "admin" | "editor" | "viewer").

📝 Naming Conventions

DataLensia uses the following conventions:

• Interface names are derived from the JSON key, PascalCased (e.g., settings → Settings).
• The root type is named RootType.
• Array item types are named after the parent key, singularized when possible.

---

🚀 Try it now

Paste any JSON into the Convert Tool and select TypeScript to get instant type definitions for your project.