Fetch-API-Typen; Response.json()-Generics
Verwenden Sie die Fetch API mit den richtigen Typen und Response.json ()-Generics, um JSON-Payloads sicher zu analysieren.
Fetch-API-Typen; Response.json()-Generics ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 2. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 2 Lektionen.
Einführung
Ziel: Rufen Sie APIs mit fetch auf, verarbeiten Sie Antworten sicher und verwenden Sie Generics mit Response.json().
Einfacher fetch-Aufruf
fetch gibt ein Promise<Response> zurück. Verwenden Sie res.text() für reine Textinhalte.
async function getText() {
const res = await fetch("/hello.txt");
const text = await res.text();
console.log(text);
}Standardverhalten von res.json()
res.json() analysiert den Inhalt, aber der Rückgabetyp ist standardmäßig any. Es gibt keine Typsicherheit zur Compilezeit.
async function getData() {
const res = await fetch("/data.json");
const data = await res.json();
console.log(data);
}res.json<T>()
Rufen Sie res.json<T>() mit einem Interface auf. TS prüft, dass Sie nur gültige Felder von User verwenden.
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);
}Typsicherheit
TypeScript verhindert den Zugriff auf fehlende Felder, wenn Sie Generics mit json<T> verwenden.
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
}Array-Typisierung
Generics funktionieren auch mit Arrays, zum Beispiel Todo[]. TS stellt sicher, dass jedes Element die richtige Struktur hat.
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));
}json<T>() prüfen
Schnelltest: Welchen Vorteil bietet response.json<T>() mit einem Typargument?
Zusammenfassung
Zusammenfassung: fetch gibt ein Response zurück. Das standardmäßige json() verwendet any. Verwenden Sie Generics wie json<T> für Typsicherheit.
Häufig gestellte Fragen
Ist die Lektion „Fetch-API-Typen; Response.json()-Generics“ kostenlos?
Ja — der vollständige Text von „Fetch-API-Typen; Response.json()-Generics“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 2 Lektionen.
Was lerne ich in „Fetch-API-Typen; Response.json()-Generics“?
Verwenden Sie die Fetch API mit den richtigen Typen und Response.json ()-Generics, um JSON-Payloads sicher zu analysieren. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 2.
Wie lange dauert die Lektion „Fetch-API-Typen; Response.json()-Generics“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Fetch-API-Typen; Response.json()-Generics
- Laufzeitvalidierung mit zod (Einführung)