Cum să lucrați cu TypeScript și Promises

TypeScript îmbunătățește dezvoltarea JavaScript prin adăugarea de tipuri statice. Când lucrați cu cod asincron, promisiunile sunt folosite pentru a gestiona operațiunile care se finalizează în viitor. TypeScript oferă instrumente pentru a gestiona promisiunile cu siguranță și claritate. Acest ghid explorează cum să lucrați cu promisiuni în TypeScript, de la utilizarea de bază până la scenarii avansate.

Înțelegerea promisiunilor

Un promise este un obiect care reprezintă eventuala finalizare sau eșec a unei operații asincrone. Oferă metode pentru a gestiona rezultatul sau eroarea operației. În TypeScript, promisiunile pot fi tastate pentru a se asigura că se rezolvă cu tipul de date așteptat.

Utilizarea de bază a promisiunilor

Crearea și utilizarea promisiunilor în TypeScript este simplă. Iată un exemplu de promisiune care se rezolvă cu un șir:

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);
});

În acest exemplu, fetchData returnează o promisiune care se rezolvă cu un șir. Metoda then gestionează valoarea rezolvată, în timp ce catch se ocupă de orice eroare.

Gestionarea promisiunilor cu Async/Await

TypeScript acceptă sintaxa async/await, care oferă o modalitate mai lizibilă de a lucra cu promisiuni. Iată cum să utilizați async/wait cu promisiuni:

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();

În acest exemplu, funcția fetchDataAsync este declarată ca async, permițându-i să folosească cuvântul cheie wait pentru a aștepta rezolvarea promisiunii. Erorile sunt detectate folosind un bloc try/catch.

Tastarea promisiunilor cu generice

TypeScript permite specificarea tipului de date cu care se rezolvă o promisiune folosind generice. Acest lucru asigură că tipurile sunt gestionate corect în întregul cod. Iată un exemplu de promisiune scrisă:

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);
});

În acest exemplu, fetchUser returnează o promisiune care se rezolvă cu un obiect User. Tipul este specificat folosind generice, asigurând siguranța tipului.

Utilizarea Promises în TypeScript cu apeluri API

Promisiunile sunt adesea folosite cu apelurile API pentru a gestiona preluarea asincronă a datelor. Sistemul de tip TypeScript ajută la gestionarea răspunsurilor de la API-uri:

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);
});

Acest exemplu demonstrează cum să utilizați fetch pentru a efectua un apel API și a gestiona răspunsul folosind promises și async/wait. Răspunsul este scris ca Utilizator, asigurând siguranța tipului.

Concluzie

Lucrul cu promisiuni în TypeScript oferă siguranță și claritate sporite pentru operațiunile asincrone. Folosind sistemul de tastare TypeScript, sintaxa async/wait și genericele, dezvoltatorii pot gestiona eficient promisiunile și pot construi aplicații mai fiabile.