Programmation asynchrone en TypeScript : guide complet

Introduction à la programmation asynchrone en TypeScript

La programmation asynchrone est une approche d'écriture de code où les opérations qui prennent du temps (par exemple, les requêtes serveur, la lecture de fichiers, les minuteries) ne bloquent pas l'exécution du thread principal du programme. Dans le développement web moderne, l'asynchronisme n'est pas seulement une commodité, mais une nécessité. JavaScript et TypeScript, étant des langages monothreads, utilisent la boucle d'événements (Event Loop) pour traiter les opérations asynchrones.

TypeScript ajoute à ce puissant paradigme le typage statique, rendant le code plus prévisible et plus sûr. Dans ce guide, nous aborderons tous les aspects de la programmation asynchrone : des callbacks classiques aux async/await modernes avec un typage complet.

Fondamentaux de l'asynchronisme : des callbacks aux promesses

Le problème des callbacks et « l'enfer des callbacks »

À l'origine, l'asynchronisme en JavaScript était implémenté via des callbacks (fonctions de rappel). Cependant, cette approche conduisait rapidement à un code illisible :

function loadData(callback: (data: string) => void) {    setTimeout(() => {        callback("Données chargées");    }, 1000);}

loadData((data) => {    console.log(data);    // Appel imbriqué    loadData((data2) => {        console.log(data2);    });});

Un tel code est difficile à déboguer et à maintenir. TypeScript ne résout pas le problème d'imbrication, mais aide à typer les paramètres des callbacks.

Les promesses (Promise) — le salut de l'enfer

Une promesse est un objet qui peut se trouver dans l'un des trois états : pending (en attente), fulfilled (résolue avec succès) ou rejected (rejetée avec une erreur). TypeScript permet de typer strictement le type de données que la promesse retournera :

function fetchUser(id: number): Promise<User> {    return new Promise((resolve, reject) => {        setTimeout(() => {            if (id > 0) {                resolve({ id, name: "Ivan Petrov" });            } else {                reject(new Error("ID incorrect"));            }        }, 500);    });}

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

// UtilisationfetchUser(1).then(user => {    console.log(user.name); // TypeScript sait que user est de type User}).catch(error => {    console.error(error.message);});

Grâce au générique Promise<User>, le compilateur TypeScript garantit qu'à l'intérieur de .then(), nous recevrons un objet de ce type précis.

Async/Await : l'asynchronisme élégant

Syntaxe et typage

Les mots-clés async et await permettent d'écrire du code asynchrone qui ressemble à du code synchrone. Une fonction marquée async retourne toujours une promesse :

async function getGreeting(name: string): Promise<string> {    return `Bonjour, ${name}!`;}

// Le type de la valeur de retour est Promise<string>const result: Promise<string> = getGreeting("Monde");

Il est important de se rappeler : si une fonction async ne retourne pas une promesse, TypeScript l'enveloppe automatiquement dans une promesse.

Exemple avec une logique réelle

Considérons un scénario typique — récupérer des données depuis une API et les traiter :

interface Post {    userId: number;    id: number;    title: string;    body: string;}

async function fetchPosts(userId: number): Promise<Post[]> {    const response = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);    if (!response.ok) {        throw new Error(`Erreur HTTP : ${response.status}`);    }    const data: Post[] = await response.json();    return data;}

async function displayPosts() {    try {        const posts = await fetchPosts(1);        console.log(`Récupéré ${posts.length} articles :`);        posts.forEach(post => console.log(`- ${post.title}`));