Convertisseur JSON vers TypeScript Interface en ligne

Pourquoi typer les APIs avec TypeScript

Pour qui : Développeurs Angular, architectes frontend, équipes TypeScript, ingénieurs d'APIs.

Lorsque vous intégrez une API REST externe dans Angular, la réponse JSON arrive sans typage. TypeScript la traite comme any, ce qui annule tous les avantages du typage statique. Les conséquences :

• ❌ Pas d'autocomplétion — L'IDE ne propose pas les propriétés disponibles
• ❌ Erreurs à runtime — Les fautes de frappe ne sont détectées qu'en production
• ❌ Refactoring dangereux — Impossible de savoir quels endroits du code utilisent telle propriété
• ❌ Perte de maintenabilité — Après 6 mois, on ne sait plus quelle structure attendait l'API

Solution : Créer une interface TypeScript pour chaque réponse API. Ce convertisseur génère automatiquement ces interfaces à partir d'un exemple JSON.

Comment utiliser ce convertisseur

1. Récupérer un exemple JSON — Depuis Postman, navigateur DevTools, ou documentation d'API
2. Coller dans la zone "JSON" — Le convertisseur valide en temps réel
3. Configurer les options :
   • Nom de l'interface : Par défaut "Root", changez selon vos besoins (ex: "UserResponse")
   • Utiliser type : Cochez pour générer type au lieu de interface
   • Avec export : Génère export interface (recommandé)
   • readonly : Rend toutes les propriétés en lecture seule
   • Interfaces imbriquées : Crée une interface par niveau d'imbrication
4. Cliquer "Convertir" — Génère les interfaces TypeScript
5. Copier le résultat — Utilisez directement dans votre projet

Exemple :

// 1. JSON d'entrée (réponse API)
{
  "id": 123,
  "username": "alice_dev",
  "email": "alice@company.com",
  "profile": {
    "firstName": "Alice",
    "lastName": "Dev",
    "bio": "Full-stack developer"
  },
  "roles": ["user", "admin"]
}

// 2. Interfaces générées
export interface Profile {
  firstName: string;
  lastName: string;
  bio: string;
}

export interface Root {
  id: number;
  username: string;
  email: string;
  profile: Profile;
  roles: string[];
}

Algorithme et règles de conversion

Le convertisseur analyse chaque valeur JSON et détermine automatiquement le type TypeScript correspondant :

Intégration Angular — Exemple réel

Voici comment utiliser les interfaces générées dans un projet Angular moderne :

Étape 1 : Créer le fichier modèle

// src/app/models/user.model.ts
export interface User {
  id: number;
  username: string;
  email: string;
  profile: UserProfile;
  roles: string[];
}

export interface UserProfile {
  firstName: string;
  lastName: string;
  bio: string;
}

Étape 2 : Intégrer dans le service

// src/app/services/user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from '../models/user.model';

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }

  getAllUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }
}

Étape 3 : Utiliser dans le composant

// src/app/components/user-profile.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { User } from '../models/user.model';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html'
})
export class UserProfileComponent implements OnInit {
  user: User | null = null;
  loading = true;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.userService.getUser(123).subscribe({
      next: (data: User) => {
        this.user = data;  // ✅ TypeScript vérifie la structure
        console.log(this.user.profile.firstName); // Autocomplétion fonctionne !
        this.loading = false;
      },
      error: (err) => {
        console.error('Erreur API:', err);
        this.loading = false;
      }
    });
  }
}

Avantages et bonnes pratiques

✅ Avantages du typage d'API :

• Autocomplétion IDE — IntelliSense propose automatiquement toutes les propriétés disponibles
• Détection d'erreurs — Les fautes de frappe sont détectées à la compilation, pas en production
• Refactoring sûr — Renommer une propriété met à jour automatiquement tous les usages
• Documentation auto-générée — Les types servent de documentation du contrat d'API
• Performance — TypeScript optimise le code généré sans données inutiles

📋 Bonnes pratiques :

1. Nommer explicitement vos interfaces — Au lieu de "Root", utilisez "UserResponse", "ProductList", etc.
2. Une interface par fichier (pour les grands modèles) — Meilleure organisation et réutilisabilité
3. Utiliser `readonly` pour les données immuables — Empêche les modifications accidentelles
4. Ajouter des commentaires TypeScript — Documentez les propriétés non évidentes :

   export interface User {
     /** Identifiant unique en base de données */
     id: number;
   
     /** Email valide (format RFC 5322) */
     email: string;
   }

5. Valider les données runtime — Même typées, les données peuvent être invalides (utiliser des validateurs comme Zod ou class-validator)