Client HTTP en TypeScript : faire des requêtes correctement

Client HTTP en TypeScript : faire des requêtes correctement

Dans le développement web moderne, travailler avec des requêtes HTTP est l'une des tâches clés. TypeScript, en tant que surcouche fortement typée de JavaScript, offre aux développeurs des outils puissants pour créer des clients HTTP fiables et prévisibles. Dans cet article, nous allons voir comment organiser correctement un client HTTP en TypeScript pour que votre code soit sûr, lisible et facile à maintenir.

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

TypeScript ajoute un typage statique, ce qui est particulièrement important lorsqu'on travaille avec des API externes. Vous savez exactement quelles données proviendront du serveur et pouvez éviter de nombreuses erreurs dès la phase de compilation. Examinons un exemple de base :

// Mauvais : JavaScript sans typesconst data = await fetch('/api/users');const users = await data.json();// Nous ne connaissons pas la structure de users

// Bon : TypeScript avec typesinterface User {  id: number;  name: string;  email: string;}

const response = await fetch('/api/users');const users: User[] = await response.json();// Maintenant users a une structure claire

Création d'un client HTTP de base en TypeScript

Commençons par créer un client HTTP universel qui gérera tous les types de requêtes. Utilisons l'API native fetch, disponible dans les navigateurs modernes et Node.js 18+.

Implémentation de base avec typage

interface HttpClientConfig {  baseURL: string;  headers?: Record<string, string>;  timeout?: number;}

interface ApiResponse<T> {  data: T;  status: number;  ok: boolean;}

class HttpClient {  private baseURL: string;  private headers: Record<string, string>;  private timeout: number;

  constructor(config: HttpClientConfig) {    this.baseURL = config.baseURL;    this.headers = {      'Content-Type': 'application/json',      ...config.headers,    };    this.timeout = config.timeout || 10000;  }

  private async request<T>(    endpoint: string,    options: RequestInit = {}  ): Promise<ApiResponse<T>> {    const url = `${this.baseURL}${endpoint}`;    const controller = new AbortController();    const timeoutId = setTimeout(() => controller.abort(), this.timeout);

    try {      const response = await fetch(url, {        ...options,        headers: { ...this.headers, ...options.headers },        signal: controller.signal,      });

      clearTimeout(timeoutId);

      const data: T = await response.json();

      return {        data,        status: response.status,        ok: response.ok,      };    } catch (error) {      clearTimeout(timeoutId);      throw this.handleError(error);    }  }

  private handleError(error: unknown): Error {    if (error instanceof DOMException && error.name === 'AbortError') {      return new Error('Request timeout');    }    if (error instanceof TypeError) {      return new Error('Network error');    }    return error as Error;  }

  async get<T>(endpoint: string): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, { method: 'GET' });  }

  async post<T>(endpoint: string, body: unknown): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, {      method: 'POST',      body: JSON.stringify(body),    });  }

  async put<T>(endpoint: string, body: unknown): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, {      method: 'PUT',      body: JSON.stringify(body),    });  }

  async delete<T>(endpoint: string): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, { method: 'DELETE' });  }}

Utilisation du client

// Création d'une instance du clientconst api = new HttpClient({  baseURL: 'https://api.