Programmation asynchrone en TypeScript : guide complet

Introduction à la programmation asynchrone en TypeScript

Le développement web moderne est impensable sans la programmation asynchrone. Qu'il s'agisse de requêtes API, de travail avec le système de fichiers ou de temporisateurs, toutes ces opérations nécessitent une exécution de code non bloquante. TypeScript, en tant que surcouche de JavaScript, fournit des outils puissants pour travailler avec l'asynchronisme, en ajoutant un typage strict et une lisibilité améliorée du code.

Dans ce guide, nous allons détailler tous les aspects de la programmation asynchrone en TypeScript : des bases des Promise aux motifs avancés avec async/await et l'exécution parallèle des tâches.

1. Bases des Promise en TypeScript

Qu'est-ce qu'une Promise ?

Une Promise (promesse) est un objet représentant le résultat d'une opération asynchrone. Elle peut se trouver dans l'un des trois états suivants :

• Pending (en attente) — état initial, l'opération n'est pas encore terminée.
• Fulfilled (tenue) — l'opération s'est terminée avec succès.
• Rejected (rejetée) — l'opération s'est terminée par une erreur.

Création d'une Promise avec typage

TypeScript permet de typer strictement les valeurs de retour des Promise. Regardons un exemple :

// Fonction retournant une Promise avec un type de données
function fetchUserData(userId: number): Promise<User> {
    return new Promise<User>((resolve, reject) => {
        setTimeout(() => {
            const user: User = {
                id: userId,
                name: 'Иван Иванов',
                email: 'ivan@example.com'
            };
            
            if (userId > 0) {
                resolve(user);
            } else {
                reject(new Error('Некорректный ID пользователя'));
            }
        }, 1000);
    });
}

// Interface pour le typage des données
interface User {
    id: number;
    name: string;
    email: string;
}

// Utilisation de la Promise
fetchUserData(1)
    .then((user: User) => {
        console.log(`Пользователь: ${user.name}`);
    })
    .catch((error: Error) => {
        console.error(`Ошибка: ${error.message}`);
    });

Chaînage de Promise (Chaining)

Les Promise peuvent être chaînées pour une exécution séquentielle d'opérations asynchrones :

function getUserPosts(userId: number): Promise<string[]> {
    return new Promise((resolve) => {
        setTimeout(() => resolve(['Пост 1', 'Пост 2', 'Пост 3']), 500);
    });
}

function getPostComments(postTitle: string): Promise<string[]> {
    return new Promise((resolve) => {
        setTimeout(() => resolve(['Комментарий 1', 'Комментарий 2']), 300);
    });
}

// Chaînage de Promise
fetchUserData(1)
    .then((user) => {
        console.log(`Пользователь найден: ${user.name}`);
        return getUserPosts(user.id);
    })
    .then((posts) => {
        console.log(`Постов найдено: ${posts.length}`);
        return getPostComments(posts[0]);
    })
    .then((comments) => {
        console.log(`Комментариев к первому посту: ${comments.length}`);
    })
    .catch((error) => {
        console.error('Произошла ошибка:', error);
    });

2. Async/Await — une approche moderne

Syntaxe async/await

Les mots-clés async et await rendent le code asynchrone similaire au code synchrone, ce qui améliore considérablement sa lisibilité. Une fonction marquée async retourne toujours une Promise.

// Fonction asynchrone avec typage de la valeur de retour
async function loadUserProfile(userId: number): Promise<UserProfile> {
    try {
        const user = await fetchUserData(userId);
        const posts = await getUserPosts(userId);
        
        return {
            user,
            posts,
            lastLogin: new Date()
        };