TypeScript から JSON への変換ツール
TypeScript のインターフェースや型付きオブジェクトリテラルを貼り付けると、有効な JSON が返ってきます。
このツールでできること
TypeScript の interface と型付きオブジェクトリテラル、あるいは const config: Config = {...} のような代入を、API リクエスト・フィクスチャ・OpenAPI のサンプル用に実際の JSON として欲しい場面はよくあります。そのブロックをまるごと貼り付けてください。型注釈を剥がし、リテラルを解決して、どこでもパースできる JSON を返します。
型だけの構文は TypeScript コンパイラ が emit 時に行うのと同じ扱いになります。interface と type エイリアスは消え、as const や satisfies は出力を変えず、Record<string, X> はそのままオブジェクトとして残り、readonly や ? 修飾子は JSON では無視されます(オプショナルで未設定のフィールドは単に出ません)。文字列のクォートの仕方は JSON.stringify と同じで、ダブルクォートと必要に応じたエスケープ、キーは常に文字列です。
enum は実行時の値を出力します。数値 enum は数値に、文字列 enum は文字列になります。Date インスタンスは RFC 8259 に従って ISO-8601 になります。undefined のプロパティは落ち、null は null のまま残ります。複数の interface とそのインスタンスをまとめて貼っても大丈夫です — 各インスタンスは JSON のトップレベルのエントリとして並びます。
使い方
3 ステップ。5 行の interface でも、<code>types.ts</code> モジュール全体でも動きます。
TypeScript を貼り付け(またはサンプルを試す)
左側のエディタに放り込んでください。interface + 型付きオブジェクト、type エイリアス、enum 定義、export された const 宣言 — どれでも OK です。サンプルを読み込む をクリックすると、現実的な入力のイメージがつかめます。
TypeScript ハンドブックの書き方のままで大丈夫です — ジェネリクスやデコレーター、import type を剥がす必要はありません。JS から JSON への変換ルールを確認したいときは MDN の JSON リファレンスが便利です。
変換を押す
緑の 変換 ボタンをクリック。型情報を消し、リテラル値を評価して、JSON.stringify(obj, null, 2) と同じようにシリアライズします。
JSON をコピー
右側のパネルに整形済みの JSON が出ます。リクエストボディ、OpenAPI のサンプル、ユニットテストのフィクスチャにそのまま貼り付けられます。
実際に役立つ場面
API リクエストのサンプル
Angular、Next.js、NestJS のリクエスト DTO があって、Swagger・Postman・curl 用の JSON ペイロードが要る。interface とオブジェクトを貼り付ければ JSON が手に入ります。
ユニットテストのフィクスチャ
Jest や Vitest のテストで使っているインラインの型付きモックを、MSW・Playwright・統合テスト用の独立した JSON フィクスチャに変換できます。
OpenAPI と JSON Schema のサンプル
<code>User</code> interface とサンプルインスタンスを貼り付けると、<a href="https://swagger.io/specification/" target="_blank" rel="noopener">OpenAPI</a> スキーマの <code>example</code> ブロックを一発で生成できます。
設定を JSON へ移行
型付きの <code>config.ts</code> から JSON ベースの設定ストアへ移行する?型付き const を貼り付けて、きれいな JSON を新しい設定システムに流し込みましょう。
よくある質問
型注釈やジェネリクスは剥がしてくれますか?
はい。interface、type エイリアス、ジェネリックパラメータ、as キャスト、satisfies、readonly はすべて TypeScript コンパイラ と同じ方法で消されます。JSON にはランタイムの値だけが残ります。
enum はどう扱われますか?
数値 enum は数値を、文字列 enum は文字列を出力します。const enum も変換の目的では通常の enum と同じ扱いです。オブジェクトリテラル内の enum 参照は、宣言された値に解決されます。
オプショナルフィールドや Record 型は?
値が存在しないオプショナルフィールド(name?: string)は JSON に出ません — JSON.stringify のデフォルト挙動と同じです。Record<string, X> は、渡された文字列キーを持つ JSON オブジェクトのまま残ります。
型定義ファイルを丸ごと貼り付けても大丈夫?
はい。複数の interface、type エイリアス、enum、型付き const を一度に貼り付けられます。トップレベルの型付きインスタンスはそれぞれが JSON のエントリになり、ネストした型はその場で展開されます。
Date、null、undefined はどうなりますか?
Date 値は ISO-8601 文字列になります。null は JSON の null のままです。undefined プロパティはオブジェクトから落ちます。配列内の undefined 要素はそのスロットで null になります — JSON.stringify と同じ挙動です。
貼り付けたコードは保存されますか?
コードは変換のためだけにバックエンドへ送られます。ログにも残りませんし、保存もしません。機微な内容を貼り付ける場合は、念のため中身を確認してからどうぞ。
一緒に使えるツール
TypeScript から JSON はパズルのひとつのピースです。相性の良いツールはこちら: