TypeScript Academy · Lezione

Tipizzazione delle risposte di fetch con wrapper generici

Scriva un helper fetch tipizzato che restituisca tipi sicuri.

Lezione 1 di 413 passaggi

Tipizzazione delle risposte di fetch con wrapper generici è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Benvenuto

Scriva funzioni helper fetch tipizzate per consumare in sicurezza le API HTTP.

Il problema di fetch

L'API fetch restituisce Promise e .json() restituisce Promise. Senza i tipi, si perde tutta la sicurezza.

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

Wrapper fetch generico

Crei un helper fetch tipizzato che presupponga la struttura della risposta.

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

Usare il wrapper

Chiami il wrapper con un argomento di tipo esplicito.

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

Aggiungere la gestione degli errori

Estenda il wrapper affinché restituisca un tipo Result.

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

Tipizzazione delle opzioni della richiesta

Tipizzi le opzioni di fetch per le richieste POST e PUT.

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

Validazione della risposta

Convalidi la struttura della risposta prima di restituirla come valore tipizzato.

Tipizzazione di AbortController

Tipizzi AbortController e AbortSignal per le richieste annullabili.

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

Interceptor per la base URL

Crei una classe client HTTP con una base URL.

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

Header tipizzati

Tipizzi gli header delle richieste e delle risposte.

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

Tipi per la paginazione

Tipizzi le risposte paginate delle API.

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

Verifica rapida

Che cosa fa `res.json() as Promise` in un wrapper fetch tipizzato?

Rispondi nella lezione interattiva

Riepilogo

Tipizzare le risposte di fetch con wrapper generici: ha acquisito i concetti e i pattern chiave.

Gratis per iniziare

Impara TypeScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 101
Lezioni: 352

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Tipizzazione delle risposte di fetch con wrapper generici» è gratuita?

Sì — il testo completo di «Tipizzazione delle risposte di fetch con wrapper generici» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Tipizzazione delle risposte di fetch con wrapper generici»?

Scriva un helper fetch tipizzato che restituisca tipi sicuri. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Tipizzazione delle risposte di fetch con wrapper generici»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Tipizzazione delle risposte di fetch con wrapper generici
Validazione a runtime con Zod
Codegen OpenAPI: tipi generati automaticamente
Panoramica del client tRPC type-safe

← Torna a TypeScript Academy