TypeScript Academy · leksjon

Angi typer for Fetch-svar med generiske omslag

Skriv en typet fetch-hjelpefunksjon som returnerer trygge typer.

Leksjon 1 av 413 trinn

Angi typer for Fetch-svar med generiske omslag er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Velkommen

Skriv typede fetch-hjelpefunksjoner for å bruke HTTP-API-er på en trygg måte.

Problemet med fetch

Fetch-API-et returnerer Promise, og .json() returnerer Promise. Uten typer mister du all typesikkerhet.

const res = await fetch('/api/user');
const data = await res.json(); // data: any — unsafe

Generisk fetch-wrapper

Opprett en typet fetch-hjelper som antar formen på svaret.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
  return res.json() as Promise<T>;
}

Bruke wrapperen

Kall wrapperen med et eksplisitt typeargument.

interface User { id: number; name: string; }
const user = await fetchJson<User>('/api/users/1');
console.log(user.name); // typed as string

Legge til feilhåndtering

Utvid wrapperen slik at den returnerer en Result-type.

async function safeFetch<T>(url: string): Promise<Result<T>> {
  try {
    const res = await fetch(url);
    if (!res.ok) return err(new Error(`HTTP ${res.status}`));
    return ok(await res.json() as T);
  } catch (e) { return err(e as Error); }
}

Typing av forespørselsalternativer

Typ forespørselsalternativer for POST-/PUT-forespørsler.

async function postJson<T, B>(url: string, body: B): Promise<T> {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  return res.json() as Promise<T>;
}

Validering av svar

Valider formen på svaret før du returnerer det som den typede verdien.

Typing av AbortController

Typ AbortController og AbortSignal for forespørsler som kan avbrytes.

const ctrl = new AbortController();
const data = await fetchJson<User>('/api/users/1', { signal: ctrl.signal });
setTimeout(() => ctrl.abort(), 5000);

Interceptor for basis-URL

Opprett en HTTP-klientklasse med en basis-URL.

class ApiClient {
  constructor(private baseUrl: string) {}
  get<T>(path: string): Promise<T> {
    return fetchJson<T>(`${this.baseUrl}${path}`);
  }
}

Typede headere

Typ forespørsels- og svarheadere.

const headers: Record<string, string> = {
  Authorization: `Bearer ${token}`,
  'Content-Type': 'application/json',
};

Pagineringstyper

Typ paginerte API-svar.

interface Paginated<T> { data: T[]; page: number; total: number; }
const result = await fetchJson<Paginated<User>>('/api/users?page=1');

Kort kontroll

Hva gjør `res.json() as Promise` i en typet fetch-wrapper?

Besvar den i den interaktive leksjonen

Oppsummering

Typing av fetch-svar med generiske wrappere: Du har fått god oversikt over de viktigste konseptene og mønstrene.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Angi typer for Fetch-svar med generiske omslag» gratis?

Ja – hele teksten i «Angi typer for Fetch-svar med generiske omslag» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Angi typer for Fetch-svar med generiske omslag»?

Skriv en typet fetch-hjelpefunksjon som returnerer trygge typer. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Angi typer for Fetch-svar med generiske omslag»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Angi typer for Fetch-svar med generiske omslag
Validering under kjøring med Zod
OpenAPI-kodegenerering: automatisk genererte typer
Oversikt over typesikker tRPC-klient

← Tilbake til TypeScript Academy