CrateX.app

JSON を TypeScript に

JSON から TypeScript への変換は JSON サンプルを TypeScript の interface や type alias に変換し、任意項目、ユニオン型、配列要素の構造も推論できるため、API レスポンス設計、フロントエンド型定義の初期化、mock データ整理に向いています。

JSON

文字

0 / 500,000

TypeScript

JSON を TypeScript に

かんたんスタート

左側のエディタに有効な JSON サンプルを貼り付けます。

必要に応じて、生成前に ApiResponse のようなカスタムのルート型名を設定します。

右側で生成結果を確認します。オブジェクトのルートは interface、配列とプリミティブ値のルートは type alias になります。

コピーまたはダウンロードを使って、生成された .ts 出力をそのままプロジェクトで再利用できます。

実際の API レスポンスを、フロントエンド画面、SDK クライアント、疎通確認ですぐ使える TypeScript 型へ素早く整理できます。

正式な契約を固める前に、JSON サンプルから optional、null、union 型の推論結果を確認できます。

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

バックエンドの応答構造が変わったときに、最新の JSON サンプルから User や Meta などの入れ子定義を更新すべきか確認できます。

できるだけ代表的な JSON サンプルを使ってください。ジェネレーターは貼り付けた値からしか推論しないため、出てこないケースは出力にも現れません。

空配列は unknown[] になり、空オブジェクトは Record<string, unknown> を拡張する interface になります。より具体的なサンプルを入れると精度が上がります。

ネストした宣言名はプロパティ名から正規化されるため、新しい出力では従来の root 接頭辞付き名よりも User や Meta のような名前が使われやすくなります。

生成は有効な JSON に対してのみ実行されます。構文エラーがある場合は先に修正してください。解析失敗時は行と列が表示されます。

有効なカスタムのルート型名はそのまま保持され、無効な名前は TypeScript の PascalCase 識別子へ正規化されます。

このツールは正式なスキーマではなく、サンプルデータから型を推論します。サンプルに存在しないフィールドは推測できません。

入力は厳密な JSON である必要があります。コメント、末尾カンマ、その他 JavaScript 専用構文は受け付けません。

生成結果には export 文が含まれません。プロジェクトで export が必要な場合は自分で追加してください。

結果は静的な TypeScript コードのみです。実行時バリデータ、パーサー、シリアライザーは生成しません。

すべての処理はブラウザ内でローカルに完結し、JSON サンプルをいつでも差し替えて結果を再生成し、確認後にコピーやダウンロードできます。

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