JSON to TypeScript変換ツール
JSONからTypeScript interface/typeを自動生成。APIレスポンス、設定ファイル、モックデータの型定義をすぐに作れます。
JSON入力
TypeScript出力
生成されたTypeScript型定義がここに表示されます
生成オプション
JSON to TypeScript変換でできること
APIレスポンスのサンプルから、型安全なTypeScriptコードの土台をすばやく作成できます。
ネスト推論
オブジェクトの中にある配列や子オブジェクトを読み取り、必要なinterface/typeを分けて生成します。
配列対応
配列内の要素をまとめて確認し、文字列・数値・真偽値・null・オブジェクトの型を推論します。
出力調整
interface/type、export、optional、readonlyを切り替え、プロジェクトの書き方に合わせられます。
ブラウザ内処理
入力データはサーバーへ送信されません。社内APIのレスポンスや検証用JSONも手元で変換できます。
使い方
- APIレスポンスや設定ファイルのJSONを入力欄に貼り付けます。
- Root interface名を `UserResponse` や `ApiResult` のように分かりやすく設定します。
- 必要に応じてinterface/type、export、optional、readonlyを選びます。
- 変換ボタンを押し、生成されたTypeScriptをコピーまたは `.ts` ファイルとして保存します。
入力と出力の例
JSON入力
{
"id": 1,
"name": "Tanaka",
"roles": ["admin", "editor"],
"profile": {
"email": "[email protected]",
"verified": true
}
}
TypeScript出力
export interface RootObject {
id: number;
name: string;
roles: string[];
profile: Profile;
}
export interface Profile {
email: string;
verified: boolean;
}
型推論のルールと注意点
生成結果は開発の出発点として使い、最終的な型設計は実際のAPI仕様に合わせて調整してください。
| JSON値 | 生成されるTypeScript型 | 確認ポイント |
|---|---|---|
| 文字列 | string |
日付文字列やID文字列もまずはstringとして扱います。 |
| 数値 | number |
整数と小数はどちらもnumberです。 |
| null | null またはユニオン型 |
配列内で他の型と混在する場合は string | null のように生成します。 |
| 配列 | Type[] |
空配列は要素型を判断できないため unknown[] になります。 |
| オブジェクト | 別interface/type | ネスト名は親キーからPascalCaseで自動生成します。 |
関連ツール
TypeScript型を生成する前後に使いやすいJSONツールです。
よくある質問
JSON to TypeScript変換で迷いやすいポイントをまとめました。
JSONを入力し、Root interface名や出力オプションを選んで変換します。生成されたinterface/typeはコピーしてReact、Next.js、Node.jsなどのTypeScriptプロジェクトで使えます。
送信されません。変換処理はブラウザ内のJavaScriptで完結します。認証トークンや個人情報を含むデータは本番値をマスクしたうえで扱うと、さらに安全です。
APIレスポンスのオブジェクト構造を表すならinterfaceが扱いやすいです。ユニオン型や複雑な型合成を前提にする場合はtypeを選ぶと柔軟です。
APIレスポンスで存在しない可能性があるフィールドにはoptionalを使います。単一サンプルだけでは欠落フィールドを完全に推測できないため、実際のAPI仕様書と照合してください。
TypeScriptのinterface/typeはコンパイル時の型チェック用です。実行時にAPIレスポンスを検証したい場合は、JSON Schema、Zod、Ajvなどのバリデーションも組み合わせてください。