Типы Fetch API; обобщения Response.json()
Используйте Fetch API с корректными типами и обобщения Response.json () для безопасного разбора данных JSON.
«Типы Fetch API; обобщения Response.json()» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 2. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 2 уроков всего.
Введение
Цель: вызывать API с помощью fetch, безопасно обрабатывать ответы и использовать обобщённые типы с Response.json().
Базовый fetch
fetch возвращает Promise<Response>. Используйте res.text() для обычного текстового содержимого.
async function getText() {
const res = await fetch("/hello.txt");
const text = await res.text();
console.log(text);
}Значение по умолчанию res.json()
res.json() разбирает содержимое, но по умолчанию его типом возвращаемого значения является any. Проверки на этапе компиляции нет.
async function getData() {
const res = await fetch("/data.json");
const data = await res.json();
console.log(data);
}res.json<T>()
Вызывайте res.json<T>() с интерфейсом. TS проверит, что используются только допустимые поля 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);
}Безопасность типов
TypeScript не позволяет обращаться к отсутствующим полям, если с 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
}Типизация массивов
Обобщённые типы работают и с массивами, например Todo[]. TS проверяет, что каждый элемент имеет правильную структуру.
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>()
Быстрая проверка: в чём преимущество response.json<T>() с аргументом типа?
Повторение
Повторение: fetch возвращает Response. По умолчанию json() имеет тип any. Добавляйте обобщённый тип json<T> для безопасности типов.
Часто задаваемые вопросы
Урок «Типы Fetch API; обобщения Response.json()» бесплатный?
Да — полный текст урока «Типы Fetch API; обобщения Response.json()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 2 уроков всего.
Чему я научусь в уроке «Типы Fetch API; обобщения Response.json()»?
Используйте Fetch API с корректными типами и обобщения Response.json () для безопасного разбора данных JSON. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 2.
Сколько времени занимает урок «Типы Fetch API; обобщения Response.json()»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Типы Fetch API; обобщения Response.json()
- Проверка во время выполнения с zod (введение)