JSON to TypeScript Generator
JSONデータをTypeScriptインターフェースに自動変換するツールです。APIレスポンス、設定ファイルなどのJSONを型安全に使用できます。
JSON Input
TypeScript Output
TypeScript interface will appear here...主な機能
- JSON自動パースとインターフェース生成
- ネストされたオブジェクトサポート
- 配列型自動検出
- Optional プロパティサポート
- インターフェース名カスタマイズ
- 5つのサンプルテンプレート
使用方法
1. 基本的な使用
{
"name": "John",
"age": 30
}
↓
interface Root {
name: string;
age: number;
}
2. ネストされたオブジェクト
{
"user": {
"profile": {
"name": "John"
}
}
}
↓
interface Root {
user: User;
}
interface User {
profile: Profile;
}
interface Profile {
name: string;
}
3. 配列
{
"users": [
{"id": 1, "name": "John"}
]
}
↓
interface Root {
users: User[];
}
interface User {
id: number;
name: string;
}
活用例
APIレスポンス型の生成
// APIから受け取ったJSONレスポンスを貼り付けると
// 即座にTypeScriptインタ ーフェースを生成
fetch('/api/users')
.then(res => res.json())
.then((data: UserResponse) => {
// 型安全に使用
})
設定ファイルの型
// config.jsonの構造をインターフェースに変換
interface Config {
apiUrl: string;
timeout: number;
features: Feature[];
}
ヒント
- Optional プロパティ: 一部のフィールドが選択的な場合、「Use Optional Properties」をチェック
- インターフェース名: 用途に合わせて名前を変更（例：UserResponse、ConfigData）
- 複雑なJSON: サンプルテンプレートから始めて修正