Come lavorare con TypeScript e Promises
TypeScript potenzia lo sviluppo di JavaScript aggiungendo tipi statici. Quando si lavora con codice asincrono, le promesse vengono utilizzate per gestire operazioni che si completano in futuro. TypeScript fornisce strumenti per gestire le promesse con sicurezza dei tipi e chiarezza. Questa guida esplora come lavorare con le promesse in TypeScript, dall'utilizzo di base agli scenari avanzati.
Comprendere le promesse
Una promise è un oggetto che rappresenta l'eventuale completamento o fallimento di un'operazione asincrona. Fornisce metodi per gestire il risultato o l'errore dell'operazione. In TypeScript, le promesse possono essere tipizzate per garantire che vengano risolte con il tipo di dati previsto.
Utilizzo di base delle promesse
Creare e usare le promesse in TypeScript è semplice. Ecco un esempio di promessa che si risolve con una stringa:
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);
});
In questo esempio, fetchData restituisce una promessa che si risolve con una stringa. Il metodo then gestisce il valore risolto, mentre catch gestisce gli eventuali errori.
Gestione delle promesse con Async/Await
TypeScript supporta la sintassi async/await, che fornisce un modo più leggibile per lavorare con le promesse. Ecco come usare async/await con le promesse:
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();
In questo esempio, la funzione fetchDataAsync è dichiarata come async, consentendole di usare la parola chiave await per attendere la risoluzione della promessa. Gli errori vengono intercettati usando un blocco try/catch.
Digitare promesse con generici
TypeScript consente di specificare il tipo di dati con cui una promessa risolve utilizzando i generici. Ciò garantisce che i tipi siano gestiti correttamente in tutto il codice. Ecco un esempio di promessa tipizzata:
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);
});
In questo esempio, fetchUser restituisce una promessa che si risolve con un oggetto User. Il tipo è specificato tramite generics, garantendo la sicurezza dei tipi.
Utilizzo delle promesse in TypeScript con chiamate API
Le promesse sono spesso utilizzate con le chiamate API per gestire il recupero dati asincrono. Il sistema di tipi di TypeScript aiuta a gestire le risposte dalle 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);
});
Questo esempio dimostra come usare fetch per effettuare una chiamata API e gestire la risposta usando promesse e async/await. La risposta è tipizzata come User, garantendo la sicurezza dei tipi.
Conclusione
Lavorare con le promesse in TypeScript fornisce una maggiore sicurezza dei tipi e chiarezza per le operazioni asincrone. Utilizzando il sistema di tipizzazione di TypeScript, la sintassi async/await e i generici, gli sviluppatori possono gestire le promesse in modo efficace e creare applicazioni più affidabili.