🧩

JSON から TypeScript インターフェース

JSON を貼り付けるだけで TypeScript interface を自動推論。ネストしたオブジェクトや配列にも対応

説明:型はこのJSONから推論されたものであり、JSON Schemaではありません。配列内の要素構造が一致しない場合はユニオン型が生成され、フィールド名が有効な識別子でない場合は引用符が付きます。

使い方

JSON 转 TypeScript 接口使用说明



功能简介


拿到一份接口返回的 JSON,要手写 TypeScript 类型很费时间。这个工具直接读 JSON 结构,递归推断出嵌套的 interface。

使用方法


  • 把 JSON 粘贴到输入框,点「填入示例」可以先看一个复杂例子

  • 填好根接口名(默认 Root),选 `interface` 或 `type` 别名

  • 如果字段可能缺失,勾上「字段可选」给每个字段加 `?`

  • 点「生成 TypeScript」,结果按引用顺序输出,子类型在前、根类型在后

  • 点「复制结果」复制走


  • 注意事项


  • 类型是从这一份 JSON 推断出来的:字段为 `null` 时只会得到 `null`,缺字段也看不出来。要更准确请用多份样本或手写补充

  • 数组里元素结构不一致时会生成联合类型,例如 `(A | B)[]`

  • 空数组只能推断出 `unknown[]`,需要你自己补类型

  • 字段名不是合法标识符时会用引号包起来,符合 TypeScript 语法
  • ❓ よくある質問

    配列内のオブジェクトの型が一致しない場合はどうなりますか?

    構造ごとに個別のインターフェースを生成し、配列要素の型をユニオン型として出力します。例:`(User | Admin)[]`。生成後に実際の用途に合わせて絞り込めます。

    null フィールドの型が null になるのはなぜですか?

    この 1 件のデータだけでは、将来文字列や数値になるかどうかを判断できないためです。実際のデータに現れる型をすべて補うか、手動で `string | null` に変更することをおすすめします。

    Go や Java の型も生成できますか?

    現在は TypeScript のみ生成します。構造を確認したい場合は、このツールで推論したネストしたインターフェース名を他の言語の構造体に書き換えるのも難しくありません。

    📝 関連記事

    tool-tutorials

    Cron 式ジェネレーターの使い方:初心者向け完全ステップ

    オンラインツールで5つの時間フィールドをクリック選択し、標準 Cron 式を自動生成して人間が読める時間説明を添付。同時にタイムゾーンとフィールド数による実行時間のずれの調査方法を学び、複雑な周期をもう推測に頼らない。

    tool-tutorials

    CSV から JSON へのオンラインツールの使い方、初心者でも3ステップで始められる

    3ステップの流れで CSV から JSON へのオンラインツール操作を完了。オプション設定、結果検証、エラー調査、大ファイル処理、スマホ操作、API デバッグの場面を網羅し、初心者でもそのまま実行して使える JSON データを得られます。

    tool-tutorials

    HTMLフォーマットとは何か 初心者がまず押さえるべきポイント

    ブラウザ上でローカルに動作するHTMLフォーマットツールを使って、圧縮または乱れたHTMLをインデント付きの読みやすい構造に復元し、フォーマットと圧縮の違い、インデント乱れの調査順序、大きなファイルの固まりやスマホでのインストール不要の対処法を理解しましょう。

    tool-tutorials

    JS フォーマット圧縮と手動整理コードの違い どちらを選ぶのが適切か

    JSのフォーマット・圧縮と手動整理の違いは、自動化と人的判断のどちらを取るかにあります。フォーマット・圧縮はツールが規則に従って一括処理し、速くて結果も安定しています。手動整理は柔軟で、特殊な命名規則や複雑なロジックがある場面に適しています。日常の開発やデバッグではツールを優先し、人の手は本当に判断が必要な部分に残しましょう。JSフォーマット・圧縮とは何かを理解すれば、いつ使うべきか、いつ止めるべきかが判断できます。