コンテンツへスキップ

JSONからTypeScriptへの変換ツール

JSONサンプルからTypeScriptインターフェースを生成します。配列内も含め、異なるオブジェクト構造ごとに1つのインターフェースを作成します。

オプション

 

生成されたTypeScript

 

使い方

このツールは、各キーと値を解析してJSONサンプルからTypeScriptのインターフェース定義を推論し、エクスポート可能なインターフェース宣言を出力します。APIレコードのリストなど、同じ構造を持つオブジェクトの配列は、項目ごとに重複した定義を作らず、単一の共通インターフェースを生成します。

  1. JSON貼り付け

    オブジェクト、またはAPIレスポンスなどのオブジェクトの配列です。

  2. ルートインターフェースの名前を設定してください。

    ネストされたオブジェクトには、フィールド名に基づいた独自のインターフェースが生成されます。

  3. TypeScriptをコピーしてください。

    入力やオプションの変更に合わせて自動更新されます。

構造の一致判定と命名規則

ネストされたオブジェクトは、個別の名前付きインターフェースとして生成されます。例えば、cityとzipを含むaddressというフィールドはAddressインターフェースとなり、親インターフェースからはaddress: Addressとして参照されます。インターフェース名はフィールド名の先頭を大文字にして導出されます。

すべてのオブジェクト構造は、ソートされたプロパティ名と型からなるシグネチャに要約されます。JSON内のどこであっても、レコード配列の各項目のように2つのオブジェクトが同じシグネチャを持つ場合、数値サフィックス付きの同一構造の新しいインターフェースを生成するのではなく、同じインターフェースが再利用されます。

  • 配列:要素型の配列として型付けされます(例:string[]やTag[])。要素が複数の異なる形状を持つ配列は、ユニオン型になります(例:(Cat | Dog)[])。
  • オプションプロパティ:サンプルではすべてのキーが存在するとみなされるため、デフォルトではオフになっています。実際のデータでフィールドが省略される可能性がある場合は、「すべてのプロパティをオプションにする」をオンにしてください。
  • 特殊なキー:ハイフンを含むものなど、有効な識別子ではないプロパティ名は、出力時にクォートで囲まれます。

単一のサンプルではすべてのケースを示すことはできません

単一の例からのスキーマ推論と同様に、文字列になったり数値になったりするフィールドは、サンプルに出現する値に基づいて型付けされ、ユニオン型は自動的には検出されません。出力を確認し、実際のデータに応じてユニオン型や文字列リテラル型を追加してください。すべての処理はこのページ内で完結します。内部フィールド名や独自APIの構造を含む可能性のあるJSONが外部に送信されることはありません。

よくある質問

JSON APIレスポンスからTypeScriptインターフェースを生成するにはどうすればよいですか?

JSONオブジェクトまたは配列を入力フィールドに貼り付け、ルートインターフェース名(デフォルトはRoot)を設定すると、入力に合わせてインターフェースが再生成されます。ツールは各キーと値を検査し、TypeScriptの型(string、number、boolean、null、ネストされたインターフェース、配列)を推論して、TypeScriptプロジェクトにそのまま組み込めるエクスポート可能なインターフェース宣言を出力します。

TypeScript生成ツールはオフラインで動作し、データをどこにも送信せずに使用できますか?

はい。すべての生成処理はブラウザ上でJavaScriptを使用して実行されます。内部フィールド名、データ構造、独自APIの形状を含む可能性のあるJSONデータがサーバーに送信されることはありません。出力されるTypeScriptはローカルで生成および表示されます。

このツールはネストされたJSONオブジェクトと配列をどのように処理しますか？

ネストされたオブジェクトは、個別の名前付きインターフェースとして生成されます。例えば、cityとzipを含むaddressというフィールドはAddressインターフェースとなり、親インターフェースからはaddress: Addressとして参照されます。配列は要素型の配列として型付けされ、例えばstring[]やTag[]となります。同じ形状のオブジェクトからなる配列の場合は、要素ごとに別々のインターフェースを作るのではなく、1つのインターフェースが生成されてすべての要素で再利用されます。

生成されたTypeScriptインターフェースでオプションプロパティを使用すべきなのはどのような場合ですか？

JSON内の一部のフィールドが特定のオブジェクトに存在しない可能性がある場合は、「すべてのプロパティをオプションにする」を有効にしてください。これにより、各プロパティ名の後に疑問符が追加され（例：email?: string）、TypeScriptがそれらのフィールドを省略したオブジェクトを受け入れるようになります。デフォルトでは、推論されたすべてのプロパティは必須です。オプションのクエリパラメータやNULL許容フィールドを持つAPIをモデル化する場合、オプションプロパティを使用することで型エラーを防げます。

単一のJSONサンプルからTypeScriptの型を推論する際の主な制限は何ですか？

単一のサンプルからのスキーマ推論と同様に、生成ツールはサンプル内に存在するもののみを認識できます。stringとnumberが混在するフィールドは、サンプルに表示された値に基づいて型付けされます。string | number | nullなどのユニオン型は自動生成されません。出力を慎重に確認し、実際のデータに応じてユニオン型、ジェネリクス、またはより具体的な文字列リテラル型を追加してください。