JSONをTypeScriptに変換
JSONオブジェクトをTypeScriptのインターフェースと型に変換します
入力とオプション
クイックプリセットと例
ブラウザで動作します。入力内容はこのデバイス内に留まります。
結果
値を入力すると結果が表示されます。
無料のオンラインJSON TypeScript変換ツール
当社のJSON TypeScript変換ツールは、生のJSONデータを、適切に型付けされたTypeScriptのinterfaceやtype aliasに数秒で変換します。JSONのオブジェクトまたは配列を貼り付けて「変換」をクリックするだけで、そのままコードベースに取り込める、実運用向けのきれいなTypeScript型定義が得られます。ネストされたオブジェクト、型が混在する配列、null値、深い再帰構造も自動で処理します。
カスタマイズできるオプションで、出力を細かく制御できます。interfaceとtype aliasの構文を切り替えたり、すべてのプロパティを任意にしたり、readonly修飾子を適用したり、exportキーワードを追加したり、ルートのinterface名を自由に設定したりできます。ネストされたinterfaceは親のキーに基づいて自動的に命名され、賢く単数形に変換されるため、「projects」配列から「Project」のような読みやすい型名が作られます。
REST APIを利用する場合も、JavaScriptプロジェクトをTypeScriptへ移行する場合も、チーム向けにデータ構造を文書化する場合も、このJSON TypeScriptツールなら、面倒な手作業の型定義が不要になります。すべてブラウザ内で動作し、JSONデータがサーバーにアップロードされることはないため、社外秘のAPIレスポンスや機密性の高いペイロードにも安心して使えます。
主な機能
- 深くネストされたJSONオブジェクトに対するinterfaceの再帰的な生成
- スマートな配列型の検出と、型が混在する配列向けのユニオン型への自動対応
- interfaceとtype aliasの構文を切り替え可能
- 柔軟な型定義のための任意プロパティ修飾子
- 変更できない型の契約を作るreadonly修飾子
- モジュールとして使えるinterface向けに設定できるexportキーワード
- ルートのinterface名を自由に設定
- 単数形化を伴う賢いネストinterface命名(例: 「projects」が「Project」になります)
- 生成されたTypeScriptコードを1クリックでクリップボードにコピー
- ネストされたオブジェクト、配列、null値を含むサンプルJSONがあらかじめ読み込まれていて、すぐに試せます
JSON TypeScript変換ツールの使い方
- オプションを設定: ルートのinterface名を設定し、interfaceかtypeか、任意プロパティ、readonly、exportキーワードの設定を切り替えます。
- JSONを貼り付け: 左側の入力パネルにJSONのオブジェクトまたは配列を入力または貼り付けます。「サンプルJSON」をクリックすると、デモ用のデータが読み込まれます。
- 変換をクリック: 「TypeScriptに変換」を押すと、右側のパネルに型付きの出力が生成されます。
- 出力を確認: 生成されたinterfaceを確認します。ネストされた型は、依存関係が分かりやすいようにルートのinterfaceの上に表示されます。
- プロジェクトにコピー: 「コピー」をクリックしてTypeScriptコードをクリップボードに入れ、.tsまたは.d.tsファイルに貼り付けます。
活用例
- REST APIの利用: APIレスポンスを貼り付けて、フロントエンドの型安全性を保つTypeScriptのinterfaceを生成できます。
- JavaScriptからTypeScriptへの移行: 移行プロジェクトの一環として、JSONフィクスチャやモックデータを型定義に変換できます。
- バックエンドのDTO作成: Node.jsバックエンド向けに、サンプルのリクエストやレスポンスのペイロードからData Transfer Objectの型を生成できます。
- APIドキュメント: 生成されたinterfaceをAPIドキュメントに載せれば、利用者がリクエストとレスポンスのデータ構造を正確に把握できます。
- GraphQLの型マッピング: 生成された型を、GraphQLリゾルバーの型定義の出発点として使えます。
- テストとモック: 実際のAPIレスポンスから、ユニットテストや結合テスト向けの型付きモックデータファクトリーを作れます。
- TypeScriptの学習: 学習者はJSONの値がTypeScriptの型にどう対応するかを確認でき、型システムの感覚を身に付けられます。
よくある質問
このツールは無料ですか？
はい、JSON TypeScript変換ツールは完全無料で、登録も利用制限もありません。必要な数だけJSONのペイロードを変換できます。
データは安全ですか?
はい。変換はすべてお使いのブラウザ内で行われます。JSONデータがサーバーに送信されることはないため、社外秘のAPIレスポンスや社内のデータ構造も安全に変換できます。
interfaceとtype aliasの違いは何ですか?
TypeScriptでは、interfaceもtype aliasもオブジェクトの形を表現できます。interfaceは宣言のマージに対応していて、公開APIの契約には一般的にinterfaceが好まれます。type aliasはより柔軟で、ユニオン、インターセクション、プリミティブ型も表現できます。プロジェクトの規約に合うほうを選んでください。
型が混在する配列にも対応していますか?
はい。配列に異なる型の要素(たとえば文字列とオブジェクト)が含まれる場合は、(string | MyObject)[]のようなユニオン型が生成されます。すべての要素のオブジェクト構造は、1つの包括的なinterfaceにマージされます。
ルートレベルのJSON配列も変換できますか?
はい。ルートのJSONがオブジェクトの配列の場合は、配列の要素用のinterfaceと、ルートの配列用のtype aliasが作成されます。配列がプリミティブ値だけの場合は、「type RootObject = string[].」のような単純なtype aliasが生成されます。
ヒントとベストプラクティス
- 代表的なJSONサンプルを使う: 生成されるinterfaceがデータ構造の全体像を捉えられるよう、サンプルにはありうるすべてのフィールドを含めてください。
- 分かりやすいルート名を付ける: コードの可読性を高めるために、「RootObject」を「UserResponse」や「ProductData」のような内容を表す名前に変更しましょう。
- 部分的なデータには任意を有効にする: 状況によってAPIが返すフィールドが異なる場合は、コンパイルエラーを避けるためにプロパティを任意にしましょう。
- 不変の状態にはreadonlyを使う: 生成された型が、変更すべきでない状態(たとえばReduxストアのスライス)を表す場合は、readonly修飾子を有効にしてください。
- ネストの命名を確認する: 自動生成されたネストinterfaceの名前が適切かを確認してください。単数形化の結果が不自然な場合は、コード内で名前を変更しましょう。
- JSON Schemaと組み合わせる: 完全な検証のために、TypeScriptの型と一緒にJSON Schemaも生成すれば、コンパイル時だけでなく実行時にもデータを検証できます。