How to Convert JSON to a TypeScript Interface

When you fetch JSON from an API, TypeScript treats it as any by default — losing all type safety. Converting that JSON into a proper interface gives you autocomplete, compile-time checks, and self-documenting code. This guide shows how to do it by hand and how to automate it.

The basic mapping

• JSON string → string
• JSON number → number
• JSON true/false → boolean
• JSON object → an interface
• JSON array → Type[]
• JSON null → null

A simple example

{
  "id": 42,
  "name": "Alice",
  "active": true
}

interface User {
  id: number;
  name: string;
  active: boolean;
}

Nested objects

Each nested object becomes its own interface for reusability:

interface Profile {
  bio: string;
  city: string;
}
interface User {
  id: number;
  profile: Profile;
}

Arrays

{ "tags": ["admin"] }     // tags: string[]
{ "users": [{ "id": 1 }] }  // users: User[]

Optional and nullable fields

interface User {
  id: number;
  nickname?: string;        // may be absent
  deletedAt: string | null;  // present but can be null
}

? means the key might not exist; | null means the key exists but can be null.

interface vs type

Use interface for object shapes you might extend, and type for unions and aliases. For API responses, either is fine — stay consistent.

Why not just use any?

Typing your JSON catches bugs at compile time: misspelled property names, wrong types, and missing fields surface in your editor instead of at runtime.

Validating at runtime

TypeScript types vanish at runtime — they do not check incoming data. For untrusted API responses, pair your interface with a runtime validator or a JSON Schema.