JSON → TypeScript変換

新着

JSONサンプルからTypeScriptのインターフェースを生成。ネスト型にも対応。

Output

Root name

JSON input

TypeScript output

Runs entirely in your browser. Nothing is uploaded.

ワンクリックでJSONをTypeScriptに変換

この JSON to TypeScript コンバーターはJSONサンプルからすぐに使えるインターフェース・型・クラスを生成するため、APIレスポンス用の型を手書きする必要がなくなります。左側にペイロードを貼り付けると、きれいに整形されたTypeScriptが右側に瞬時に表示されます — コピーするか .ts ファイルとしてダウンロードできます。

インストールもサインアップも不要な高速・無料の代替手段です。JSONからTypeScriptインターフェースへの変換が1ステップで完了し、ネストオブジェクト・配列・ユニオン型はすべて自動推論されます。ファイルサイズ制限なし、1日の使用制限なし、データはデバイス外に出ることはありません。

インターフェース・型・クラス — あなたが選ぶ

出力トグルで interface・type エイリアス・class を切り替えられます。インターフェースモードはデフォルトで export interface Root { … } を出力し、typeモードはエイリアスを好むコードベース向けに export type Root = { … } を生成し、classモードは export class にフィールドを宣言します。同じJSONで3つすべてを試せるので、自分のデータで数秒で比較できます。

ルート名を変更したり、export キーワードのオン・オフを切り替えたりでき、選択は次回のために記憶されます — 単一フォーマットのコンバーターではなく、柔軟な TypeScript型ジェネレーター として機能します。

ネストオブジェクト・配列・ユニオン型の賢い推論

エンジンはJSONを走査し、各オブジェクトに対して名前付きインターフェースを構築します。ネストされたインターフェースはキー名から命名され、配列要素は単数化されます — orders 配列は Order[] になります。同一の形状は1つのインターフェースに重複排除され、型が混在する配列は (string | number)[] のようなユニオン型に集約されます。

列挙型検出をオンにすると、繰り返し現れる文字列値がリテラルユニオン型として推論されます — "shipped" と "pending" が混在するstatusカラムは単なる string ではなく "pending" | "shipped" になります。この精度により、出力が手書きのように感じられます。

オプショナル・null・readonlyフィールドの適切な処理

実際のAPIデータは不完全なことが多いため、コンバーターは正直に処理します。APIレスポンスをTypeScriptに変換する際、配列の一部のアイテムにしか存在しないキーは ? でオプショナルとしてマークされます。nullの型付け方法も選べます: 明示的な | null ユニオン型として保持するか、null → オプショナル を有効にして zip: string | null を zip?: string に変換するかです。

readonly トグルはすべてのプロパティに readonly 修飾子を付与し、イミュータブルモデルに最適です。これらのオプションを組み合わせることで、生成された JSONからのTypeScript型 に手動修正を加えることなく、プロジェクトの厳密さに合わせられます。

quicktype・json2ts・MakeTypesとの比較

quicktype.io は多言語生成に最も機能が充実したオプションで、TypeScript以外にもPython・Go・C#・Kotlinなど多くの言語をサポートします。その幅広さゆえ、TypeScript出力にquicktypeのランタイムヘルパーや余分なボイラープレートが含まれることがあります。また、JSONをサーバーで処理するため、機密ペイロードの取り扱いには注意が必要です。json2ts.com はよりシンプルで基本的なインターフェースを生成しますが、列挙型検出・readonlyサポート・null処理オプションが不足しています。

MakeTypes はランタイム解析付きのTypeScriptクラスを生成しますが、コードオーバーヘッドが大きくなります。このUtiloKitコンバーターは、ランタイムフットプリントゼロの純粋な型を生成します — コードに必要なインターフェースや型エイリアスだけを、サーバーへのアップロードなし・アカウント不要で、完全にブラウザ内で生成します。

プライバシー重視の設計 — JSONはブラウザから出ない

すべての変換はブラウザのタブ内でJavaScriptを使ってローカルに行われます。JSONはサーバーにアップロードされたり、保存・共有されることはありません — オフラインでも動作し、機密ペイロード・内部API・本番データの処理に安全です。この JSON to TypeScriptコンバーター をブックマークしておけば、型が必要なときにいつでも素早く利用できます。

寛容なパーサーは // コメント・末尾カンマ・シングルクォート文字列を含むJSON風入力も受け付けるため、エディターからJavaScriptオブジェクトリテラルをそのまま貼り付けても有効な出力が得られます。追加の手順は不要です。

Frequently asked questions

JSONをTypeScriptに変換するにはどうすればよいですか？

入力パネルにJSONを貼り付けると（またはサンプルボタンを押して例を読み込むと）、対応するTypeScriptが出力パネルに即座に表示されます。例えば、{"id": 1, "name": "Yuki"} は export interface Root { id: number; name: string; } になります。コピーまたは .ts をダウンロードをクリックして、型をプロジェクトに直接追加できます。

JSONからTypeScriptインターフェースを生成するにはどうすればよいですか？

出力をInterface（デフォルト）に設定しておくと、各JSONオブジェクトが独自の export interface になります。ルート名フィールドでトップレベルの名前を制御できます。例えば { "id": 1, "name": "Yuki" } でルート名をUserにすると export interface User { id: number; name: string; } が生成されます。ネストされたオブジェクトは自動的に独自の名前付きインターフェースになります。

インターフェースと型エイリアスの違いは何ですか？

どちらも同じオブジェクトの形状を記述します — Interface / Type / Class トグルでコードベースの好みに合わせて選択してください。Interfaceモードは宣言マージで再オープン・拡張可能な export interface Root { … } を出力し、Typeモードはユニオン型やプリミティブも表現できる export type Root = { … } を出力し、Classモードはフィールドを宣言した export class Root { … } を出力します。

オプショナルフィールドやnullフィールド（? / | null）はどう扱いますか？

2つのスイッチで制御します。「不足キーにオプショナル(?)を付ける」はオブジェクト配列の一部のアイテムに存在しないプロパティをオプショナルとしてマークします。「null → オプショナル」は zip: string | null のようなnull許容フィールドを zip?: string に書き換えます。明示的な | null ユニオンを保持するにはオフにしてください。

ここにJSONを貼り付けても安全ですか？

はい。変換は100%クライアントサイドです。JSONはブラウザのタブで動作するJavaScriptによって解析・変換され、サーバーにアップロード・ログ・送信されることは一切ありません。インターネット接続を切断してもツールは動作し続けるため、プライベートAPIレスポンスや機密ペイロードの処理に安全です。

文字列列挙型の検出はどのように機能しますか？

「文字列列挙型を検出する」をオンにすると、「shipped」や「pending」のような繰り返し出現する文字列のカラムが、単なる string ではなく "pending" | "shipped" というリテラルユニオン型として推論されます。これにより生成される型がより精確で使いやすくなります。

APIやSwaggerのレスポンスから型を生成できますか？

はい — APIからの実際のJSONレスポンスを貼り付けると、すぐに使えるインターフェースが推論されます。それをfetchやaxiosの呼び出しに直接つなぐことで、オートコンプリートと型安全性が得られます。Swagger/OpenAPIエンドポイントの場合は、スキーマドキュメントではなくレスポンスボディのJSONをコピーして変換してください。

Add, subtract, multiply matrices and compute determinant, inverse and transpose for 2×2–4×4 matrices.

データと形式