JSON 轉 TypeScript

從 JSON 樣本產生 TypeScript interface。貼上載荷——API 回應、設定檔、webhook body——即可獲得能直接 放入專案的強型別 interface 宣告。陣列元素型別會自動推論、 巢狀物件成為各自的 interface、可為 null 的欄位以與 null 的聯合輸出。底層使用 quicktype, 完全在你的瀏覽器內運作;載荷不會離開頁面。

貼上 JSON(或載入範例),指定頂層型別名稱,即可在右側讀到 TypeScript。 隨時可從上方分頁切換到其他語言——相同輸入會就地重新產生。

輸入: {"id":42,"name":"devsmiths","createdAt":"2024-03-11T08:24:00Z","stars":1280,"public":true,"contributors":[{"login":"ada","commits":51,"admin":true},{"login":"linus","commits":33,"admin":false}],"homepage":null}

輸出(Typescript):

export interface Root {
    id:           number;
    name:         string;
    createdAt:    string;
    stars:        number;
    public:       boolean;
    contributors: Contributor[];
    homepage:     null;
}

export interface Contributor {
    login:   string;
    commits: number;
    admin:   boolean;
}

• 預設使用 interface。若需要 type alias (例如為聯合或 mapped type 鋪路),可在選項面板切換 just types;type 輸出更接近結構性定義,後續組合 utility type 更彈性。
• 樣本中為 null 的欄位會被標為字面 null, 而非 string | null。產生器只有一份樣本可用, 無法得知該欄位有時是字串。請手動拓寬,或開啟 all optional。
• TypeScript 是唯一具完整 CodeMirror 語法高亮的目標。其他語言以單色 等寬文字呈現以保持頁面輕量;Copy / Download 仍會輸出正確檔案。
• 產生器不會輸出 runtime 驗證器(無 Zod、Valibot、 io-ts)。若要在 runtime 驗證未信任 JSON,可在此產生 interface 後 另寫驗證器,或使用 schema-first 工具(例如 quicktype 的 Zod 輸出)。
• 單樣本推論:樣本中存在的每個欄位都會成為型別的一部分。 樣本中不存在的欄位不會自動變為 optional——若每個欄位都應為 nullable, 請切換 all optional。
• 延伸閱讀:實務上的 JSON 轉 TypeScript 完整講解重新命名 / 收緊步驟。