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. This is 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, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 2 lessons in total.
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.
Learn TypeScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 101
- Lessons
- 352
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. 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. The TypeScript Academy course includes 2 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 2.
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)