Sådan arbejder du med TypeScript og Promises

TypeScript forbedrer JavaScript-udvikling ved at tilføje statiske typer. Når du arbejder med asynkron kode, bruges løfter til at håndtere operationer, der gennemføres i fremtiden. TypeScript giver værktøjer til at administrere løfter med typesikkerhed og klarhed. Denne vejledning udforsker, hvordan man arbejder med løfter i TypeScript, fra grundlæggende brug til avancerede scenarier.

Forstå løfter

Et løfte er et objekt, der repræsenterer den endelige fuldførelse eller fiasko af en asynkron operation. Det giver metoder til at håndtere resultatet eller fejlen af ​​operationen. I TypeScript kan løfter indtastes for at sikre, at de løses med den forventede datatype.

Grundlæggende brug af løfter

Oprettelse og brug af løfter i TypeScript er ligetil. Her er et eksempel på et løfte, der løses med en streng:

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 dette eksempel returnerer fetchData et løfte, der løses med en streng. then-metoden håndterer den løste værdi, mens catch håndterer eventuelle fejl.

Håndtering af løfter med Async/Await

TypeScript understøtter async/await-syntaksen, som giver en mere læsbar måde at arbejde med løfter på. Sådan bruger du asynkron/afvent med løfter:

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 dette eksempel er fetchDataAsync-funktionen erklæret som async, hvilket giver den mulighed for at bruge nøgleordet await til at vente på, at løftet løses. Fejl fanges ved hjælp af en try/catch blok.

Skrive løfter med generiske

TypeScript gør det muligt at specificere den type data, et løfte løser med ved hjælp af generiske stoffer. Dette sikrer, at typerne administreres korrekt i hele koden. Her er et eksempel på et maskinskrevet 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 dette eksempel returnerer fetchUser et løfte, der løses med et User objekt. Typen er specificeret ved hjælp af generiske koder, hvilket sikrer typesikkerhed.

Brug af løfter i TypeScript med API-kald

Løfter bruges ofte sammen med API-kald til at håndtere asynkron datahentning. TypeScripts typesystem hjælper med at administrere svar fra 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);
});

Dette eksempel viser, hvordan man bruger fetch til at foretage et API-kald og håndtere svaret ved hjælp af løfter og async/wait. Svaret er skrevet som Bruger, hvilket sikrer typesikkerhed.

Konklusion

At arbejde med løfter i TypeScript giver forbedret typesikkerhed og klarhed til asynkrone operationer. Ved at bruge TypeScripts indtastningssystem, async/wait syntaks og generiske artikler kan udviklere administrere løfter effektivt og bygge mere pålidelige applikationer.