跳至正文

JSON to TypeScript Generator

自動將JSON資料轉換為TypeScript介面的工具。可以型別安全地使用API回應、設定檔等JSON資料。

JSON Input

TypeScript Output

TypeScript interface will appear here...

主要功能​

  • JSON自動解析和介面生成
  • 支援巢狀物件
  • 陣列型別自動偵測
  • 支援可選屬性
  • 介面名稱自訂
  • 5個範例模板

使用方法​

1. 基本使用​

{
  "name": "John",
  "age": 30
}

↓

interface Root {
  name: string;
  age: number;
}

2. 巢狀物件​

{
  "user": {
    "profile": {
      "name": "John"
    }
  }
}

↓

interface Root {
  user: User;
}

interface User {
  profile: Profile;
}

interface Profile {
  name: string;
}

3. 陣列​

{
  "users": [
    {"id": 1, "name": "John"}
  ]
}

↓

interface Root {
  users: User[];
}

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

應用場景​

產生API回應型別​

// 貼上從API收到的JSON回應
// 立即產生TypeScript介面
fetch('/api/users')
  .then(res => res.json())
  .then((data: UserResponse) => {
    // 型別安全使用
  })

設定檔型別​

// 將config.json的結構轉換為介面
interface Config {
  apiUrl: string;
  timeout: number;
  features: Feature[];
}

提示​

  1. 可選屬性: 當某些欄位是可選的時，勾選「Use Optional Properties」
  2. 介面名稱: 根據用途變更名稱（例：UserResponse、ConfigData）
  3. 複雜JSON: 從範例模板開始並進行修改

相關工具​