JSON to TypeScript - インターフェース＆型生成 オンライン
JSONを貼り付けるだけでTypeScriptインターフェース、型、enumを即座に生成。APIレスポンスを型安全なコードに変換 — 100%ブラウザ処理。
よくある質問
JSON to TypeScriptコンバーターとは？
JSON to TypeScriptコンバーターは、JSONデータからTypeScriptのインターフェースまたは型エイリアスを自動生成するツールです。APIレスポンスや設定ファイルの型定義を手動で書く代わりに、サンプルJSONオブジェクトを貼り付けると、ネストされたオブジェクト、配列、null値を含むすべてのフィールドに対して正しいTypeScript型を推論します。
JSONからTypeScriptインターフェースを生成するには？
左側の入力フィールドにJSONデータを貼り付けるだけです。ツールが右側の出力パネルにTypeScriptインターフェースを即座に生成します。ルートインターフェース名の設定、'interface'と'type'構文の選択、'export'キーワードの切り替えなど、さまざまなオプションで出力をカスタマイズできます。
TypeScriptのinterfaceとtype aliasのどちらを使うべき？
どちらもオブジェクトの形状を定義するのに使えますが、違いがあります。インターフェースは'extends'で拡張でき、宣言マージが可能なため、一般的にオブジェクト定義に好まれます。型エイリアスはユニオン、インターセクション、プリミティブ型を表現できるためより汎用的です。
コンバーターはネストされたJSONオブジェクトをどう処理する？
ツールがネストされたオブジェクトを見つけると、それに対して別個の名前付きインターフェースを作成します。例えば、JSONに'address'サブオブジェクトを持つ'user'オブジェクトがある場合、'User'インターフェースと'Address'インターフェースの両方を生成します。
このツールを使う時、JSONデータは安全ですか？
はい、完全に安全です。このツールはクライアントサイドのJavaScriptを使用してブラウザ内ですべてを処理します。JSONデータはコンピュータから出ることはありません。サーバーへのアップロード、APIコール、データの保存は一切ありません。
ツールはJSONのnull値をどう処理する？
JSONフィールドにnull値がある場合、'field?: string | null'のようにnullとのユニオン型を生成します。プロパティは'?'修飾子でオプショナルとしてマークされます。
混合型を含む配列はどうなる？
JSON配列に異なる型の要素が含まれている場合、'(string | number)[]'のようなユニオン配列型を生成します。空の配列は'unknown[]'として型付けされます。
コード例
// JSON to TypeScript interface generator
function jsonToTypeScript(json, rootName = 'Root') {
const interfaces = [];
function inferType(value, name) {
if (value === null) return 'null';
if (Array.isArray(value)) {
if (value.length === 0) return 'unknown[]';
const types = [...new Set(value.map((item) => inferType(item, name + 'Item')))];
const typeStr = types.length > 1 ? `(${types.join(' | ')})` : types[0];
return `${typeStr}[]`;
}
if (typeof value === 'object') {
const interfaceName = toPascalCase(name);
const properties = Object.entries(value).map(([key, val]) => {
const type = inferType(val, key);
const optional = val === null ? '?' : '';
return ` ${key}${optional}: ${type};`;
});
interfaces.push(`interface ${interfaceName} {\n${properties.join('\n')}\n}`);
return interfaceName;
}
return typeof value;
}
function toPascalCase(str) {
return str.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase());
}
const parsed = JSON.parse(json);
inferType(parsed, rootName);
return interfaces.reverse().join('\n\n');
}
const json = '{"name": "Alice", "age": 30, "address": {"city": "NYC"}}';
console.log(jsonToTypeScript(json));