Fetch API types; Response.json() generics
Use the Fetch API with correct types, and Response.json () generics to safely parse JSON payloads.
Fetch API types; Response.json() generics is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 2. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 2 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Intro
Goal: Call APIs with fetch, handle responses safely, and use generics with Response.json().
Basic fetch
fetch returns a Promise<Response>. Use res.text() for plain text bodies.
async function getText() {
const res = await fetch("/hello.txt");
const text = await res.text();
console.log(text);
}res.json() default
res.json() parses the body, but its return type is any by default. No compile-time safety.
async function getData() {
const res = await fetch("/data.json");
const data = await res.json();
console.log(data);
}res.json<T>()
Call res.json<T>() with an interface. TS checks you only use valid fields of 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);
}Type safety
TypeScript prevents access to missing fields when you use generics with 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
}Array typing
Generics also work with arrays, e.g. Todo[]. TS ensures each item has the correct shape.
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>() check
Quick check: What is the benefit of response.json<T>() with a type argument?
Recap
Recap: fetch returns Response. Default json() is any. Add generics json<T> for type safety.
Frequently asked questions
Is the “Fetch API types; Response.json() generics” lesson free?
Yes — the full text of “Fetch API types; Response.json() generics” is free to read here on the web, and the TypeScript Academy course includes 2 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Fetch API types; Response.json() generics”?
Use the Fetch API with correct types, and Response.json () generics to safely parse JSON payloads. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start TypeScript Academy?
No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 2, so you can start here or from the beginning and move at your own pace.
How long does the “Fetch API types; Response.json() generics” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this TypeScript Academy lesson?
Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Fetch API types; Response.json() generics
- Runtime validation with zod (intro)