JSON to TypeScript — JSON から TypeScript インターフェースを生成
JSON データから TypeScript インターフェースを生成。型・任意プロパティ・読み取り専用プロパティを自動検出。ブラウザ内で完結、アップロード不要。
JSON to TypeScript Interface
Generate TypeScript interfaces from JSON data. Auto-detects types, optional fields, and nested objects. Works entirely in your browser.
TypeScript は JavaScript エコシステムをあくまですべて置き換えてしまったため、重要な NPM パッケージも、フレームワークも、IDE も、いずれも TypeScript の型定義を配布物の一部として同梱しています。この言語の中心的な価値提案は、型を一度書けば、プロジェクトの残りの期間ずっとエディターの自動補完・リファクタリングの安全性・コンパイル時のエラー検出を得られるという点にあります。すべての API レスポンスに対し、入れ子のオブジェクト型・任意プロパティ・ユニオン型の推論まで抱えた TypeScript インターフェースを手書きするのは、TypeScript 開発における最も大きな手間であり、生成されたインターフェースはその API に触れるすべてのコンポーネント・すべてのフック・すべてのテストにとっての信頼できる唯一の情報源となります。
あまり自明でない、TypeScript 固有の論点は interface と type の使い分けです。interface はマージ可能で(別ファイルにある 2 つの interface User {} 宣言は同一の型になります)、拡張性が求められるライブラリーや宣言ファイルで有用です。type エイリアスはマージできませんが、ユニオン・交差・mapped・条件型を表現でき、アプリケーションコードではより強力な構文です。ジェネレーターがデフォルトで interface を採用しているのは、TypeScript チームの公式スタイルガイドがオブジェクトの形状に対して interface を推奨しているためですが、type エイリアスを好むチームや、ユニオン型を必要とするチームのために切り替えオプションを用意しています。
TypeScript インターフェースを生成した後にもっともよく行われる後続の作業は、その型を React コンポーネント・Next.js の API ルート・API レスポンスを消費するユーティリティ関数に渡すことです。プロジェクトが Zod を使っているなら、Zod オプションを有効化すれば、生成されたスキーマが実行時にレスポンスを検証し、そのスキーマから TypeScript 型を推論できます —— 別途 interface ファイルを維持する必要はありません。プロジェクトが tRPC を使っているなら、生成されたインターフェースが t.procedure.input() への入力となり、型付きの RPC エンドポイントを構築できます。インターフェースが契約であり、コンポーネント・フック・エラーハンドラーがアプリケーション層です。
使い方
JSON を貼り付ける
JSON オブジェクトまたは配列を投入します。ジェネレーターが構造を走査し、ルートに対して TypeScript の `interface` を、各オブジェクトの形状に対して入れ子のインターフェースを出力します。
interface か type かを選ぶ
`interface`(拡張可能で同名宣言とマージ可能)と `type`(厳密でユニオン・交差型に対応)を切り替えます。デフォルトは interface です。
.ts ファイルをコピーまたはダウンロード
生成された TypeScript をクリップボードにコピーするか、.d.ts ファイルとしてダウンロードできます。出力は `tsc --noEmit` でコンパイル可能 —— 追加の型定義は不要です。
よくある質問
interface と type のどちらを使えばよいですか?
`interface` はオブジェクトの形状に対する TypeScript の標準的な推奨で、宣言マージと拡張をサポートしています。`type` は厳密なオブジェクト型・ユニオン型・交差型が必要なときの正しい選択肢です。多くの API レスポンスには `interface` で十分です。
任意プロパティはどのように判定されますか?
一部の配列要素で欠落しているプロパティ、またはサンプル内で null であるプロパティは、任意(`key?: Type`)として出力されます。すべての配列要素に存在するプロパティは必須になります。「すべて任意」をオンにすると、すべてのプロパティが任意になります —— 進化する API にとっては最も安全な選択です。
Zod スキーマを生成できますか?
出力オプションで「Zod」をオンにすると、TypeScript 型とあわせて Zod 検証スキーマを出力できます。Zod スキーマは実行時に検証し、TypeScript 型を推論するため、インターフェースとバリデーターは常に同期します。Zod を利用するには `zod` の npm パッケージが必要です。
ユニオン型はどのように扱われますか?
ある配列要素では文字列、別の要素では数値であるフィールドは `string | number` として型付けされます。ある要素ではオブジェクト、別の要素では null であるフィールドは `Type | null` となります。ジェネレーターは、観測されたすべての値を網羅する最も狭いユニオンを推論します。
const アサーションを生成できますか?
はい ——「const」をオンにすると、配列リテラルの後に `as const` を付与して、タプル型や読み取り専用の record 型を生成できます。実行時に変更しない API のフィクスチャには const アサーションが適しています。
制限事項
- 判別ユニオンには非対応ジェネレーターは `type` プロパティキーから判別ユニオンを推論しません。`{ type: 'image', src: '...' } | { type: 'text', body: '...' }` のような多態的な JSON レスポンスはフラットなユニオンとして型付けされます —— 判別ユニオンは生成後に手動で追加してください。
- ジェネリック型パラメーターには非対応出力は具体的なインターフェースになります。`ApiResponse<T>` のようなジェネリックな API レスポンスラッパーには型パラメーターが必要ですが、ジェネレーターはそれを推論しません。ジェネリックを手動で追加し、内部の型をパラメーター化してください。
- JSDoc 注釈は付与されない生成されたインターフェースには JSDoc コメントが付きません。型を自己文書化したい場合は、`@description`、`@example`、`@deprecated` といった注釈を手動で追加してください。
プラットフォーム別の注意点
- macOS
- TypeScript サポートを有効にした VS Code は、生成されたインターフェースをそのまま扱えます。開発中にサンプル API レスポンスからその場で生成したいときは、ブラウザツールが便利です。
- Windows
- 生成されたインターフェースは、あらゆる TypeScript プロジェクトでコンパイル可能です。ブラウザからコピーした API レスポンスから、その場で生成する際に使えます。
- Linux
- コマンドライン用途では、`quicktype --lang typescript` が標準的な代替です。Node.js を入れていない環境でその場限りで生成したい場合は、ブラウザツールが適しています。
- Web
- 完全にクライアントサイドで動作します。生成は即座に行われます。