Programmation asynchrone en TypeScript : guide complet pratique

Programmation asynchrone en TypeScript : guide complet pratique

Le développement web moderne est impensable sans opérations asynchrones : requêtes API, travail avec des bases de données, lecture de fichiers et minuteries. TypeScript, en tant que surcouche de JavaScript, non seulement conserve toutes les possibilités de la programmation asynchrone, mais ajoute également un typage strict, rendant le code plus prévisible et plus sûr. Dans ce guide, nous aborderons les concepts clés de l'asynchronisme en TypeScript — des Promises de base aux modèles avancés — avec des exemples de code réels.

1. Bases : Promise et typage

Une Promise est un objet représentant le résultat d'une opération asynchrone, qui peut être terminée avec succès (fulfilled) ou rejetée (rejected). TypeScript permet de typer strictement la valeur que la Promise retournera.

// Exemple de Promise typéefunction fetchUserData(userId: number): Promise<{ name: string; email: string }> {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (userId > 0) {        resolve({ name: 'Ivan Ivanov', email: 'ivan@example.com' });      } else {        reject(new Error('ID utilisateur invalide'));      }    }, 1000);  });}

// UtilisationfetchUserData(1)  .then(user => console.log(user.name)) // Ivan Ivanov  .catch(error => console.error(error.message));

Remarquez : Promise<{ name: string; email: string }> garantit que dans then nous obtiendrons un objet avec exactement ces champs. Cela évite les erreurs liées aux propriétés indéfinies.

2. Async/Await : sucre syntaxique avec TypeScript

Les mots-clés async et await rendent le code asynchrone similaire au code synchrone, sans perte de performance. TypeScript détermine automatiquement le type de retour d'une fonction async comme Promise<T>.

// La fonction retourne Promise<number>async function getDiscountPrice(price: number, discountPercent: number): Promise<number> {  if (discountPercent < 0 || discountPercent > 100) {    throw new Error('Pourcentage de réduction invalide');  }  // Simulation d'un calcul asynchrone  const discount = await calculateDiscountAsync(price, discountPercent);  return price - discount;}

// Fonction auxiliairefunction calculateDiscountAsync(price: number, percent: number): Promise<number> {  return Promise.resolve(price * percent / 100);}

// Utilisationasync function main() {  try {    const finalPrice = await getDiscountPrice(1000, 20);    console.log(`Prix final : ${finalPrice}`); // 800  } catch (error) {    if (error instanceof Error) {      console.error('Erreur :', error.message);    }  }}main();

Important : TypeScript ne permet pas d'utiliser await en dehors d'une fonction async (sauf au niveau supérieur dans les modules avec certains paramètres). Enveloppez toujours les appels dans une fonction async ou utilisez .then().

3. Gestion des erreurs et modèles avancés

Une gestion correcte des erreurs est la base d'un code asynchrone fiable. TypeScript aide à détecter les erreurs lors de la compilation, mais la logique de gestion doit être écrite manuellement.

3.1. Gestion des erreurs dans async/await

async function safeFetchData(url: string): Promise<unknown> {  try {    const response = await fetch(url);    if (!response.ok) {      throw new Error(`Erreur HTTP ! Statut : ${response.status}`);    }    return await response.json();  } catch (error) {    // TypeScript réduit le type à Error    if (error instanceof Error) {      console.error('Erreur de requête :', error.message);      // On peut retourner une valeur par défaut ou propager l'erreur plus loin      return null;    }    throw error; // Erreur inconnue