JSON → TypeScript Interface ジェネレーター
JSON を貼ると TypeScript interface を自動生成。ネスト構造を別 interface に分割、配列要素のユニオン型推論、null 許容 / readonly オプション、ルート型名のカスタマイズに対応。
完全無料
登録不要
ブラウザ完結
即ダウンロード
5 言語対応
ダークモード
📖 つまずきやすいポイント
JSON のサンプルから TypeScript の interface を組み立てます。処理はブラウザ内で完結します。ここで押さえておきたいのは、生成できるのは「貼ったサンプルに現れた形」だけだということです。省略可能なフィールド、null になり得る値、複数の型を取るユニオンは、そのサンプルに実例が入っていなければ存在しないものとして扱われます。
| ケース | 何が起きるか | どうする |
|---|---|---|
値が null のフィールドがある |
サンプルに "deletedAt": null しか無いと、そのフィールドが本来何型なのかは決めようがありません。null 型や any になり、実際に日付文字列が入ってきた瞬間に型が嘘になります。 |
実データを複数件マージしたサンプルを貼るのが最も確実です。それが難しければ、生成後に deletedAt: string | null のように手で直します。strictNullChecks を有効にしていれば、直し忘れはコンパイラが教えてくれます。 |
| 配列が空、または要素が 1 つだけ | [] からは要素の型を推論できず、never[] や any[] になります。要素が 1 つだけの場合も危険で、その 1 件にたまたま無かったフィールドが、必須ではないのに必須として抜け落ちます。 |
配列には性質の違う要素を 2〜3 件入れてください。オプション項目が有るものと無いもの、値が最大長のもの、といった具合です。生成された型のうち 本当は省略可能なものには ? を付けるのを忘れずに。 |
| 生成した型を「正」として扱う | サンプルは実装の一例にすぎず、仕様そのものではありません。API 側が将来フィールドを追加しても型は変わりませんし、逆に「このサンプルにはたまたま無かっただけ」の項目を落としたまま本番に出ることになります。 | OpenAPI や JSON Schema があるならそちらを唯一の正とし、型はそこから生成してください。スキーマ側を整える必要があるときは JSON Schema バリデーターや OpenAPI → curl 変換が使えます。スキーマが存在しない外部 API では、受け取った直後に境界で検証する (zod / valibot など) 構成にしておくと、型と実データのずれが本番で初めて露見する事故を防げます。 |
JSON の数値はすべて number になりますが、JavaScript の number は 253-1 (9,007,199,254,740,991) を超える整数を正確に保持できません。int64 の ID を返す API では、桁が落ちて別のレコードを指してしまいます。サーバー側で ID を文字列として返すよう合わせるか、bigint で受けてください。日付も同様で、"2026-07-26T00:00:00Z" は string にしかならないので、Date に変換する層をどこに置くかを先に決めておくと、後から型を書き換える手間がありません。
📖 使い方
-
1
JSON を貼る単一オブジェクトでも配列でも OK。API レスポンスをそのままどうぞ
-
2
オプションを調整interface / type、null 許容、readonly、ネストインライン化など
-
3
コピー or .ts ダウンロードそのまま貼り付けて即使える
❓ よくある質問
配列内に異なる型が混ざってると？
全要素を解析してユニオン型 (string | number など) に推論
null と undefined の扱い？
JSON に undefined は無いので null のみ検出。「null は省略可」ON で field?: T、OFF で field: T | null
日付や独自型は？
JSON ではすべて string なので Date と区別不能。生成後に手動で書き換え (例: createdAt: Date)
🐛 このツールで問題が発生しましたか？
完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
✅
ご報告ありがとうございます！
運営者に届きました。改善の参考にさせていただきます。