🧩 開発者ツール

JSON→TypeScript型 変換

APIのレスポンスや設定ファイルのJSONを貼るだけで、対応するTypeScriptの型定義（interface / type）をその場で生成します。ネスト・配列・null・省略可能プロパティも自動で推論。処理はすべてブラウザ内で完結し、貼り付けたJSONは外に出ません。

例（クリックで試す）

ルート（一番外側）の型の名前です。ネストしたオブジェクトはキー名から自動で命名します。

JSON→TypeScript型 変換ツールの使い方

はじめての方は、入力欄の上にある「例（クリックで試す）」のチップを押してみてください。サンプルJSONが入り、型定義がすぐに表示されます。慣れたら、上のテキストエリアにJSONを貼り付けるだけ。貼り付けたその場で生成されるライブ動作なので、ボタン操作は不要です。生成結果は「コピー」または「.ts をダウンロード」で取り出せます。

具体例：APIレスポンスから型を起こす

たとえば、次のようなJSONを貼り付けると：

{"id":1,"name":"Aoi","tags":["dev","design"],"profile":{"age":20,"bio":null}}

「interface」モードのまま、こう出力されます（ルート型名 Root）：

export interface Root {
  id: number;
  name: string;
  tags: string[];
  profile: Profile;
}

export interface Profile {
  age: number;
  bio: null;
}

ネストした profile は別の interface として切り出され、親からは型名で参照されます。

  • ルート型名：一番外側の型名を指定します（既定は Root）。ネストしたオブジェクトはキー名を PascalCase にして自動命名し、名前が衝突する場合は末尾に連番を付けます。
  • interface / type の切り替え：チェックすると interface の代わりに type エイリアスで出力します。
  • readonly：各プロパティに readonly 修飾子を付けます。イミュータブルに扱いたいレスポンス型に便利です。
  • 推論ルール：配列は要素型に []（混在は (A | B)[]、空配列は unknown[]）。null は | null として合成。オブジェクトの配列は全要素のキーを統合し、一部にしか無いキーは省略可能（?）にします。

こんな場面で便利です

  • ドキュメントの無い社内APIのレスポンスから、手早く型を起こしたいとき
  • モックJSONやサンプルデータから interface のたたき台を作りたいとき
  • ネストが深いJSONの構造を、型定義として俯瞰して把握したいとき
  • フロントエンドとバックエンドで受け渡すデータ形状をすり合わせたいとき

生成される型はあくまでサンプルからの推論です。実際のAPI仕様（省略可能かどうか、取り得る値の範囲など）に合わせて、必要に応じて手で調整してください。

よくある質問

入力したJSONはサーバーに送信されますか？
いいえ。JSONの解析とTypeScript型の生成はすべてお使いのブラウザ内で完結し、貼り付けたJSONがサーバーに送信・保存されることはありません。社内APIのレスポンスや個人情報を含むJSONでも安心してご利用いただけます。
ネストや配列・null はどんな型になりますか？
ネストしたオブジェクトはキー名をPascalCaseにした別のinterfaceとして抽出し、親からはその型名で参照します。配列は要素の型に [] を付け、複数の型が混ざる場合は (A | B)[]、空配列は unknown[] になります。オブジェクトの配列は全要素のキーを統合して1つの型にまとめます。値が null だけのキーは null 型、null と他の型が混ざるキーは string | null のように | null を付けます。
省略可能（?）なプロパティはどう判定していますか？
オブジェクトの配列で、一部の要素にしか存在しないキーを省略可能と判定し、型名のうしろに ? を付けます。たとえば要素Aには title と likes、要素Bには title だけがある場合、likes? のように省略可能なプロパティとして出力します。すべての要素に共通するキーは必須プロパティになります。