При получении данных из внешних источников (API, LocalStorage) мы часто используем JSON.parse(). Проблема в том, что этот метод возвращает тип any, отключая проверки TypeScript.
Чтобы работать с такими данными безопасно, необходимо явно указывать ожидаемую структуру. Мы можем использовать приведение типов (assertion) as SomeInterface или дженерики в функциях-обертках.
В этом уроке мы попрактикуемся в создании интерфейсов для JSON-ответов и безопасном преобразовании строки в типизированный объект.
- Модуль 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. Приведение типа
В этом задании вы практикуете приведение типов в TypeScript при работе с JSON данными. Дан фрагмент кода, который определяет интерфейс для данных пользователя и парсит JSON строку. Однако, результат метода JSON.parse() по умолчанию имеет тип 'any', что может привести к ошибкам типизации при обращении к свойствам объекта. Ваша задача — дополнить вызов JSON.parse() оператором приведения типа и указать интерфейс, чтобы TypeScript знал ожидаемую структуру данных. Заполните пропуски в коде, чтобы обеспечить корректную типизацию без изменения логики программы.
// Интерфейс для данных пользователя
interface UserData { name: string; age: number; }
const jsonString = '{"name": "Alice", "age": 30}';
const data = JSON.parse(jsonString) input1S input2S;
console.log(data.name);2. Интерфейс под JSON
Из предложенных строк соберите корректный TypeScript интерфейс, который соответствует JSON объекту '{"id": 1, "active": true}'. Интерфейс должен быть назван Config и включать свойства с правильными типами, основанными на значениях JSON. Не включайте лишние строки, которые добавляют свойства, не присутствующие в JSON, или неверные типы.
interface Config { id: number; active: boolean;} name: string; id: string;3. Соответствие типов
Перед вами список строк, представляющих значения в формате JSON. Ваша задача — распределить каждую строку по одной из трёх категорий типов TypeScript: 'number', 'string' или 'boolean'. Обратите внимание, что в JSON числа записываются без кавычек, строки — в двойных кавычках, а логические значения — как true или false без кавычек. Классифицируйте элементы, исходя из того, к какому типу TypeScript они относятся при парсинге JSON.
"123"true42"hello""world"false100"true"4. Несоответствие данных
В этом фрагменте TypeScript-кода есть ошибка типизации при работе с JSON данными. Интерфейс Person определяет структуру объекта, но тип поля age не соответствует данным, приходящим из JSON строки, где возраст представлен строкой. Найдите и исправьте ошибку в объявлении интерфейса, чтобы код мог корректно парсить JSON и выводить значение возраста без ошибок типизации.
interface Person { name: string; age: number;} const jsonString = '{"name": "Alice", "age": "25"}';const person: Person = JSON.parse(jsonString);console.log(person.age);5. Процесс парсинга
В этом упражнении по TypeScript вам предстоит восстановить правильную последовательность этапов процесса парсинга JSON данных. Цель — понять, как из строки JSON получить типизированный объект для безопасного использования в коде. Перед вами четыре описания шагов, которые перемешаны. Ваша задача — расставить их в логическом порядке, отражающем стандартный процесс: от получения сырой строки до работы с типизированными данными. Это поможет закрепить понимание типизации при работе с внешними данными.
6. Дженерик парсер
В этом задании вам предстоит работать с дженерик-функцией `parseJSON`, которая парсит JSON-строку и возвращает типизированный объект. Ваша задача — правильно вызвать эту функцию, передав в качестве дженерик-параметра тип `User`, который определен в коде. Выберите правильный синтаксис для указания типа из выпадающего списка, чтобы переменная `user` была корректно типизирована.
function parseJSON<T>(jsonString: string): T {
return JSON.parse(jsonString);
}
interface User {
name: string;
age: number;
}
const jsonString = '{"name": "Alice", "age": 30}';
const user = parseJSON<input1S>(jsonString);
console.log(user.name);7. Доступ к полю
В приведённом фрагменте кода TypeScript определяется интерфейс для структуры JSON, затем выполняется парсинг строки JSON в объект этого типа. После этого происходит обращение к вложенному полю объекта. Укажите, какое значение будет выведено в консоль. Введите одно слово в нижнем регистре.
interface UserData {
name: string;
details: {
city: string;
country: string;
};
}
const jsonString = '{"name":"alice","details":{"city":"paris","country":"france"}}';
const user: UserData = JSON.parse(jsonString);
console.log(user.details.country);8. Поля для маппинга
Внимательно изучите представленный JSON-объект, описывающий данные о пользователе. Ваша задача — отметить кликом все ключи (имена полей), которые должны быть описаны в TypeScript-интерфейсе для корректной типизации основных данных пользователя. Не отмечайте значения полей, служебные метаданные (например, даты создания и обновления) или технические ключи, которые не относятся к основной сущности.
{
{{"id"~|~t1}}: 12345,
{{"username"~|~t2}}: {{"john_doe"~|~t6}},
{{"email"~|~t3}}: "john@example.com",
{{"age"~|~t4}}: 28,
{{"isActive"~|~t5}}: true,
{{"createdAt"~|~t7}}: "2023-01-15T10:30:00Z",
{{"updatedAt"~|~t8}}: "2023-06-20T14:45:00Z",
{{"lastLoginIp"~|~t9}}: "192.168.1.1"
}