Jak pracować z TypeScript i Promises

TypeScript ulepsza rozwój JavaScript, dodając typy statyczne. Podczas pracy z kodem asynchronicznym obietnice są używane do obsługi operacji, które zostaną ukończone w przyszłości. TypeScript udostępnia narzędzia do zarządzania obietnicami z bezpieczeństwem typu i przejrzystością. Ten przewodnik bada, jak pracować z obietnicami w TypeScript, od podstawowego użycia do zaawansowanych scenariuszy.

Zrozumienie obietnic

promise to obiekt reprezentujący ostateczne zakończenie lub niepowodzenie operacji asynchronicznej. Dostarcza metod do obsługi wyniku lub błędu operacji. W TypeScript obietnice mogą być typizowane, aby zapewnić, że rozwiążą się z oczekiwanym typem danych.

Podstawowe zastosowanie obietnic

Tworzenie i używanie obietnic w TypeScript jest proste. Oto przykład obietnicy, która rozwiązuje się za pomocą ciągu:

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

W tym przykładzie fetchData zwraca obietnicę, która rozwiązuje się za pomocą ciągu. Metoda then obsługuje rozwiązaną wartość, podczas gdy catch obsługuje wszelkie błędy.

Obsługa obietnic za pomocą Async/Await

TypeScript obsługuje składnię async/await, która zapewnia bardziej czytelny sposób pracy z obietnicami. Oto jak używać async/await z obietnicami:

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

W tym przykładzie funkcja fetchDataAsync jest zadeklarowana jako async, co pozwala jej użyć słowa kluczowego await, aby poczekać na rozwiązanie obietnicy. Błędy są wychwytywane za pomocą bloku try/catch.

Wpisywanie obietnic za pomocą typów generycznych

TypeScript pozwala określić typ danych, które obietnica rozwiązuje za pomocą generyków. Zapewnia to, że typy są poprawnie zarządzane w całym kodzie. Oto przykład typizowanej obietnicy:

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

W tym przykładzie fetchUser zwraca obietnicę, która rozwiązuje się za pomocą obiektu User. Typ jest określony za pomocą typów generycznych, co zapewnia bezpieczeństwo typu.

Korzystanie z obietnic w TypeScript z wywołaniami API

Obietnice są często używane z wywołaniami API do obsługi asynchronicznego pobierania danych. System typów TypeScript pomaga zarządzać odpowiedziami z 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);
});

Ten przykład pokazuje, jak użyć fetch do wywołania API i obsługi odpowiedzi za pomocą promises i async/await. Odpowiedź jest typowana jako User, co zapewnia bezpieczeństwo typu.

Wniosek

Praca z obietnicami w TypeScript zapewnia zwiększone bezpieczeństwo typów i przejrzystość dla operacji asynchronicznych. Korzystając z systemu typowania TypeScript, składni async/await i typów generycznych, programiści mogą skutecznie zarządzać obietnicami i budować bardziej niezawodne aplikacje.