JSONからTypeScriptコンバーター
JSONからTypeScriptインターフェースを自動生成
JSON入力
TypeScript出力
JSONからTypeScriptへの変換とは？
JSONペイロードを貼り付けると、TypeScriptインターフェースが生成されます。インターフェースは、オブジェクトが持つプロパティとその型を厳密に記述する型付きコントラクトです。インターフェースがなければ、JSON.parse()から返されるデータはanyとして扱われ、プロパティアクセスや代入に対してエディタの補助もコンパイラチェックも得られません。JSONからTypeScriptに変換することで、インターフェースを手書きすることなくその安全性を手に入れられます。
TypeScriptはJSONの6つの値型すべてに対応しています：string、number、boolean、null、object、arrayです。ネストされたJSONオブジェクトはそれぞれ独自の名前付きインターフェースになります。配列の型は最初の要素から推論されます。生成されたインターフェースはJSON.parse()が実際に返す値と一致するため、推測ではなく実データを反映した型定義が得られます。
大規模または深くネストされたJSONのインターフェースを手書きすることは手間がかかり、ミスが起きやすい作業です。JSONからTypeScriptへの生成ツールは構造を自動的に読み取り、ネストを再帰的に処理し、数秒でクリーンなインターフェースコードを出力します。これは未知のAPIを組み込む際、モックデータでプロトタイプを作成する際、またはJavaScriptのコードベースをTypeScriptへ移行する際に特に役立ちます。ネストされたプロパティ名や型を手動で管理する必要がなくなるため、型のボイラープレートではなくアプリケーションロジックに集中できます。
JSONからTypeScriptへの生成ツールを使う理由
TypeScriptインターフェースの手書きは小さなオブジェクトなら現実的ですが、ネストされた構造や大規模なAPIレスポンスが相手になるとすぐに破綻します。3階層のネストを持つ50フィールドのAPIレスポンスを手書きすると、数十ものインターフェースが生まれ、それぞれがタイポやnullableフィールドの見落としを招く可能性があります。自動生成ツールは完全なインターフェースセットをミリ秒で出力し、コードとデータの間の型不一致を大幅に減らします。精度面に加え、実際のAPIコントラクトと型定義の同期も保たれます。サービスがレスポンスの形状を変えた場合は、更新後のJSONを貼り付けて再生成するだけです。手書きのインターフェースファイル全体を見直すよりはるかに速い作業です。
JSONからTypeScriptへの変換ユースケース
JSONからTypeScriptへの型マッピング早見表
JSONの各値はTypeScriptの型に対応します。下表は各JSONプリミティブと構造型がどのように変換されるかを示しています。このマッピングはECMA-404 JSON標準とTypeScriptの組み込み型に基づいています。
| JSON型 | 値の例 | TypeScript型 |
|---|---|---|
| string | "hello" | string |
| number | 42, 3.14 | number |
| boolean | true, false | boolean |
| null | null | null |
| object | {"key": "value"} | nested interface |
| array | [1, 2, 3] | number[] (inferred from first element) |
TypeScriptのinterfaceとtype エイリアスの違い
TypeScriptにはオブジェクトの形状を記述する方法が2つあります：interface宣言とtypeエイリアスです。どちらもJSON構造の表現に使えますが、拡張方法と宣言マージの挙動が異なります。JSONからTypeScriptへの生成ツールの多くがinterfaceを出力するのは、TypeScriptにおけるオブジェクト形状の慣用的な記述方法だからです。
コード例
以下は各言語・ツールでJSONからTypeScriptインターフェースを生成するコード例です。各スニペットは実行可能な出力を生成します。
// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);
interface User {
id: number;
name: string;
active: boolean;
}
const user: User = parsed;
console.log(user.name); // "Alice" — fully typedimport JsonToTS from 'json-to-ts';
const json = {
id: 1,
name: "Alice",
address: { street: "123 Main St", city: "Springfield" },
tags: ["admin", "user"]
};
const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
// street: string;
// city: string;
// }
//
// interface User {
// id: number;
// name: string;
// address: Address;
// tags: string[];
// }# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models
# Command line:
# datamodel-codegen --input data.json --output model.py
# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts
import json
data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}
# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List
class User(TypedDict):
id: int
name: str
scores: List[int]
user: User = data # type-checked by mypy# Install quicktype globally
npm install -g quicktype
# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts
# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts
# Output:
# export interface Root {
# id: number;
# name: string;
# }