JSONサンプルからinterface / typeを自動生成
// ここに生成結果が表示されます
APIのレスポンスや設定ファイルなどのJSONサンプルを貼り付けるだけで、対応するTypeScriptの型定義(interface または type)を自動生成する無料ツールです。ネストしたオブジェクト、配列、オプショナルなプロパティ、ユニオン型までを再帰的に推論するため、手作業で型を書き起こす時間を大幅に短縮できます。インストールや会員登録は不要で、入力したJSONは外部に送信されず、すべてブラウザ内で処理されます。
使い方はかんたんです。上部のテキストエリアにJSONを貼り付けると、その場でTypeScriptの型が生成されます。ルート(最上位)の型名はデフォルトで「Root」ですが、任意の名前に変更できます。出力形式を interface / type で切り替えたり、すべてのプロパティに readonly を付けたり、値が null のプロパティを任意(?)扱いにしたりといったオプションも用意しています。生成結果は「コピー」ボタンでクリップボードにコピーして、そのままエディタに貼り付けられます。
各プロパティの型は値から推論します。文字列は string、数値は number、真偽値は boolean、null は null になります。オブジェクトはネストの階層ごとに別の型として切り出し、親の型名にプロパティ名(PascalCase)を連結した名前を付けます。たとえば Root の address プロパティは RootAddress、その中の geo は RootAddressGeo という型になります。配列は要素の型を調べ、要素がオブジェクトなら要素用の型を生成して 型名[] の形に、要素の型が複数あれば (A | B)[] のようなユニオン配列にします。空配列は any[] として出力します。
オブジェクトの配列を型にする場合、要素ごとにキーが異なることがあります。本ツールでは、すべての要素に共通して存在するキーを必須、一部の要素にしか存在しないキーをオプショナル(?付き)として扱います。これにより、実際のデータのばらつきを反映した実用的な型を得られます。
| JSONの値 | 生成されるTypeScript型 | 説明 |
|---|---|---|
| "hello" | string | 文字列は常に string |
| 42 / 3.14 | number | 整数・小数の区別なく number |
| true / false | boolean | 真偽値 |
| null | null | 他に値の型が分かる場合は type | null |
| ["a","b"] | string[] | 要素の型で配列化 |
| [] | any[] | 空配列は要素型が不明 |
| [1,"a"] | (number | string)[] | 混在配列はユニオン配列 |
| { "a": 1 } | RootA など | ネストオブジェクトは別interface |
外部APIのJSONレスポンスに合わせた型を素早く用意したいとき、既存のJSON設定ファイルに型を付けたいとき、モックデータから開発用の型を起こしたいときなどに便利です。CSVやJSONの相互変換だけでなく、型定義の生成までブラウザ内で完結できます。生成された型は開発時の静的チェック用であり、実行時のバリデーションが必要な場合は zod などのスキーマライブラリと併用してください。