JSON 轉 TypeScript
將 JSON 數據自動轉換為 TypeScript 接口或類型定義
JSON 輸入
行數: 1 | 字符: 0
TypeScript 輸出
// 輸入 JSON 後自動生成 TypeScript 類型定義類型: 0 | 行數: 1
什麼是 JSON 轉 TypeScript?
JSON 轉 TypeScript 是將 JSON 數據自動轉換為 TypeScript 類型定義的工具。它分析 JSON 結構,生成對應的 interface 或 type 聲明,幫助開發者在 TypeScript 項目中獲得類型安全和代碼提示。
使用方法
- 在左側輸入框粘貼 JSON 數據,或點擊示例按鈕加載示例
- 配置選項:設置根類型名稱、選擇 interface/type 風格、是否添加 export 等
- 右側自動生成對應的 TypeScript 類型定義
- 點擊「複製」按鈕複製生成的類型定義到剪貼板
- 將類型定義粘貼到 TypeScript 項目中使用
使用實例
簡單對象轉換
输入 JSON:
{
"name": "张三",
"age": 28,
"isActive": true
}
输出 TypeScript:
export interface Root {
name: string;
age: number;
isActive: boolean;
}嵌套對象轉換
输入 JSON:
{
"user": {
"id": 1,
"profile": {
"avatar": "url",
"bio": "简介"
}
}
}
输出 TypeScript:
export interface UserProfile {
avatar: string;
bio: string;
}
export interface User {
id: number;
profile: UserProfile;
}
export interface Root {
user: User;
}常見問題 (FAQ)
Q: 生成類型後如何使用?
A: 將生成的類型定義複製到 .ts 文件中,然後在代碼中使用。例如:const data: Root = JSON.parse(response)
Q: interface 和 type 有什麼區別?
A: interface 可以被擴展和實現,適合定義對象類型;type 更靈活,可以定義聯合類型、交叉類型等。對於簡單對象結構,兩者功能相似。
Q: 如何處理數組類型的 JSON?
A: 工具會自動識別數組元素類型。如果是對象數組,會為數組元素生成單獨的類型定義,然後使用 ItemType[] 表示數組。
Q: 生成的類型是否可以編輯?
A: 生成後可以自由編輯。建議根據實際需求調整類型名稱、添加可選字段標記(?)、或修改部分字段的類型定義。