JSON to TypeScript：即座にインターフェース生成

サンプルのオブジェクトや配列からJSONをTypeScriptインターフェースに変換。

JSONはすべてブラウザ内で解析・変換されるため、端末上に留まり、サーバーへ何もアップロードされません。

開発・運営：Udit Agarwal

Go・Rust・Pythonの型が必要ですか？JSON to Codeをお試しください。

JSON から TypeScript について

このJSON to TypeScriptコンバーターは、サンプルのJSONオブジェクトや配列を、すぐに使えるTypeScriptインターフェースに数秒で変換します。実際のAPIレスポンスを貼り付けると、フィールド型を推論し、子オブジェクトを独自の名前付きインターフェースにネストし、オブジェクトの配列を1つの形にまとめ、一部の項目にないキーをクエスチョンマーク付きのオプショナルとして示します。フロントエンド・バックエンドの開発者、QAエンジニア、型付きクライアントを組む人など、手書きするよりJSONからTypeScript型を生成したいすべての人のために作られています。見慣れないエンドポイントを探索する際の手軽なTypeScriptインターフェース生成ツールとして、あるいはモデルをサンプルの中身と同期させ続けるためにお使いください。すべてはブラウザ内でローカルに動作するため、貼り付けたJSONはご自身の端末で処理され、サーバーへ何もアップロードされません。

機能

• あらゆるJSONオブジェクトや配列から名前付きTypeScriptインターフェースを生成
• ネストしたオブジェクトをパスカルケース名の独立したエクスポート済みインターフェースに変換
• オブジェクトの配列をすべてのキーを網羅する単一インターフェースにまとめる
• 一部の要素にないキーをクエスチョンマーク付きのオプショナルとして示す
• サンプル値からプリミティブ・配列・ユニオン・null型を推論
• モデルに合わせてルートインターフェース名を変更可能
• JSONを検証し、構文エラーの行と列を正確に特定
• 結果をコピーするか .ts ファイルとしてダウンロード

JSON から TypeScript の使い方

1. JSONオブジェクトまたは配列を入力ボックスに貼り付けます。
2. ルートインターフェース名をモデルに合わせて設定するか、Rootのままにします。
3. 出力パネルで生成されたTypeScriptインターフェースを確認します。
4. 結果をコピーするか .ts ファイルとしてダウンロードします。

例

入力

{ "id": 1, "name": "Ada", "tags": ["a", "b"] }

出力

export interface Root {
  id: number;
  name: string;
  tags: string[];
}

フラットなJSONオブジェクトが単一の型付きインターフェースになります。

よくあるエラーとトラブルシューティング

• 出力に行と列を伴うInvalidエラーが表示される。 — JSONに末尾のカンマ・シングルクォート・引用符のないキーなどの構文上の問題があります。報告された行と列で修正すれば、インターフェースが再生成されます。
• 想定したフィールドがクエスチョンマーク付きのオプショナルになっている。 — そのキーは配列サンプルの少なくとも1つの要素に存在しません。常に必須であるべきなら、すべての要素に含めてください。
• プロパティが unknown 型として出力される。 — そのキーのサンプル値がすべて null または undefined だったため、具体的な型を推論できませんでした。そのフィールドに実際の値を持つサンプルを与えてください。
• 数値や文字列などの裸の値を貼り付けると型エイリアスしか得られない。 — それは想定どおりです。単一のexport型エイリアスではなく名前付きインターフェースが欲しい場合は、値をオブジェクトや配列で包んでください。

よくある質問

JSON to TypeScriptコンバーターとは何ですか。

サンプルのJSONオブジェクトや配列を読み取り、各フィールドの型を推論して対応するTypeScriptインターフェースを生成するツールで、結果をそのままコードベースに組み込めます。

JSONをTypeScriptインターフェースに変換するには。

JSONを入力ボックスに貼り付け、必要に応じてルートインターフェース名を設定し、出力パネルから生成されたインターフェースをコピーまたはダウンロードします。

JSON to TypeScriptはオブジェクトの配列をどう扱いますか。

すべての要素のキーを1つのインターフェースにまとめます。一部の要素にないキーはクエスチョンマーク付きのオプショナルとして示され、型が配列全体を網羅します。

ネストしたオブジェクトはどうTypeScriptに変換されますか。

各ネストオブジェクトはパスカルケース名の独立したエクスポート済みインターフェースになり、親は形をインライン化せずに型で参照します。

nullや複数型の値はどうなりますか。

null値はnullとのユニオンを生成し、複数のプリミティブ型を持つフィールドは string | number のようなユニオンになります。

JSONをTypeScriptに変換するとき、JSONはどこかに送信されますか。

いいえ。JSON to TypeScriptの変換は完全にブラウザ内で動作するため、貼り付けたデータはローカルで処理され、端末から外に出ることはありません。

関連ツール

• JSON からコード — JSONから Go、Rust、Python、Java、Kotlin、C#、TypeScript の型を生成します。
• JSON フォーマッター — JSONの整形・圧縮・検証を行い、エラー箇所も表示します。
• JSON から CSV — フラットなJSONオブジェクトの配列をCSVに変換します。
• JSON ビューア — テキストと折りたたみツリーのビューア。展開/折りたたみとノードパスに対応。
• JSON ツリービューア — JSONを折りたたみ可能な型付きツリーとして閲覧します。
• YAML ↔ JSON — YAMLをJSONに、またその逆に変換します。
• モックデータジェネレーター — 名前、メール、UUID、日付などの偽のJSONデータを生成します。

JSONの他のツール

• JSON から CSV — フラットなJSONオブジェクトの配列をCSVに変換します。
• JSON エスケープ / アンエスケープ — テキストをJSON文字列にエスケープ、またはJSON文字列をプレーンテキストに戻します。
• JSON からコード — JSONから Go、Rust、Python、Java、Kotlin、C#、TypeScript の型を生成します。
• JSON Diff — 2つのJSONを比較し、追加・削除・変更を構造的な差分で表示します。
• JSON Schema 生成・検証ツール — JSONサンプルからスキーマを生成し、ドキュメントを検証します。
• JSON Flatten / Unflatten — ネストしたJSONをドット記法のキーにフラット化し、元に戻す。
• JSON to Zod — JSONサンプルからZodスキーマを生成。
• JSON to Pydantic — JSONサンプルからPydantic v2モデルを生成。
• JSONPath 評価ツール — JSONPath式をJSONに対して評価し、マッチをライブ表示。
• JSON to TOON — JSONとTOONを相互変換し、LLMのプロンプトトークンを節約。
• jq プレイグラウンド — 本物のjqエンジンをブラウザで実行。
• TypeScript からモック JSON — TypeScript のインターフェースから、準拠したリアルなモック JSON を生成。

JSONのツールをすべて見る (29) · すべてのツール