Client HTTP en TypeScript : faire des requêtes correctement : de A à Z

Client HTTP en TypeScript : faire des requêtes correctement

TypeScript est une extension fortement typée de JavaScript qui apporte fiabilité et lisibilité au développement web. Lorsque vous travaillez avec des API externes ou un backend, la capacité à effectuer correctement des requêtes HTTP devient une compétence clé. Dans cet article, nous allons voir comment créer un client HTTP complet en TypeScript, depuis les principes de base jusqu'aux modèles avancés de gestion des erreurs et de typage.

Pourquoi TypeScript est-il idéal pour les clients HTTP ?

JavaScript propose plusieurs façons d'effectuer des requêtes HTTP : le fetch intégré, les bibliothèques axios et node-fetch. Cependant, TypeScript permet d'amener leur utilisation à un nouveau niveau grâce au typage statique. Vous pouvez décrire à l'avance la structure de la requête et de la réponse, ce qui élimine de nombreuses erreurs dès la phase de compilation. Imaginez que vous travaillez avec une API qui renvoie une liste d'utilisateurs. Sans types, vous risquez d'accéder à un champ inexistant, et l'erreur n'apparaîtra qu'à l'exécution. TypeScript résout ce problème.

Partie principale : créer un client HTTP à partir de zéro

1. Requête GET de base avec fetch et typage

Commençons par le plus simple : une requête GET. En TypeScript, nous pouvons définir une interface pour la réponse et la passer à la fonction générique fetch. Voici un exemple :

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);    if (!response.ok) {    throw new Error(`HTTP error! status: ${response.status}`);  }    const data: User = await response.json();  return data;}

// UtilisationgetUser(1)  .then(user => console.log(user.name))  .catch(error => console.error('Erreur :', error.message));

Ici, nous indiquons explicitement que la fonction renvoie Promise<User>. Si l'API change, le compilateur TypeScript vous avertira d'une incompatibilité de types. Notez la vérification de response.ok — c'est une étape obligatoire pour gérer les erreurs HTTP (404, 500, etc.).

2. Requête POST avec corps et en-têtes

L'envoi de données au serveur nécessite la configuration des en-têtes et la sérialisation du corps de la requête. Créons une fonction pour créer un nouvel utilisateur :

interface CreateUserRequest {  name: string;  email: string;}

interface CreateUserResponse {  id: number;  name: string;  email: string;}

async function createUser(userData: CreateUserRequest): Promise<CreateUserResponse> {  const response = await fetch('https://jsonplaceholder.typicode.com/users', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify(userData),  });

  if (!response.ok) {    const errorBody = await response.text();    throw new Error(`Erreur de création : ${response.status} - ${errorBody}`);  }

  return await response.json();}

// Exemple d'appelconst newUser: CreateUserRequest = { name: 'Ivan', email: 'ivan@example.com' };createUser(newUser).then(result => console.log('ID créé :', result.id));

Le typage de CreateUserRequest et CreateUserResponse rend le code auto-documenté. Les autres développeurs voient immédiatement quels champs sont obligatoires pour l'envoi et à quoi s'attendre dans la réponse.

3. Client HTTP universel avec gestion des erreurs

Dans les projets réels, on se contente rarement d'une seule fonction. Il est préférable de créer une classe universelle ou un ensemble de fonctions qui centralise la logique des requêtes. Voici un exemple de client avancé :

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface RequestConfig {  method: HttpMethod;  endpoint: string;  body?: unknown;  params?: Record<string, string>;}

class HttpClient {  private baseUrl: string;\