Programmation asynchrone en TypeScript : guide complet

Programmation asynchrone en TypeScript : guide complet pour débutants

La programmation asynchrone est l'un des concepts clés du développement web moderne. Si vous commencez tout juste à apprendre TypeScript, comprendre comment travailler avec du code asynchrone vous ouvrira des possibilités pour créer des applications rapides et réactives. Dans ce guide, nous aborderons les bases de la programmation asynchrone en TypeScript : des simples callbacks aux async/await modernes, en mettant l'accent sur le typage strict offert par TypeScript.

Qu'est-ce que la programmation asynchrone et pourquoi en a-t-on besoin ?

En programmation synchrone, le code s'exécute séquentiellement : chaque opération suivante attend la fin de la précédente. Cela peut entraîner un "gel" de l'interface si, par exemple, vous devez charger des données depuis un serveur. La programmation asynchrone permet d'exécuter des opérations longues (requêtes API, lecture de fichiers, minuteries) en arrière-plan, sans bloquer le fil d'exécution principal. TypeScript, en tant que surcouche de JavaScript, prend entièrement en charge les modèles asynchrones et y ajoute un système de types puissant.

Promise : le fondement de l'asynchrone en TypeScript

Promise est un objet représentant le résultat d'une opération asynchrone, qui peut être dans l'un des trois états : pending (en attente), fulfilled (réussie) ou rejected (échouée avec une erreur). En TypeScript, nous pouvons spécifier le type de données que la promesse retournera, rendant le code plus prévisible.

Exemple de création d'une Promise avec typage :

// Fonction retournant une Promise de type string\nfunction fetchUserData(userId: number): Promise<string> {\n    return new Promise((resolve, reject) => {\n        setTimeout(() => {\n            if (userId > 0) {\n                resolve(`Données utilisateur avec ID ${userId}`);\n            } else {\n                reject(new Error("ID utilisateur invalide"));\n            }\n        }, 1000);\n    });\n}\n\n// Utilisation de la Promise\nfetchUserData(123)\n    .then((data: string) => {\n        console.log(data); // "Données utilisateur avec ID 123"\n    })\n    .catch((error: Error) => {\n        console.error(error.message);\n    });

Remarquez : nous avons explicitement indiqué que la promesse retourne string, et dans .then(), le paramètre data est également de type string. Cela permet d'éviter les erreurs dès la phase de compilation.

Chaînes de Promise et gestion des erreurs

Les promesses peuvent être chaînées, en transmettant le résultat d'une opération asynchrone à une autre. TypeScript déduira automatiquement les types à chaque étape.

Exemple de chaîne de Promise :

interface User {\n    id: number;\n    name: string;\n}\n\nfunction getUser(id: number): Promise<User> {\n    return new Promise((resolve) => {\n        setTimeout(() => resolve({ id, name: "Anna" }), 500);\n    });\n}\n\nfunction getPosts(userId: number): Promise<string[]> {\n    return new Promise((resolve) => {\n        setTimeout(() => resolve(["Post 1", "Post 2"]), 500);\n    });\n}\n\n// Chaîne d'appels\ngetUser(1)\n    .then((user: User) => {\n        console.log(`Utilisateur : ${user.name}`);\n        return getPosts(user.id); // Retourne une nouvelle Promise\n    })\n    .then((posts: string[]) => {\n        console.log(`Posts : ${posts.join(", ")}`);\n    })\n    .catch((error: Error) => {\n        console.error("Erreur :", error.message);\n    });

Si une erreur survient à n'importe quelle étape, l'exécution passe au .catch() le plus proche. Il s'agit d'une gestion centralisée des erreurs, l'un des principaux avantages des promesses par rapport aux callbacks.

Async/await : une syntaxe élégante pour l'asynchrone

La syntaxe async/await rend le code asynchrone similaire au code synchrone, ce qui facilite sa lecture