本文へスキップ

JSON を TypeScript に

JSON を TypeScript に

JSON サンプルを TypeScript の interface と type alias に変換し、オブジェクト配列のフィールドを自動で統合し、オプショナルなフィールドや null を含む union 型を推論し、空配列や空オブジェクトに適した型宣言を生成します。API レスポンスのモデリング、フロントエンドの型定義の立ち上げ、データ構造の整理に役立ちます。

JSON を TypeScript に

かんたんスタート

1
左側のエディタに有効な JSON サンプルを貼り付けます。
2
必要に応じて、生成前に ApiResponse のようなカスタムのルート型名を設定します。
3
右側で生成結果を確認します。オブジェクトのルートは interface、配列とプリミティブ値のルートは type alias になります。
4
コピーまたはダウンロードを使って、生成された .ts 出力をそのままプロジェクトで再利用できます。

よくある利用シーン

実際の API レスポンスから、フロントエンド画面や SDK クライアント、統合テスト用の TypeScript モデルを素早く作成します。

混在したオブジェクト配列を確認して、API 契約を固める前にオプショナルフィールドや union 型の推論結果を把握します。

モック JSON データをフィクスチャ、Storybook のストーリー、プロトタイプ用の型定義へすばやく変換します。

バックエンドの payload 形状が変わったときに、User や Meta などのネスト宣言を確認します。

使い方のヒント

できるだけ代表的な JSON サンプルを使ってください。ジェネレーターは貼り付けた値からしか推論しないため、出てこないケースは出力にも現れません。
空配列は unknown[] になり、空オブジェクトは Record<string, unknown> を拡張する interface になります。より具体的なサンプルを入れると精度が上がります。
ネストした宣言名はプロパティ名から正規化されるため、新しい出力では従来の root 接頭辞付き名よりも User や Meta のような名前が使われやすくなります。
生成は有効な JSON に対してのみ実行されます。構文エラーがある場合は先に修正してください。解析失敗時は行と列が表示されます。
有効なカスタムのルート型名はそのまま保持され、無効な名前は TypeScript の PascalCase 識別子へ正規化されます。

制限事項と互換性

このツールは正式なスキーマではなく、サンプルデータから型を推論します。サンプルに存在しないフィールドは推測できません。
入力は厳密な JSON である必要があります。コメント、末尾カンマ、その他 JavaScript 専用構文は受け付けません。
生成結果には export 文が含まれません。プロジェクトで export が必要な場合は自分で追加してください。
結果は静的な TypeScript コードのみです。実行時バリデータ、パーサー、シリアライザーは生成しません。

プライバシーとセキュリティ

すべての処理はブラウザ内で完結し、データはお使いのデバイスから外部に送信されません

よくある質問

6

次の作業に役立つ関連ツールです。