Tipi della Fetch API; generics di Response.json()
Utilizzi la Fetch API con i tipi corretti e i generics Response.json () per analizzare in sicurezza i payload JSON.
Tipi della Fetch API; generics di Response.json() è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 2. 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 2 lezioni in totale.
Introduzione
Obiettivo: chiamate le API con fetch, gestite le risposte in modo sicuro e usate i generics con Response.json().
fetch di base
fetch restituisce una Promise<Response>. Usate res.text() per i body contenenti testo semplice.
async function getText() {
const res = await fetch("/hello.txt");
const text = await res.text();
console.log(text);
}Valore predefinito di res.json()
res.json() analizza il body, ma per impostazione predefinita il tipo restituito è any. Non offre sicurezza a tempo di compilazione.
async function getData() {
const res = await fetch("/data.json");
const data = await res.json();
console.log(data);
}res.json<T>()
Chiamate res.json<T>() con un'interfaccia. TS verifica che usiate solo i campi validi di User.
interface User { id: number; name: string }
async function getUser() {
const res = await fetch("/user.json");
const user = await res.json<User>();
console.log(user.id, user.name);
}Sicurezza dei tipi
TypeScript impedisce l'accesso ai campi mancanti quando usate i generics con json<T>.
interface Product { id: number; price: number }
async function getProduct() {
const res = await fetch("/product.json");
const p = await res.json<Product>();
// console.log(p.unknown); // Error: unknown does not exist
}Tipizzazione degli array
I generics funzionano anche con gli array, ad esempio Todo[]. TS garantisce che ogni elemento abbia la struttura corretta.
interface Todo { id: number; done: boolean }
async function getTodos() {
const res = await fetch("/todos.json");
const todos = await res.json<Todo[]>();
todos.forEach(t => console.log(t.id, t.done));
}Verifica di json<T>()
Verifica rapida: qual è il vantaggio di usare response.json<T>() con un argomento di tipo?
Riepilogo
Riepilogo: fetch restituisce un Response. Per impostazione predefinita, json() restituisce any. Aggiungete i generics con json<T> per ottenere la sicurezza dei tipi.
Domande Frequenti
La lezione «Tipi della Fetch API; generics di Response.json()» è gratuita?
Sì — il testo completo di «Tipi della Fetch API; generics di Response.json()» è 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 2 lezioni in totale.
Cosa imparerò in «Tipi della Fetch API; generics di Response.json()»?
Utilizzi la Fetch API con i tipi corretti e i generics Response.json () per analizzare in sicurezza i payload JSON. 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 2.
Quanto tempo richiede la lezione «Tipi della Fetch API; generics di Response.json()»?
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
- Tipi della Fetch API; generics di Response.json()
- Validazione a runtime con zod (introduzione)