Работа с сетью через fetch — стандартная задача веб-разработки. Однако стандартный метод response.json() возвращает тип Promise<any>, что сводит на нет безопасность типов TypeScript. Вы не получаете автодополнения и не видите ошибок, если обращаетесь к несуществующему полю.
Чтобы типизировать ответ, мы используем интерфейсы и дженерики (Generics). Это позволяет явно указать, какую структуру данных мы ожидаем от сервера.
Пример:
interface User {
id: number;
name: string;
}
// ...
const data = await res.json() as User;В этом практическом уроке вы научитесь создавать интерфейсы для API-ответов, использовать as утверждения и писать типизированные обертки над fetch запросами.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
- Типизация событий DOM.
- Типизация fetch запросов.
- Типизация JSON данных.
- Типизация localStorage.
1. Приведение типа ответа
В этом задании вам нужно типизировать ответ от API, используя оператор приведения типа в TypeScript. Дан код, который выполняет fetch-запрос для получения данных о пользователе. Интерфейс UserData уже объявлен. Вам необходимо добавить приведение типа к интерфейсу UserData для переменной data, чтобы TypeScript знал структуру полученного объекта. Заполните пропуск в коде, чтобы он компилировался и корректно выводил имя пользователя.
interface UserData { name: string; age: number; }
async function fetchUserData() {
const response = await fetch('https://api.example.com/user');
const data = await response.json() input1S;
console.log(data.name);
}2. Функция-обертка
Из предложенных строк соберите generic-функцию `request`, которая делает fetch-запрос по переданному URL и возвращает Promise с данными в формате JSON. Функция должна быть асинхронной и использовать generic-тип для указания типа возвращаемых данных. Лишние строки в решение включать не нужно.
async function request<T>(url: string): Promise<T> { const response = await fetch(url); return response.json();}function request(url: string): Promise<any> { const data = await response.json(); return response;async function request<T>(url: string, method: string): Promise<T> {3. Соответствие полей
Перед вами фрагмент кода TypeScript, содержащий интерфейс, описывающий структуру ответа от сервера, и функцию обработки этого ответа. Внимательно изучите код. Ваша задача — кликнуть и выделить все обращения к свойствам объекта `data` внутри функции `processResponse`, которые действительно существуют в интерфейсе `ApiResponse`. Не отмечайте сам объект `data`, названия методов, другие переменные или свойства, которые не описаны в интерфейсе.
interface ApiResponse {
id: number;
title: string;
tags: string[];
}
async function processResponse(response: Response) {
const data: ApiResponse = await response.json();
console.log('ID:', {{data~|~t0}}.{{id~|~t1}});
console.log('Title:', {{data~|~t2}}.{{title~|~t3}});
console.log('Tags count:', {{data~|~t4}}.{{tags~|~t5}}.length);
// Это свойство отсутствует в интерфейсе
console.log('Description:', {{data~|~t6}}.{{description~|~t7}});
}4. Порядок обработки запроса
В этом задании вам нужно восстановить правильный порядок строк кода TypeScript, которые выполняют асинхронный запрос с использованием fetch. Код включает вызов fetch, ожидание ответа, преобразование в JSON, приведение типа к определенному интерфейсу и использование типизированных данных. Расставьте строки в таком порядке, чтобы они корректно обрабатывали запрос и типизацию данных, учитывая, что переменные должны быть объявлены до их использования.
console.log(typedData);const promise = fetch('https://api.example.com/data');const data = await response.json();const response = await promise;const typedData = data as UserData;5. Тип результата
Проанализируйте представленный код TypeScript с использованием fetch API. Определите, какой тип данных будет возвращён при вызове асинхронной функции getUser(). Обратите внимание на сигнатуру функции и обработку ответа.
interface User {
id: number;
name: string;
email: string;
}
async function getUser(): Promise<User> {
const response = await fetch('https://api.example.com/user/1');
const data = await response.json();
return data as User;
}6. Ошибка в имени свойства
В этом фрагменте TypeScript-кода, который выполняет fetch-запрос и обрабатывает ответ, допущена ошибка в имени свойства при обращении к данным. Проверьте типизацию ответа и исправьте опечатку в названии свойства, чтобы код корректно обращался к данным согласно объявленному интерфейсу.
interface UserData { id: number; fullName: string; email: string;} async function fetchUser(): Promise<void> { const response = await fetch('https://api.example.com/user/1'); const user: UserData = await response.json(); console.log(user.fullname); // Опечатка в имени свойства}7. Передача типа в функцию
В этом задании вам нужно правильно передать тип в дженерик функции `http.get`, чтобы результат запроса был корректно типизирован. В коде ниже используется универсальная функция запроса, но пропущен синтаксис передачи типа. Выберите из выпадающего списка правильный вариант для заполнения пропуска, чтобы TypeScript мог вывести тип данных ответа.
interface User {
id: number;
name: string;
}
async function fetchUser() {
const response = await http.get<input1S>('https://api.example.com/user/1');
const user = response.data;
console.log(user.name);
}8. Анализ асинхронности
Проанализируйте typescript-код сверху и расставьте шаги снизу в правильном порядке, чтобы получилась логика выполнения асинхронной функции с обработкой ошибок сети и HTTP-статусов. Обратите внимание на последовательность действий внутри try/catch блока при выполнении fetch запроса и обработке возможных ошибок.
async function fetchUserData(userId: number): Promise<any> {
const url = `https://api.example.com/users/${userId}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log('Данные получены:', data);
return data;
} catch (error) {
console.error('Ошибка при выполнении запроса:', error);
return null;
}
}
// Вызов функции с конкретным параметром
const result = fetchUserData(42);