JSON 入力
エディターを読み込み中…
生成された TypeScript
Configuration
TypeScript 生成オプション
type alias ではなく interface を生成
undefined になり得る場合にオプションとしてマーク
JSON データを追加して TypeScript 型を生成します
interface、type、型付きオブジェクトを生成
JSON から TypeScript を生成
JSON のデータ構造から TypeScript の interface / type を生成します
Ctrl+D を押してこのツールをブックマーク
JSON を TypeScript に変換する方法 – 手順ガイド
この JSON→TypeScript 生成ツールを使って、フロントエンドアプリや Node.js サービス向けに JSON サンプルから型安全な interface/type を作成します。
ステップ 1 – JSON サンプルを貼り付ける
- 左側のエディターに代表的な JSON オブジェクトまたは配列を貼り付けます。
- ネストしたオブジェクト、配列、null になり得るフィールドを含めて、型推論を正確にします。
Importを使ってファイル、URL、サンプルデータから JSON を読み込みます。
ステップ 2 – TypeScript 生成オプションを選ぶ
- モデルに合わせた
Root Type Nameを設定します（例:Root）。 - コードベースに合わせて null の扱い（
Optional (?)vsUnion (| null)）を選びます。 - 出力を
interfacesにするかtypeエイリアスにするか決めます。
- モデルに合わせた
ステップ 3 – 生成されたコードを確認する
- フィールド名、型、配列/オブジェクトの表現を確認します。
- 利用可能なら
Root Type Name、null の扱い、フレームワーク等のオプションを調整します。 - 推論が違う場合は JSON サンプルを調整して再生成します。
ステップ 4 – 生成された型を使う
- 出力をプロジェクトに貼り付け、型モジュールから export します。
- API レスポンス、DTO、ランタイムパース境界で型を利用します。
- JSON ペイロードが変わったら再生成してクライアントと同期します。
ステップ 5 – コピーまたはダウンロード
- 出力をプロジェクトにコピーするか、ファイルとしてダウンロードします。
- フォーマッター/リンターを実行してコードスタイルを整えます。
- 必要に応じて JSON の解析/シリアライズ用ライブラリを追加します。
クイックヒント
- 本当に未型付けのフィールドには
unknownを使い、検証後に絞り込みます。 - API が不安定なら JSON Schema を生成して実行時に検証することも検討します。
- 生成ファイルは差し替えやすいように分離して管理します。
出力例（簡略版）
// JSON 入力
{
"id": 123,
"name": "Maeve Winters",
"email": "[email protected]",
"active": true,
"roles": ["admin", "editor"],
"metadata": { "plan": "pro" },
"createdAt": "2024-03-01T10:15:00Z",
"score": 99.5,
"notes": null
}
// Generated TypeScript types (simplified)
export interface Metadata {
plan: string;
}
export interface Root {
id: number;
name: string;
email: string | null;
active: boolean;
roles: string[];
metadata: Metadata;
createdAt: string;
score: number;
notes: null;
}関連する JSON & TypeScript ツール
この JSON→TypeScript 生成ツールと相性の良い JSON/スキーマ関連ツールもチェックしてください。
よくある質問
生成される TypeScript コードはどの機能に対応していますか？
TypeScript の interface、type、class を型安全に生成します。オプションプロパティ、union 型、ネストした interface、配列型、適切な null の扱いに対応し、最新の TypeScript 標準と互換性があります。
複雑なネスト構造はどう扱われますか？
複雑なネストオブジェクトは別の interface として分割され、関係性を保ったまま型を生成します。配列も正しく型付けされます。
null / undefined の扱いはカスタマイズできますか？
はい。オプションプロパティ（?）、| null の union、null 値の無視など、複数の戦略から選べます。
生成コードはそのまま本番で使えますか？
はい。ベストプラクティスに沿った export を含むコードを生成し、TypeScript プロジェクトにそのまま取り込めます。