Hur man arbetar med TypeScript och Promises

TypeScript förbättrar JavaScript-utvecklingen genom att lägga till statiska typer. När man arbetar med asynkron kod används löften för att hantera operationer som slutförs i framtiden. TypeScript tillhandahåller verktyg för att hantera löften med typsäkerhet och tydlighet. Den här guiden utforskar hur man arbetar med löften i TypeScript, från grundläggande användning till avancerade scenarier.

Förstå löften

Ett löfte är ett objekt som representerar slutförandet eller misslyckandet av en asynkron operation. Den tillhandahåller metoder för att hantera resultatet eller felet av operationen. I TypeScript kan löften skrivas in för att säkerställa att de löser sig med den förväntade datatypen.

Grundläggande användning av löften

Att skapa och använda löften i TypeScript är enkelt. Här är ett exempel på ett löfte som löser sig med en sträng:

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

I det här exemplet returnerar fetchData ett löfte som löser sig med en sträng. Metoden then hanterar det lösta värdet, medan catch hanterar eventuella fel.

Hantera löften med Async/Await

TypeScript stöder syntaxen async/await, vilket ger ett mer läsbart sätt att arbeta med löften. Så här använder du async/await with löften:

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

I det här exemplet deklareras fetchDataAsync-funktionen som async, vilket gör att den kan använda nyckelordet await för att vänta på att löftet ska lösas. Fel fångas upp med ett försök/fånga-block.

Skriva löften med generika

TypeScript tillåter att specificera vilken typ av data ett löfte löser med hjälp av generika. Detta säkerställer att typerna hanteras korrekt genom hela koden. Här är ett exempel på ett maskinskrivet löfte:

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

I det här exemplet returnerar fetchUser ett löfte som löser sig med ett User-objekt. Typen specificeras med hjälp av generika, vilket säkerställer typsäkerhet.

Använda Promises i TypeScript med API-anrop

Löften används ofta med API-anrop för att hantera asynkron datahämtning. TypeScripts typsystem hjälper till att hantera svar från API:er:

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

Det här exemplet visar hur man använder fetch för att göra ett API-anrop och hantera svaret med löften och async/await. Svaret skrivs som Användare, vilket säkerställer typsäkerhet.

Slutsats

Att arbeta med löften i TypeScript ger förbättrad typsäkerhet och tydlighet för asynkrona operationer. Genom att använda TypeScripts skrivsystem, syntax för async/vänta och generika kan utvecklare hantera löften effektivt och bygga mer tillförlitliga applikationer.