JSON → TypeScript 型生成

// JSON → TypeScript 型生成に関するよくある質問

TypeScriptの型定義はどんな時に必要になりますか？

新しいAPIエンドポイントに繋ぐとき、レスポンスサンプルを本ツールに貼るだけで型定義ができるので、TypeScriptプロジェクトへの組み込みが一気に楽になります。特にネストの深いAPIや、多くのプロパティを持つオブジェクトほど、手書きに比べた時短効果が大きくなります。他にも「外部データを読み込んで型付けしたい」「サードパーティAPIのラッパーを作りたい」といった場面でも役立ちます。

interfaceとtypeはどっちを選べば良い？

オブジェクトの形状を定義する用途なら **interface** が一般的です。後から `extends` で拡張できたり、同名でマージできる性質があり、Reactのpropsや状態定義でよく使われます。**type** は「文字列 or 数値」のような複雑なユニオン型を扱いたい場合に有利です。迷ったら interface でOK、それで型システムに困ることはほぼありません。

ネストされたJSONも変換できますか？

はい、深くネストされたオブジェクトも再帰的に解析し、各階層ごとに別のinterface/typeを生成します。名前も自動でつけられるので、そのままファイルに貼り付けて動作します。ネストが深いAPIレスポンスほど、手書きに比べた時短効果が大きくなります。

配列の型はどう判定されますか？

配列の全要素を見て、共通する型を推論します。要素が全て同じ型なら `T[]`、異なる型が混在していれば `(T | U)[]` のようなユニオン配列になります。空の配列は `unknown[]` になるので、必要に応じて手動で `string[]` などに置き換えてください。

一部にだけあるプロパティはどう扱われますか？

配列内オブジェクトを解析するとき、「あるオブジェクトにはあって、別のオブジェクトにはない」プロパティは自動的に `?`（任意）マークが付きます。例えば `[{"id":1,"name":"A"},{"id":2}]` を解析すると `{ id: number; name?: string }` になります。実データに基づいた現実的な型定義になります。

生成された型はそのまま使えますか？

はい、そのままコピーして .ts ファイルに貼り付ければ動きます。ただし null と undefined の区別、日付文字列と Date オブジェクトの区別、正確な数値範囲などはJSONからは推測できないため、必要に応じて手動で微調整してください。

nullが混じっている場合はどうなりますか？

`null` が含まれるプロパティは `string | null` のようなユニオン型で生成されます。例えば `{"name": null}` から生成する場合は `name: null`、`[{"name":"A"},{"name":null}]` から生成する場合は `name: string | null` になります。実データの多様性を反映した型が得られます。

ルート名を変更できますか？

はい、「ルート名」欄で最上位のinterface/type名を指定できます。デフォルトは `Root` ですが、`User`・`ApiResponse`・`Product` など、実際の用途に合わせた名前にしておくと、コード内で使うときに分かりやすくなります。

JSON以外の形式にも対応していますか？

本ツールはJSONのみ対応です。YAML なら YAML⇔JSON変換 で先にJSONに変換、CSVなら CSV⇔JSON変換 で先に変換してからご利用ください。JSON Schemaが欲しい場合は JSON Schema生成 が向いています。

入力したJSONは外部に送信されますか？

いいえ、すべての処理はブラウザ内のJavaScriptで完結します。入力したJSONも生成された型定義もサーバーに送信されません。社内APIの本番レスポンス・機密情報を含むデータサンプル・未公開プロジェクトのJSONも安心して型化できます。