本文へスキップ
SPCXTools

JSON to TypeScript 変換

JSONデータをTypeScriptのインターフェースや型に瞬時に変換。ルート名のカスタマイズやexportオプションの切り替えも可能です。

ローカルで動作 — ファイルは端末から出ません

ツールを読み込み中…

JSON to TypeScript 変換の使い方

  1. 1入力ボックスにJSONオブジェクトまたは配列を貼り付けるか、直接入力します。「サンプル」をクリックして動作を確認することもできます。
  2. 2最上位オブジェクトのルート名を設定します（デフォルトは "Root"）。
  3. 3TypeScriptのインターフェース（interface）または型エイリアス（type）のどちらを生成するかを選択し、exportキーワードの有無を切り替えます。
  4. 4生成されたTypeScriptコードをクリップボードにコピーするか、.tsファイルとしてダウンロードします。

高速かつ安全なJSON TypeScript変換ツール

TypeScriptプロジェクトで外部API、複雑な設定ファイル、ドキュメントデータベースを扱う際、型定義を手作業で記述するのは面倒でエラーの原因になりがちです。この無料のオンラインJSON TypeScript変換ツールは、有効なJSONオブジェクトや配列を、厳密に型付けされたTypeScriptの型定義へと瞬時に変換します。

このツールはすべてお使いのブラウザ上でローカルに実行されるため、データがサーバーにアップロードされることは一切ありません。データプライバシーを心配することなく、独自のAPIレスポンス、内部データベースのダンプ、機密性の高い設定データなども安全にペーストできます。入力やペーストと同時に瞬時に変換が行われるため、スピーディーな開発が可能です。

JSONからTypeScriptの型を柔軟に生成

コードベースにはそれぞれ独自のコーディング規約やスタイルがあります。本ツールでは、プロジェクトの要件に合わせた最適な出力が得られるよう、複数の設定オプションを用意しています：

カスタムルート名: デフォルトでは、最上位のオブジェクト名は Root に設定されています。これを UserResponse、AppConfig、ProductList など、プロジェクトのドメインモデルに合わせて簡単に変更できます。

interface と type の選択: JSONからTypeScriptへの変換時に、インターフェース（interface）と型エイリアス（type）のどちらを生成するかを選択できます。interfaceは宣言のマージや拡張が可能なため、オブジェクト指向の設計でよく好まれます。一方、typeは汎用性が高く、関数型プログラミングのパターンで好まれる傾向があります。本ツールでは、これらをワンクリックで切り替えることができます。

export キーワード: 「export」のチェックボックスをオンにすると、生成された型に自動的に export キーワードが付与され、アプリケーション内の他のモジュールですぐにインポートして使用できるようになります。

null のオプショナル化: 多くのJSON APIでは、値が存在しない場合や未定義の場合に null が返されます。TypeScriptのstrictモード環境では、厳密に null 型を要求するよりも、フィールド自体をオプショナル（?: 構文）にしたいケースがよくあります。「Optional null」のチェックボックスをオンにするとこの処理が自動化され、多数のフィールドに手動で「?」を追加する手間を省くことができます。

JSONから型を推論する仕組み

JSONデータを入力すると、コンバーターが値を深く解析し、適切なTypeScriptのプリミティブ型を推論します。文字列、数値、真偽値は、そのまま対応するTypeScriptの型にマッピングされます。ネストされたオブジェクトは再帰的に処理されてインターフェースやインラインのオブジェクト型に変換されるため、データ構造の末端まで厳密に型付けされます。

配列については、内部の要素を調べて最も正確な型を決定します。配列内のデータ型が統一されている場合は、string[]やnumber[]のようなシンプルな配列型を生成します。複数のデータ型が混在している場合は、(string | number)[]のようなユニオン型を自動的に作成します。配列が完全に空の場合は、具体的な型を推論するためのデータがないため、デフォルトでany[]となります。

よくあるユースケース

