tigtools

JSON to TypeScript

JSON のレスポンスやファイルを貼り付けると、コードにそのまま使える TypeScript の型宣言を取得できます。

ブラウザー内で動作 登録不要

宣言形式

使い方

  1. 入力欄に JSON を貼り付けるか、.json ファイルを開くか、サンプルを試してください。
  2. ルート型の名前を設定します(例: Order や ApiResponse)。
  3. interface または type 宣言を選び、export と readonly を付けるかどうかを指定します。
  4. 生成された TypeScript をコピーするか、types.ts としてダウンロードします。

仕組み

生成ツールは JSON ドキュメント全体を走査し、各場所で見つかった値の種類を記録します。各 JSON オブジェクトは、それぞれ名前付きの宣言になります。名前はプロパティキーを PascalCase に変換したもので、“shipping_address” は ShippingAddress になります。配列の要素には、キーの単数形に基づいて名前が付けられます。“items” は Item、“categories” は Category になり、複数形に見えないキーには “Item” という接尾辞が付きます。

1 つの配列内のすべてのオブジェクトは、1 つのインターフェースに統合されます。一部にしか存在しないキーは “?” 付きでオプションになります。値の種類が場所によって異なる場合、型は string | number のようなユニオン型になります。null は独立した型として保持されるため、時々 null になるフィールドは string | null になります。空の配列は unknown[] になります。推測する材料がないためです。プロパティと型が完全に同じ 2 つのオブジェクトは、重複して生成されず、1 つのインターフェースを共有します。“first-name” のように有効な識別子ではないキーは引用符で囲まれます。

結果は、貼り付けたサンプルのみを表します。実際にはオプションまたは null になり得るフィールドも、サンプルにそれが示されていなければ必須かつ非 null になり、日付はプレーンな文字列として扱われます。利用する前に、API ドキュメントと照らし合わせて型を確認してください。

使用例

API レスポンスの型付け

ショップ API から取得した注文を、ルート名を Order として貼り付けます。Order、Customer、Item、Shipping の各インターフェースが生成され、Item には note?: string が付きます。2 つのアイテムのうち 1 つにしか note がないためです。

読み取り専用の設定

config.json を貼り付け、「プロパティを読み取り専用にする」にチェックを入れ、結果を config.d.ts に貼り付けると、設定への誤った書き込みをコンパイラが検出してくれます。

トップレベルが配列の場合

リストのエンドポイントが [{…}, {…}] を返す場合、ルート名を Product にすると、出力は “export type Product = ProductItem[];” で始まり、その後に ProductItem インターフェースが続きます。

よくある質問

出力でフィールドが任意になるのはなぜですか?

同じ配列内のオブジェクトのうち1つでもそのキーを持たないためです。すべてのオブジェクトにそのキーがあれば必須になります。より正確に任意フィールドを判定するには、複数のレコードを貼り付けてください。

日付が string 型になるのはなぜですか?

JSONには日付型がないため、日付は文字列として扱われます。このジェネレーターは形式を推測しません。コード内で Date オブジェクトに変換する場合は、型を自分で変更してください。

interface と type の違いは何ですか?

オブジェクトの構造についてはほぼ同じように機能します。interface は後から拡張・マージできますが、type エイリアスは後から拡張できません。コードベースで既に使っているスタイルに合わせてください。

Zod スキーマのような実行時バリデーションを生成できますか?

いいえ。生成されるのは TypeScript の型宣言のみで、コンパイル時にチェックされ、実行時にデータを検証するものではありません。

プライバシー

お使いの JSON はブラウザ内でのみ解析されます。アップロード、保存、アクセス解析への利用は一切ありません。