JSON to TypeScript Interface Generator

Khi nào cần TypeScript interface từ JSON?

• API response typing: nhận JSON từ backend → tự sinh type cho frontend, không phải gõ tay.
• LLM Structured Output: Claude / OpenAI / Gemini đều support structured output theo schema. Đầu tiên thiết kế JSON sample, dùng tool sinh TS, dùng Zod/Valibot validate.
• Mock data: có data fake → sinh interface để type-check khi viết tests.
• Refactor: legacy codebase JS → migrate sang TS, paste JSON sample là có ngay interface.

Tính năng

• Nested types tự tách: JSON có sub-object → tool sinh interface riêng cho từng level.
• Inline mode: muốn 1 interface chứa hết — bật toggle.
• Array → homogeneous type: ["a","b"] → string[]. Mixed → Array<string | number>.
• readonly / optional: bật toàn bộ — phù hợp cho API response immutable hoặc form input.
• export keyword: copy paste vào file .ts là dùng được luôn.

Ví dụ thực tế với Claude API

Bạn muốn Claude trả structured response. Đầu tiên thiết kế JSON sample:

{
  "summary": "Bài viết về AI",
  "topics": ["LLM", "RAG"],
  "sentiment": "positive",
  "actionItems": [
    { "task": "đọc thêm", "priority": "high" }
  ]
}

Tool sinh ra:

export interface ActionItem {
  task: string;
  priority: string;
}

export interface Root {
  summary: string;
  topics: string[];
  sentiment: string;
  actionItems: ActionItem[];
}

Dùng với Zod để validate response:

import { z } from 'zod';

const ActionItemSchema = z.object({
  task: z.string(),
  priority: z.string(),
});
const RootSchema = z.object({
  summary: z.string(),
  topics: z.array(z.string()),
  sentiment: z.string(),
  actionItems: z.array(ActionItemSchema),
});

Liên quan

• JSON Schema Generator — sinh schema cho LLM structured output
• Format JSON — clean trước khi convert
• JSON ↔ YAML
• Xem tất cả công cụ