JSON to TypeScript Free Online Tool 2026

Last updated March 22, 2026

Example: Nested Objects

// Input JSON:
{
  "user": {
    "id": 1,
    "name": "Alice",
    "address": {
      "street": "123 Main St",
      "city": "New York",
      "zip": "10001",
      "country": "US"
    }
  }
}

// Generated TypeScript:
interface Address {
  street: string;
  city: string;
  zip: string;
  country: string;
}

interface User {
  id: number;
  name: string;
  address: Address;
}

interface Root {
  user: User;
}

Example: Arrays

// Input JSON:
{
  "users": [
    { "id": 1, "name": "Alice", "roles": ["admin", "editor"] },
    { "id": 2, "name": "Bob",   "roles": ["viewer"] }
  ],
  "total": 2,
  "tags": ["javascript", "typescript"]
}

// Generated TypeScript:
interface UsersItem {
  id: number;
  name: string;
  roles: string[];
}

interface Root {
  users: UsersItem[];
  total: number;
  tags: string[];
}

Example: Optional Fields

// Input JSON (analyzed from multiple samples):
// Sample 1: { "id": 1, "name": "Alice", "email": "alice@example.com", "phone": "555-1234" }
// Sample 2: { "id": 2, "name": "Bob",   "email": "bob@example.com" }
// Sample 3: { "id": 3, "name": "Carol", "phone": "555-5678" }

// Generated TypeScript (fields not in all samples are optional):
interface User {
  id: number;
  name: string;
  email?: string;   // optional — not in sample 3
  phone?: string;   // optional — not in sample 2
}

Example: API Response with Pagination

// Input JSON:
{
  "status": "success",
  "data": {
    "items": [
      { "id": 1, "title": "Post 1", "published": true },
      { "id": 2, "title": "Post 2", "published": false }
    ],
    "pagination": {
      "page": 1,
      "perPage": 20,
      "total": 150,
      "totalPages": 8
    }
  },
  "timestamp": "2024-01-15T14:30:00Z"
}

// Generated TypeScript:
interface ItemsItem {
  id: number;
  title: string;
  published: boolean;
}

interface Pagination {
  page: number;
  perPage: number;
  total: number;
  totalPages: number;
}

interface Data {
  items: ItemsItem[];
  pagination: Pagination;
}

interface ApiResponse {
  status: string;
  data: Data;
  timestamp: string;
}

Example: Generic Wrapper Type

// When the converter detects a generic pattern:
// { "data": User, "error": null }
// { "data": Product, "error": null }
// { "data": null, "error": "Not found" }

// Generated TypeScript (generic):
interface ApiResponse<T> {
  data: T | null;
  error: string | null;
}

// Usage:
const userResponse: ApiResponse<User> = await fetchUser(1);
const productResponse: ApiResponse<Product> = await fetchProduct(10);

Example: Readonly Interface

// Input JSON (with readonly option enabled):
{
  "id": 1,
  "name": "Alice",
  "permissions": ["read", "write"]
}

// Generated TypeScript (readonly):
interface User {
  readonly id: number;
  readonly name: string;
  readonly permissions: readonly string[];
}

// TypeScript enforces immutability:
const user: User = { id: 1, name: "Alice", permissions: ["read"] };
user.id = 2;  // TS Error: Cannot assign to 'id' because it is a read-only property

Example: Type Guard Generation

// Generated interface:
interface User {
  id: number;
  name: string;
  email: string;
}

// Generated type guard:
function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    typeof (value as User).id === 'number' &&
    typeof (value as User).name === 'string' &&
    typeof (value as User).email === 'string'
  );
}

// Usage:
const data: unknown = await fetch('/api/user').then(r => r.json());
if (isUser(data)) {
  console.log(data.name);  // TypeScript knows data is User here
}

Example: Using Generated Types

// Generated interface:
interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

// Use in React component:
interface ProductCardProps {
  product: Product;
  onAddToCart: (id: number) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => (
  <div>
    <h3>{product.name}</h3>
    <p>${product.price}</p>
    <button
      onClick={() => onAddToCart(product.id)}
      disabled={!product.inStock}
    >
      Add to Cart
    </button>

);

// Use in fetch function:
async function fetchProduct(id: number): Promise<Product> {
  const res = await fetch(`/api/products/${id}`);
  return res.json() as Promise<Product>;
}

Paste your JSON to generate TypeScript interfaces instantly. The converter handles nested objects, arrays, optional fields, and null values, producing types you can use immediately in your TypeScript project.

// Input JSON:
{
  "id": 42,
  "name": "Alice Smith",
  "email": "alice@example.com",
  "age": 30,
  "active": true,
  "score": 98.5,
  "notes": null
}

// Generated TypeScript:
interface Root {
  id: number;
  name: string;
  email: string;
  age: number;
  active: boolean;
  score: number;
  notes: string | null;
}