OpenReplay Logo
12k
12k

JSON → TypeScript 変換ツール

JSON をクリーンな TypeScript のインターフェースや型に変換します。ネストされたオブジェクトは名前付きで重複排除されたインターフェースになり、ブラウザー内でローカルに処理されます。

出力
ローカルで処理されます

このツールについて

JSON から TypeScript へのコンバーターは、JSON ドキュメントを読み取り、その静的な型を推論します。スカラーは string、number、boolean に対応し、配列は T[] になり、ネストされたオブジェクトはインライン化されるのではなく独自の名前付きインターフェースとして抽出されます。このツールは値のツリー全体をたどり、配列内の各オブジェクトのキーをマージし(一部の要素に存在しないキーはオプションとしてマークします)、同一の形状を持つオブジェクトを重複排除して 1 つのインターフェースを再利用させ、有効な識別子でないプロパティ名は引用符で囲みます。null 値は隣接する型が見つかったときにその型とユニオンになり、空の配列は unknown[] に、空のオブジェクトは Record<string, unknown> になります。

API レスポンスを手書きせずに型付きのモデルに変換したり、フィクスチャや設定ファイルからインターフェースを生成したり、コードに組み込む前にペイロードの実際の形状を確認したりするのに使えます。ルート型の名前を変更し、コードベースの慣習に合わせて interface 出力と type 出力を切り替えれば、貼り付けや編集に応じて結果がライブで再生成されます。あとはそれを .d.ts やモデルファイルにそのままコピーできます。

生成される型は貼り付けたサンプルのみを反映します。例ではたまたま存在しなかったり null だったりするフィールドが実際のデータには現れることがあるため、信頼する前にオプションや null ユニオンを確認してください。

よくある質問

TypeScript のインターフェースを生成しますか、それとも型エイリアスを生成しますか?

両方です。デフォルトは interface で、拡張やマージをしたいオブジェクトモデルに最適です。type の切り替えにすると、インターフェースでは表現できないユニオンやタプルを表現できる型エイリアスを出力します。

キーが異なるオブジェクトの配列はどのように扱いますか?

すべての要素のキーを 1 つのインターフェースにマージします。少なくとも 1 つの要素に存在しないキーは ? でオプションとしてマークされるため、生成された型は配列内のすべての要素を安全に記述できます。

なぜ 2 つのネストされたオブジェクトが同じインターフェース名を共有するのですか?

フィールドの集合とフィールドの型が同一のオブジェクトは、1 つの名前付きインターフェースに重複排除されて再利用されます。これにより出力がコンパクトに保たれ、ほぼ同一の重複した定義を避けられます。