PricingLoginStart free
TypeScript Academy · Урок

Типизация ответов Fetch с обобщёнными обёртками

Напишите типизированную вспомогательную функцию fetch, возвращающую безопасные типы

Урок 1 из 413 шагов

«Типизация ответов Fetch с обобщёнными обёртками» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Добро пожаловать

Напишите типизированные вспомогательные функции fetch для безопасного использования HTTP API.

Проблема fetch

API fetch возвращает Promise, а .json() возвращает Promise. Без типов вы теряете всю безопасность.
const res = await fetch('/api/user');
const data = await res.json(); // data: any — unsafe

Обобщённая оболочка fetch

Создайте типизированную вспомогательную функцию fetch, которая предполагает структуру ответа.
async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
  return res.json() as Promise<T>;
}

Использование оболочки

Вызывайте оболочку с явным аргументом типа.
interface User { id: number; name: string; }
const user = await fetchJson<User>('/api/users/1');
console.log(user.name); // typed as string

Добавление обработки ошибок

Расширьте оболочку, чтобы она возвращала тип результата.
async function safeFetch<T>(url: string): Promise<Result<T>> {
  try {
    const res = await fetch(url);
    if (!res.ok) return err(new Error(`HTTP ${res.status}`));
    return ok(await res.json() as T);
  } catch (e) { return err(e as Error); }
}

Типизация параметров запроса

Типизируйте параметры fetch для запросов POST/PUT.
async function postJson<T, B>(url: string, body: B): Promise<T> {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  return res.json() as Promise<T>;
}

Проверка ответа

Проверьте структуру ответа перед тем, как вернуть его как типизированное значение.

Типизация AbortController

Типизируйте AbortController и AbortSignal для запросов, которые можно отменить.
const ctrl = new AbortController();
const data = await fetchJson<User>('/api/users/1', { signal: ctrl.signal });
setTimeout(() => ctrl.abort(), 5000);

Перехватчик базового URL

Создайте класс HTTP-клиента с базовым URL.
class ApiClient {
  constructor(private baseUrl: string) {}
  get<T>(path: string): Promise<T> {
    return fetchJson<T>(`${this.baseUrl}${path}`);
  }
}

Типизированные заголовки

Типизируйте заголовки запроса и ответа.
const headers: Record<string, string> = {
  Authorization: `Bearer ${token}`,
  'Content-Type': 'application/json',
};

Типы пагинации

Типизируйте ответы API с пагинацией.
interface Paginated<T> { data: T[]; page: number; total: number; }
const result = await fetchJson<Paginated<User>>('/api/users?page=1');

Быстрая проверка

Что делает `res.json() as Promise` в типизированной оболочке fetch?
Ответь в интерактивном уроке

Итоги

Типизация ответов fetch с помощью обобщённых оболочек: вы освоили основные понятия и паттерны.
Можно начать бесплатно

Изучай TypeScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
101
Уроки
352
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Типизация ответов Fetch с обобщёнными обёртками» бесплатный?

Да — полный текст урока «Типизация ответов Fetch с обобщёнными обёртками» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Типизация ответов Fetch с обобщёнными обёртками»?

Напишите типизированную вспомогательную функцию fetch, возвращающую безопасные типы Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Типизация ответов Fetch с обобщёнными обёртками»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типизация ответов Fetch с обобщёнными обёртками
  2. Проверка во время выполнения с Zod
  3. Генерация кода OpenAPI: автоматически создаваемые типы
  4. Обзор типобезопасного клиента tRPC
← Назад к TypeScript Academy