JSON → TypeScript 変換ツール
API レスポンスを貼り付けると、すぐに使える TypeScript の interface や型エイリアスが得られます。ネストした型、オプショナルなフィールド、null のユニオンも自動で推論します。
ブラウザ内で動作登録不要アップロードなし
TypeScript
JSON → TypeScript 変換の使い方
- API レスポンスなどの JSON サンプルを左の欄に貼り付けるか、
.jsonファイルを開きます。 - ルート型の名前を設定します（例：
UserやApiResponse）。 interfaceとtypeのどちらで宣言するかを選び、export、readonly、すべてオプショナルを切り替えます。- 空配列や null のように、サンプルからは型がわからない値には
unknown（より安全）かanyを選びます。 - 生成されたコードをコピーするか、
.tsファイルとしてダウンロードします。
型の推論方法
- プリミティブ：文字列、数値、真偽値は
string、number、booleanになります。 - ネストしたオブジェクトは PascalCase の名前付き interface になります。たとえば
billing_addressはBillingAddressになります。 - オブジェクトの配列は 1 つの要素型にマージされ、単数形の名前が付きます。
usersならUser[]です。一部の要素にないキーはオプショナル（key?:）になります。 - null 値は、そのキーで見つかった他の値と組み合わされます：
string | null。常にnullしかないキーはunknownまたはanyになります。 - 型が混在する配列は
(number | string)[]のようなユニオン配列になります。 - 同じ形の型は一度だけ宣言して再利用し、同じ名前になりそうな異なる形には数字の接尾辞を付けます。
- 識別子として無効なキー（
"first-name"や"2fa"など）は引用符で囲みます。
interface と type の違い
単純なオブジェクトの形であれば、両者はほぼ同じように使えます。interface 宣言は拡張やマージができ、コンパイラーのエラーが少しわかりやすくなります。type エイリアスはユニオンやマップ型も表現できます。API モデルには interface、それ以外には type を使うチームが多いですが、コードベースやリンター（@typescript-eslint/consistent-type-definitions）の方針に合わせて選んでください。
サンプルからより良い型を得るには
型の完全さはサンプル次第です。オプショナルなフィールドを含むレスポンスや、多様な要素を複数含む配列を貼り付けると、オプショナルや null 許容のキーを検出できます。日付や列挙型のような値は JSON ではただの文字列として届くので、後から status: 'active' | 'disabled' のように手作業で絞り込んでください。実行時の検証には、生成した型を Zod などのスキーマライブラリと組み合わせましょう。
よくある質問
JSON はアップロードされますか？
いいえ。型はブラウザ内の JavaScript で生成されます。トークンや個人情報を含む API レスポンスがデバイスの外に出ることはありません。
オプショナルなプロパティはどのように判定されますか？
同じ配列内のオブジェクトでキーが異なる場合、少なくとも 1 つのオブジェクトにないキーが
? 付きのオプショナルになります。オブジェクトが 1 つだけなら、すべてオプショナルにチェックを入れない限り、すべてのキーが必須になります。<code>unknown</code> と <code>any</code> のどちらを使うべきですか？
unknown の方が安全です。TypeScript は値を使う前に型の絞り込みを求めます。any はその値の型チェックを無効にします。後で型を詰める予定がある場合にだけ使ってください。ISO 形式の日付が <code>string</code> 型になるのはなぜですか？
JSON には日付型がないため、日付は文字列として送られます。解析後に
new Date() で変換する場合は、モデルのプロパティを Date に変更してください。大きな JSON や深くネストした JSON も扱えますか？
はい。生成処理は入力サイズに比例し、ローカルで実行されるため、数 MB のレスポンスでも 1 秒もかからずに変換できます。