JSON → TypeScript変換

JSONを貼り付けて、完全なネスト型推論付きのTypeScriptインターフェースまたは型エイリアスを生成します。

このツールについて

JSON → TypeScript変換ツールは、あらゆるJSONデータからTypeScriptの インターフェースや型エイリアスを自動生成する無料のブラウザベースツールです。 APIレスポンス、設定ファイル、データベースレコードの型定義を手作業で書く代わりに、 生のJSONを貼り付けるだけで、正確ですぐに使えるTypeScript型をミリ秒単位で 取得できます。

このコンバーターはJSON構造全体にわたって再帰的に型推論を実行します。プリミティブ値は 対応するTypeScript型にマッピングされます — stringnumberbooleannull です。ネストされたオブジェクトは フィールドキーから名前が生成され、独自のインターフェースまたは型エイリアスとして 抽出されます(例えば、address フィールドからは Address インターフェースが生成されます)。配列は要素の型の一貫性が分析され、 混合型が含まれる場合はユニオン型が自動生成されます。空の配列は後で調整できるよう unknown[] がデフォルトになります。

すべての処理はブラウザ内で完結します。JSONデータが外部に送信されることは ありません — サーバーとの通信、ログ記録、入力に対するサードパーティの 分析は行われません。内部APIレスポンス、認証トークン、シークレットを含む設定 ファイルなど、機密性の高いペイロードにも安全にお使いいただけます。

追加オプションにより、プロジェクトのコーディング規約に合わせて出力を カスタマイズできます。interfacetype エイリアス構文の切り替え、 部分型のためにすべてのフィールドを ? でオプショナルにする設定、 不変データ構造のために readonly モディファイアを追加する設定が 可能です。ルート型名は設定可能で、リネームなしでコードベースに直接統合できます。

使い方

  1. 左側のJSON入力パネルにJSONを貼り付けるか入力します。
  2. 入力に合わせて右パネルにTypeScript出力が自動更新されます。
  3. ルート名フィールドでトップレベルの型名をカスタマイズします(デフォルト: "Root")。
  4. interface / typeトグルをクリックして、インターフェース宣言と型エイリアスを切り替えます。
  5. **optional?**を有効にするとすべてのフィールドがオプショナルに、readonlyを有効にするとreadonly修飾子が追加されます。
  6. CopyをクリックするかCtrl+Shift+Cを押して、生成されたTypeScriptをクリップボードにコピーします。

JSON to TypeScriptの人気サンプル

すべての15件のJSON to TypeScript例を見る →

よくある質問

ネストされたオブジェクトはどのように処理されますか?

各ネストされたオブジェクトは独自のインターフェースまたは型エイリアスとして抽出されます。名前はフィールドキーをPascalCase変換して生成されます。例えば、shipping_addressというフィールドはShippingAddressインターフェースを生成します。名前の衝突がある場合(例:両方とも"Item"に正規化される2つのフィールド)、数値接尾辞が自動的に付加されます(Item、Item2、Item3など)。

混合型の配列はどうなりますか?

コンバーターは配列内のすべての要素を検査し、異なる型をすべて収集します。すべての要素が同じ型の場合、単純な配列型が生成されます(例:string[])。複数の型が見つかった場合、ユニオン配列が生成されます(例:(string | number)[])。空の配列はunknown[]がデフォルトです。

データは安全ですか?

はい。すべての型推論とコード生成はJavaScriptを使用してブラウザ内で完全に実行されます。データがサーバーに送信されることはありません。ブラウザの開発者ツールのNetworkタブで確認できます。

interfaceとtype aliasはどちらを使うべきですか?

ほとんどの場合、オブジェクト型に対してinterfaceとtypeは互換性があります。interfaceは宣言マージをサポートし、多くのコードベースでオブジェクト型の慣例的な選択肢です。type aliasはより柔軟で、ユニオン型、交差型、マップ型を表現できます。プロジェクトの規約に合わせて選択してください。

トップレベルのJSON配列を変換できますか?

はい。ルートJSONが配列の場合、ツールは配列要素から要素型を推論し、配列の名前付き型エイリアスを生成します(例:type RootArray = Root[])。配列内の各ユニークなオブジェクト構造は引き続き独自のインターフェースまたは型を取得します。

関連ツール