JSON to TypeScript
JSONデータをTypeScriptインターフェースまたは型定義に自動変換
JSON入力
行数: 1 | 文字: 0
TypeScript出力
// JSON入力後、TypeScript型定義が自動生成型: 0 | 行数: 1
JSON to TypeScriptとは?
JSON to TypeScriptは、JSONデータをTypeScript型定義に自動変換するツールです。JSON構造を分析し、対応するinterfaceまたはtype宣言を生成し、TypeScriptプロジェクトでタイプセーフとコードヒントを提供します。
使用方法
- 左側入力ボックスにJSONデータを貼り付け、またはサンプルボタンでサンプルをロード
- オプション設定:ルート型名を設定、interface/typeスタイルを選択、export追加の有無など
- 右側に対応するTypeScript型定義が自動生成
- 「コピー」ボタンで生成された型定義をクリップボードにコピー
- 型定義をTypeScriptプロジェクトに貼り付けて使用
使用例
単純オブジェクト変換
输入 JSON:
{
"name": "张三",
"age": 28,
"isActive": true
}
输出 TypeScript:
export interface Root {
name: string;
age: number;
isActive: boolean;
}ネストオブジェクト変換
输入 JSON:
{
"user": {
"id": 1,
"profile": {
"avatar": "url",
"bio": "简介"
}
}
}
输出 TypeScript:
export interface UserProfile {
avatar: string;
bio: string;
}
export interface User {
id: number;
profile: UserProfile;
}
export interface Root {
user: User;
}よくある質問 (FAQ)
Q: 生成された型はどう使いますか?
A: 生成された型定義を.tsファイルにコピーし、コードで使用します。例:const data: Root = JSON.parse(response)
Q: interfaceとtypeの違いは?
A: interfaceは拡張・実装可能、オブジェクト型定義に適しています;typeはより柔軟で、ユニオン型、交差型などを定義できます。単純なオブジェクト構造では両者は機能的に似ています。
Q: 配列型のJSONはどう処理しますか?
A: ツールは配列要素型を自動識別します。オブジェクト配列の場合、配列要素用に別の型定義を生成し、ItemType[]で配列を表現します。
Q: 生成された型は編集可能ですか?
A: 生成後は自由に編集可能。実際のニーズに応じて型名を調整、オプションフィールドマーク(?)を追加、または一部フィールドの型定義を変更することを推奨します。