Утверждения типов

Часть раздела Введение в TypeScript путешествия по JavaScript на Coddy. Урок 68 из 73.

Иногда TypeScript не располагает достаточной информацией, чтобы определить точный тип значения, но вы, как разработчик, знаете, чем это значение является на самом деле. Утверждения типов позволяют сообщить TypeScript: «поверьте мне, я знаю, что это значение имеет именно этот тип».

TypeScript предоставляет два синтаксиса для утверждений типов. Синтаксис as является более распространённым подходом:

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

Также можно использовать синтаксис с угловыми скобками, хотя в современном TypeScript он встречается реже:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

Задание

Легко

Создай функцию, которая обрабатывает данные из имитации внешнего API. Ты будешь работать со значениями типа unknown и использовать утверждения типов для безопасного доступа к их свойствам.

Создай переменную apiResponse типа unknown и присвой ей следующую строку JSON:

{"userId": 42, "username": "alice_dev", "isActive": true}

Создай функцию с именем processUserData, которая:

Принимает параметр data типа unknown
Использует утверждение типа, чтобы рассматривать data как string
Разбирает строку JSON с помощью JSON.parse()
Использует ещё одно утверждение типа, чтобы рассматривать разобранный результат как объект со свойствами userId (number), username (string) и isActive (boolean)
Возвращает отформатированную строку: "User [userId]: [username] (Active: [isActive])"
Имеет явный возвращаемый тип string

Создай дополнительные тестовые данные:

Создай secondApiResponse типа unknown со строкой JSON: {"userId": 15, "username": "bob_admin", "isActive": false}
Создай thirdApiResponse типа unknown со строкой JSON: {"userId": 99, "username": "charlie_user", "isActive": true}

Протестируй свою функцию и выведи следующие результаты:

Вызови processUserData с apiResponse и выведи результат
Вызови processUserData с secondApiResponse и выведи результат
Вызови processUserData с thirdApiResponse и выведи результат

Попробуйте сами

// Создать переменные ответа API
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO: Создать функцию processUserData здесь

// Протестировать функцию и вывести результаты
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));