Hvordan jobbe med TypeScript og Promises

TypeScript forbedrer JavaScript-utvikling ved å legge til statiske typer. Når du arbeider med asynkron kode, brukes løfter for å håndtere operasjoner som fullføres i fremtiden. TypeScript gir verktøy for å administrere løfter med typesikkerhet og klarhet. Denne veiledningen utforsker hvordan du arbeider med løfter i TypeScript, fra grunnleggende bruk til avanserte scenarier.

Forstå løfter

Et løfte er et objekt som representerer den eventuelle fullføringen eller feilen av en asynkron operasjon. Det gir metoder for å håndtere resultatet eller feilen av operasjonen. I TypeScript kan løfter skrives inn for å sikre at de løses med den forventede datatypen.

Grunnleggende bruk av løfter

Det er enkelt å lage og bruke løfter i TypeScript. Her er et eksempel på et løfte som 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 eksemplet returnerer fetchData et løfte som løses med en streng. then-metoden håndterer den løste verdien, mens catch håndterer eventuelle feil.

Håndtere løfter med Async/Await

TypeScript støtter async/await-syntaksen, som gir en mer lesbar måte å jobbe med løfter på. Slik bruker du asynkron/avvent 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 eksemplet er fetchDataAsync-funksjonen erklært som async, slik at den kan bruke nøkkelordet await for å vente på at løftet skal løses. Feil fanges opp med en try/catch blokk.

Skrive løfter med generiske

TypeScript gjør det mulig å spesifisere typen data et løfte løser med ved hjelp av generiske. Dette sikrer at typene administreres riktig gjennom 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 eksemplet returnerer fetchUser et løfte som løses med et User-objekt. Typen er spesifisert ved bruk av generiske koder, noe som sikrer typesikkerhet.

Bruke løfter i TypeScript med API-kall

Løfter brukes ofte med API-kall for å håndtere asynkron datahenting. TypeScripts typesystem hjelper til med å administrere svar fra APIer:

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 eksemplet viser hvordan du bruker fetch for å foreta et API-kall og håndtere svaret ved å bruke løfter og async/wait. Svaret er skrevet som Bruker, noe som sikrer typesikkerhet.

Konklusjon

Å jobbe med løfter i TypeScript gir forbedret typesikkerhet og klarhet for asynkrone operasjoner. Ved å bruke TypeScripts skrivesystem, asynkron/avvent-syntaks og generikk, kan utviklere administrere løfter effektivt og bygge mer pålitelige applikasjoner.