REST APIの利用: 新しいエンドポイントを組み込む際、データ量が多く階層の深いJSONレスポンスを受け取ることがよくあります。そのレスポンスをコンバーターに貼り付けるだけで、fetchやaxiosの呼び出しの型定義に必要なインターフェースを瞬時に生成できます。これにより、IDEでの厳密な型チェックと強力なオートコンプリートが有効になり、プロパティ名の入力ミスによるランタイムエラーを未然に防ぐことができます。

JavaScriptプロジェクトの移行: 既存のJavaScriptコードベースを段階的にTypeScriptへ移行している場合、既存のJSON設定ファイルやモックデータを利用して、ゼロからコードを書くことなくデータモデルの雛形を素早く作成できます。

NoSQLデータベースの利用: MongoDBなどのドキュメント指向データベースは、複雑なJSON構造を返すことがよくあります。これらのドキュメントから型を生成することで、アプリケーションのロジックがデータを安全に処理し、データベースのスキーマを正確に反映できるようになります。

最適な結果を得るためのヒント

  • 厳密に有効なJSONを使用する: 標準のJavaScriptオブジェクトとは異なり、JSONではすべてのキーと文字列値をダブルクォーテーションで囲む必要があり、末尾のカンマは許可されていません。データが乱雑な場合やJavaScriptのオブジェクトリテラルの場合は、まずJSONフォーマッターを使用して検証・整形してください。
  • 代表的なサンプルデータを用意する: 生成される型の精度は、入力されたデータに依存します。APIが特定のフィールドに文字列と数値の両方を返す可能性がある場合は、サンプルJSONの配列に両方を含めるか、生成後に手動でユニオン型に調整してください。サンプルデータが豊富であるほど、より正確なTypeScriptの型定義が生成されます。
  • 他のフォーマットから変換する: データが他のフォーマットの場合は、事前に変換する必要があります。たとえば、TypeScriptの型定義を生成する前に、XML to JSONやYAML to JSONの変換ツールを使用して、有効なJSONデータを準備してください。

よくある質問

コンバーターはどのように型を推論しますか？
JSONデータの実際の値を解析します。文字列は string、数値は number、真偽値は boolean になり、ネストされたオブジェクトや配列は再帰的にネストされた型やインターフェースに変換されます。
JSONの配列に複数の型が混在している場合はどうなりますか？
配列内に存在する異なるデータ型を正確に反映したユニオン型（例：(string | number)[]）が生成されます。
「Optional null」設定とは何ですか？
有効にすると、値が null のJSONプロパティは、TypeScriptの定義でオプショナルプロパティとしてマークされます。これは、欠損データがnullで表現されるAPIレスポンスを処理する際に特に便利です。
インターフェースの代わりに型エイリアスを生成できますか？
はい。スタイル設定を「type」に変更すると、interface Root { ... } の代わりに type Root = { ... } を生成できます。
JSONデータはサーバーに送信されますか？
いいえ。解析と変換はすべてブラウザ上でローカルに行われます。データがアップロードされることはないため、機密性の高いAPIレスポンスでも完全に安全です。
JSONでエラーが発生するのはなぜですか？
入力は厳密に有効なJSONである必要があります。よくある原因として、キーを囲む引用符の欠落、末尾のカンマ、ダブルクォーテーションの代わりにシングルクォーテーションを使用していることなどが挙げられます。

関連ツール

JSONフォーマッター＆検証ツールJSONの整形、軽量化、検証を瞬時に。エラー箇所も分かりやすく表示します。XML JSON 変換XMLとJSONフォーマット間のデータを瞬時に変換。属性やデータ型も自由にカスタマイズできます。YAML JSON 変換ツールYAMLとJSONの設定ファイルを双方向に変換し、構文をチェックします。JWTデコーダーJSON Web Tokenのデコード、有効期限の確認、HMAC署名の検証を、お使いのブラウザ上で安全に行えます。Base64エンコード＆デコードテキストとファイルをBase64に双方向変換。UTF-8とBase64URLに完全対応。Base64 画像変換Base64文字列やデータURIをデコードし、ブラウザ上で即座に表示・ダウンロード可能な画像に復元します。