シンプルなJSONオブジェクトをTypeScript interfaceに変換する

フラットなJSONオブジェクトをTypeScript interfaceに変換する方法を学びます。string、number、boolean、null型の対応関係を解説。

Basic Conversions

詳細な説明

JSONからTypeScript Interfaceへ

最も一般的な変換は、シンプルでフラットなJSONオブジェクトをTypeScriptのinterfaceに変換することです。JSONの各キーがプロパティになり、値の型が自動的に推論されます。

JSON例

{
  "id": 42,
  "name": "Alice",
  "email": "alice@example.com",
  "isActive": true,
  "score": 98.5
}

生成されるTypeScript

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
}

マッピングの仕組み

TypeScriptはJSONのプリミティブ型と直接対応しています:

JSON型 TypeScript型
string string
number number
boolean boolean
null null

JSONは整数と浮動小数点数を区別しないため、TypeScriptでも両方ともnumber型にマッピングされます。整数のみを強制する必要がある場合は、ランタイムバリデーションやブランド型を使用できます。

ベストプラクティス

  • interface名にはPascalCaseを使用します(例:UserProductDetail)。
  • ユニオン型やインターセクション型が不要な場合は、typeエイリアスよりもinterfaceを優先します。interfaceは宣言マージをサポートし、拡張が可能です。
  • プロパティ名はcamelCaseでJavaScriptの慣習に合わせます。JSONがsnake_caseを使用している場合、コンバーターは元のキーを保持しますが、マッピング層で変換することを検討してください。

シンプルなフラットオブジェクトが基礎です。これを理解すれば、ネストされたオブジェクト、配列、オプショナルプロパティへの応用は自然にできるようになります。

ユースケース

REST APIからJSONペイロードを受け取り、IDEでオートコンプリートが効き、コンパイル時にタイプミスを検出できる型安全なinterfaceを作成したい場合に使用します。

試してみる — JSON to TypeScript

フルツールを開く