Nello sviluppo web moderno, la programmazione asincrona è essenziale per creare applicazioni reattive ed efficienti. Consente l’esecuzione simultanea di più attività senza congelare il thread principale, migliorando l’esperienza dell’utente. TypeScript, basato sulle fondamenta di JavaScript, fornisce la sicurezza dei tipi e strumenti aggiuntivi per semplificare la gestione del codice asincrono. Questa guida esplora come gestire il codice asincrono in TypeScript utilizzando Promises e async/await, insieme a suggerimenti pratici per gli sviluppatori aziendali.

Cos’è la programmazione asincrona?

La programmazione asincrona garantisce che le operazioni ad alta intensità di tempo, come le chiamate API o la lettura di file, non blocchino l’esecuzione del resto dell’applicazione. Questo approccio è fondamentale nelle applicazioni web, dove il mantenimento della reattività ha un impatto diretto sulla soddisfazione degli utenti. TypeScript offre modi strutturati per gestire efficacemente tali operazioni.

Promesse in TypeScript

Cosa sono le promesse?

Una promessa rappresenta l’eventuale successo o fallimento di un’attività asincrona. Offre un’alternativa più elegante alle funzioni di callback, consentendo un codice più pulito e gestibile.

Come creare una promessa

La creazione di una Promise comporta l’istanziazione di un nuovo oggetto Promise e la definizione del suo comportamento tramite le funzioni resolve(success) e reject(failure).

const fetchData = (url: string): Promise<any> => {
	return new Promise((resolve, reject) => {
		fetch(url)
			.then(response => {
				if (!response.ok) {
					reject(new Error('Network response was not ok'));
				}
				return response.json();
			})
			.then(data => resolve(data))
			.catch(error => reject(error));
	});
};	 

In questo esempio, la funzione fetchData recupera i dati da un URL. Si risolve con i dati o si rifiuta con un errore se qualcosa va storto.

Async/Await: semplificare il codice asincrono

Perché usare Async/Await?

Introdotto in ES2017, async/await semplifica il lavoro con le Promesse, rendendo il codice asincrono più simile a quello sincrono. Questo migliora la leggibilità e riduce la probabilità di bug.

Scrivere una funzione asincrona 

Per definire una funzione asincrona in TypeScript, si usa la parola chiave async. Le funzioni asincrone restituiscono sempre una Promessa, anche se non viene specificata esplicitamente.

const fetchData = async (url: string): Promise<User> => {
	const response = await fetch(url);
	if (!response.ok) {
		throw new Error('Failed to fetch the data');
	}
	return await response.json();
};	 

In questo caso, await mette in pausa l’esecuzione fino alla risoluzione della Promessa di recupero, rendendo il codice più intuitivo rispetto al concatenamento delle chiamate .then().

Gestire gli errori con Async/Await 

La gestione degli errori è semplice con async/await. Si possono usare i blocchi try/catch per gestire gli errori durante l’esecuzione:

const displayUser = async (userId: number) => {
	try {
		const user = await fetchUserData(userId);
		console.log(`User: ${user.name}`);
	} catch (error) {
		console.error('Error fetching user:', error);
	}
};	  

Questo approccio garantisce che qualsiasi errore durante la chiamata a fetchUserData venga catturato e registrato, consentendo all’applicazione di riprendersi senza problemi.

Migliori pratiche per la programmazione asincrona in TypeScript

1. Usare Try/Catch in modo coerente 

Avvolgere tutte le chiamate await in blocchi try/catch per gestire efficacemente i potenziali errori di runtime.

2. Ottimizzare le operazioni concorrenti

Evitare di attendere sequenzialmente le operazioni all’interno dei cicli. Usare Promise.all per eseguire le operazioni in modo concorrente per ottenere prestazioni migliori.

const fetchMultipleUsers = async (userIds: number[]) => {
	const userPromises = userIds.map(id => fetchUserData(id));
	const users = await Promise.all(userPromises);
	return users;
};	   

3. Sfruttare le annotazioni dei tipi

Annotate sempre i tipi di ritorno delle funzioni asincrone per garantire la chiarezza e prevenire gli errori di runtime. Le annotazioni esplicite sui tipi aiutano a comunicare il flusso di dati previsto, facilitando la comprensione del codice da parte degli altri sviluppatori. Inoltre, consentono di utilizzare le potenti funzioni di analisi statica di TypeScript, per individuare potenziali bug prima del runtime. Per i progetti su scala aziendale, questa pratica è preziosa per mantenere la qualità del codice coerente tra i vari team.

4. Mantenere le funzioni focalizzate

La suddivisione di funzioni di grandi dimensioni in funzioni più piccole e con un unico scopo rende la base di codice più facile da navigare e da debuggare. Le funzioni focalizzate sono più semplici da testare, il che porta a test unitari più affidabili e a una più rapida risoluzione dei problemi. Inoltre, questo approccio modulare favorisce la riusabilità, consentendo ai team di riutilizzare funzioni ben definite in più parti dell’applicazione. Ciò è particolarmente vantaggioso in ambienti aziendali di grandi dimensioni, dove la manutenibilità è una priorità assoluta.

Conclusione

Padroneggiando Promises e async/await, gli sviluppatori TypeScript possono gestire con facilità complessi flussi di lavoro asincroni. Queste tecniche consentono di scrivere codice più pulito e manutenibile, migliorando al contempo la reattività delle applicazioni, un fattore critico per le applicazioni di livello enterprise.

Iniziate ad adottare queste best practice nei vostri progetti per creare applicazioni robuste, scalabili ed efficienti.