Comment travailler avec TypeScript et Promises

TypeScript améliore le développement JavaScript en ajoutant des types statiques. Lorsque vous travaillez avec du code asynchrone, les promesses sont utilisées pour gérer les opérations qui se terminent dans le futur. TypeScript fournit des outils pour gérer les promesses avec sécurité et clarté des types. Ce guide explique comment utiliser les promesses dans TypeScript, de l'utilisation de base aux scénarios avancés.

Comprendre les promesses

Une promise est un objet représentant l'achèvement ou l'échec éventuel d'une opération asynchrone. Il fournit des méthodes pour gérer le résultat ou l'erreur de l'opération. Dans TypeScript, les promesses peuvent être typées pour garantir qu'elles sont résolues avec le type de données attendu.

Utilisation de base des promesses

Créer et utiliser des promesses dans TypeScript est simple. Voici un exemple de promesse qui se résout avec une chaîne:

function fetchData(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // Outputs: Data fetched successfully!
}).catch((error) => {
  console.error("Error:", error);
});

Dans cet exemple, fetchData renvoie une promesse qui se résout avec une chaîne. La méthode then gère la valeur résolue, tandis que catch gère les éventuelles erreurs.

Gestion des promesses avec Async/Await

TypeScript prend en charge la syntaxe async/await, qui offre une manière plus lisible de travailler avec les promesses. Voici comment utiliser async/await avec les promesses:

async function fetchDataAsync(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Outputs: Data fetched successfully!
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

Dans cet exemple, la fonction fetchDataAsync est déclarée comme async, ce qui lui permet d'utiliser le mot-clé await pour attendre que la promesse soit résolue. Les erreurs sont détectées à l'aide d'un bloc try/catch.

Saisir des promesses avec des génériques

TypeScript permet de spécifier le type de données avec lesquelles une promesse résout en utilisant des génériques. Cela garantit que les types sont correctement gérés dans tout le code. Voici un exemple de promesse typée:

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

function fetchUser(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "John Doe" });
    }, 1000);
  });
}

fetchUser().then((user) => {
  console.log(user.id, user.name); // Outputs: 1 John Doe
}).catch((error) => {
  console.error("Error:", error);
});

Dans cet exemple, fetchUser renvoie une promesse qui se résout avec un objet User. Le type est spécifié à l'aide de génériques, ce qui garantit la sécurité du type.

Utilisation des promesses dans TypeScript avec les appels d'API

Les promesses sont souvent utilisées avec les appels d'API pour gérer la récupération asynchrone de données. Le système de types de TypeScript permet de gérer les réponses des API:

async function getUserData(userId: number): Promise {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error("Network response was not ok.");
  }
  const data: User = await response.json();
  return data;
}

getUserData(1).then((user) => {
  console.log(user);
}).catch((error) => {
  console.error("Error:", error);
});

Cet exemple montre comment utiliser fetch pour effectuer un appel d'API et gérer la réponse à l'aide de promesses et d'async/await. La réponse est typée comme User, ce qui garantit la sécurité du type.

Conclusion

L'utilisation de promesses dans TypeScript améliore la sécurité et la clarté des types d'opérations asynchrones. En utilisant le système de typage, la syntaxe async/await et les génériques de TypeScript, les développeurs peuvent gérer efficacement les promesses et créer des applications plus fiables.