Stax
Tools

JSON to TypeScript Generator

Convert JSON objects to TypeScript interfaces instantly.

interface Root {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  address: Address;
  tags: string[];
  createdAt: string;
}

interface Address {
  street: string;
  city: string;
  pincode: string;
}

ℹ️ Arrays are typed from the first element. Nested objects become separate interfaces. Optional fields (null values) are typed as null — mark them field?: Type manually if needed.

JSONからTypeScriptインターフェースジェネレーター — 任意のJSONから型付きインターフェースを自動生成

REST APIを使用したり複雑なデータ構造を扱うTypeScriptアプリケーションを構築する際、TypeScriptインターフェースを手動で書くことは退屈でエラーが起きやすく遅い作業です。複数のオブジェクトにまたがる30以上のプロパティを持つ深くネストされたAPIレスポンスを正確に型付けするには20分かかることがあります。プロパティ名のタイポや誤った型の割り当てはランタイムにしか現れないバグを作ります。このツールは1秒以内に任意の有効なJSONから完全で正しいTypeScriptインターフェースを生成します。

JSONを左パネルに貼り付けます。ブラウザのネットワークタブからコピーしたAPIレスポンス・バックエンドからのサンプルペイロード・任意の有効なJSONオブジェクトや配列を使用できます。エディタ上の入力欄でルートインターフェース名（例：「ApiResponse」・「UserProfile」・「OrderData」）を設定します。TypeScriptインターフェースの出力が右パネルに即座に更新されます。ネストされたオブジェクトに対しては、ツールが別の名前付きインターフェース（例：「address」フィールドは独自のインターフェース宣言を持つ「AddressInterface」になります）を生成します。配列はアイテム型で型付けされます（例：「items: OrderItemInterface[]」）。コピーをクリックして完全な出力を取得し、TypeScriptプロジェクトに直接貼り付けます。

コンバーターはJSON構造を再帰的に走査します。プリミティブ値はTypeScript相当にマッピングされます：文字列は「string」、数値は「number」、真偽値は「boolean」、null値は「null」になります。nullableなAPIフィールドから値がnullまたは型になり得る場合、コンバーターはユニオン型（例：「string | null」）を使用します。配列は最初の要素からアイテム型を推論します。配列にオブジェクトが含まれる場合、そのオブジェクトは別のインターフェースになります。型が混在する配列はユニオン型（「string | number」）を生成します。空の配列はアイテム型を推論できないため「unknown[]」になります。深くネストされたオブジェクトは各レベルに名前付きインターフェースを生成し、出力を整理された読みやすい形に保ちます。

フルスタックのTypeScript開発者は新しいサードパーティAPIを統合するたびに使用します。サンプルレスポンスを貼り付ければ、長いAPIドキュメントを読む前に即座に型付きインターフェースが得られます。TypeScriptサーバーを書くバックエンド開発者はAPIクライアントからの受信リクエストボディを素早く型付けするために使用します。TypeScript初心者は複雑なJSON構造がTypeScriptインターフェースパターンにどう変換されるかを学ぶために使用します。APIファーストの開発を行うチームはバックエンドが完成する前の設計段階でモックAPIレスポンスからインターフェーススタブを生成するために使用します。

すべてのJSON解析とTypeScript生成はブラウザ内で100%実行されます。APIレスポンス・ペイロードデータ・コードはいかなるサーバーにも送信されず、現在のブラウザセッション外のどこにも保存されません。

よくある質問

How does JSON to TypeScript conversion work?
The tool recursively walks your JSON structure. Objects become interfaces, arrays infer their item type, and primitives map to string, number, boolean, or null. Nested objects generate separate named interfaces.
Does it handle nested objects and arrays?
Yes. Nested objects generate their own interface (e.g., AddressInterface), and arrays are typed as ItemType[]. The tool handles multiple levels of nesting automatically.
What happens with mixed-type arrays?
If an array contains elements of different types, the tool generates a union type (e.g., string | number). Empty arrays are typed as unknown[].
Can I customise the root interface name?
Yes — there is a 'Root interface name' input at the top. Change it to anything you like (e.g., ApiResponse, UserData) and the output updates instantly.
Is my JSON data sent to a server?
No. All conversion happens entirely in your browser using JavaScript. Your JSON never leaves your device.

関連ツール