How to Convert JSON to TypeScript Types

March 22, 2026 · 7 min read

You've got a JSON response from an API. You need TypeScript types for it. You could write them by hand, but that's tedious and error-prone — especially for deeply nested objects with dozens of fields. Here's how to convert JSON to TypeScript interfaces quickly and correctly.

Why You Need TypeScript Types for JSON

Without types, your API response is any — which means TypeScript can't catch property name typos, missing fields, or type mismatches. Adding proper interfaces gives you:

Autocomplete — your editor knows every field and its type
Compile-time errors — catch user.nmae typos before they become runtime bugs
Refactoring safety — rename a field and see every place it's used
Documentation — interfaces serve as living API documentation

Method 1: Use an Online Converter

The fastest way — paste your JSON and get TypeScript interfaces instantly.

Convert JSON to TypeScript Now

Paste any JSON object to generate TypeScript interfaces automatically.

Open JSON to TypeScript Converter

Method 2: Manual Conversion

Understanding the manual process helps you write better types. Here's a JSON object and its TypeScript equivalent:

The JSON

{
  "id": 42,
  "name": "Alice",
  "email": "alice@example.com",
  "isActive": true,
  "roles": ["admin", "editor"],
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip": "62701"
  },
  "lastLogin": "2026-03-22T10:30:00Z",
  "metadata": null
}

The TypeScript Interface

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  roles: string[];
  address: Address;
  lastLogin: string;
  metadata: unknown | null;
}

interface Address {
  street: string;
  city: string;
  zip: string;
}

JSON-to-TypeScript Type Mapping

42 (number) → number
"hello" (string) → string
true/false → boolean
[1, 2, 3] → number[]
["a", "b"] → string[]
[1, "a"] (mixed) → (number | string)[]
{...} (nested object) → separate interface
null → null (or unknown | null if unsure)

Method 3: quicktype (CLI)

quicktype is the gold standard for generating types from JSON. It handles edge cases like optional fields, union types, and deeply nested structures:

# Install
npm install -g quicktype

# From a JSON file
quicktype -s json -l typescript -o types.ts data.json

# From a URL (fetches the JSON automatically)
quicktype -s json -l typescript -o types.ts \
  "https://api.example.com/users/1"

# From stdin
echo '{"name": "Alice", "age": 30}' | quicktype -s json -l typescript

quicktype is smart — give it multiple JSON samples and it will infer optional fields and union types:

# Multiple samples for better type inference
quicktype -s json -l typescript -o types.ts sample1.json sample2.json sample3.json

Method 4: In Your Editor (VS Code)

Several VS Code extensions can generate TypeScript interfaces from JSON:

Paste JSON as Code — Select "Paste JSON as TypeScript" from the command palette
JSON to TS — Right-click in a .ts file, select "Convert JSON to TypeScript"

Or use the built-in approach — create a temporary .ts file and let TypeScript infer:

// Paste your JSON as a const
const response = {
  id: 42,
  name: "Alice",
  roles: ["admin", "editor"]
} as const;

// Extract the type
type User = typeof response;
// Now User is { readonly id: 42; readonly name: "Alice"; ... }

Handling Common Edge Cases

Optional Fields

If some fields aren't always present in the API response, mark them optional:

interface User {
  id: number;
  name: string;
  email: string;
  avatar?: string;     // Not always present
  bio?: string | null; // Sometimes missing, sometimes null
}

Union Types (Multiple Possible Shapes)

// API returns different shapes based on status
type ApiResponse =
  | { status: "success"; data: User }
  | { status: "error"; message: string; code: number };

Date Strings

JSON doesn't have a date type — dates come as strings. Use a branded type for clarity:

type ISODateString = string & { readonly __brand: "ISODateString" };

interface Event {
  name: string;
  startDate: ISODateString;
  endDate: ISODateString;
}

Dynamic Keys

// JSON: { "en": "Hello", "es": "Hola", "fr": "Bonjour" }
interface Translations {
  [languageCode: string]: string;
}

// Or with Record:
type Translations = Record<string, string>;

Interface vs. Type — Which to Use?

Both work for JSON conversion. The practical differences:

Use interface for object shapes — they can be extended and merged, and produce clearer error messages.
Use type for unions, intersections, and computed types.
For simple JSON-to-TypeScript conversion, interface is the conventional choice.

Best Practices

Don't use any — the whole point is type safety. Use unknown if you genuinely don't know the type.
Generate from real API responses — don't guess the shape. Hit the endpoint, copy the response, convert it.
Keep types in sync — if the API changes, regenerate. Consider using quicktype in CI to catch drift.
Validate at runtime too — TypeScript types are erased at runtime. Use zod or io-ts to validate API responses match your types.

Try It Now

Got a JSON response you need types for? Use the free JSON to TypeScript converter on UtilShed — paste your JSON and get interfaces instantly.

Related tools:

JSON Formatter — pretty-print your JSON before converting
JSON Validator — make sure your JSON is valid first
TypeScript Formatter — format the generated interfaces
JSON to YAML Converter — for config file conversions