Тип unknown

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

В TypeScript тип unknown — это безопасный аналог типа any. Если переменной присвоен тип any, вы можете делать с ней что угодно (вызывать методы, обращаться к свойствам), и компилятор не будет возражать, даже если это приведет к ошибке во время выполнения.

Тип unknown работает иначе: вы можете присвоить ему любое значение, но не можете использовать это значение (вызывать методы, передавать в функции, ожидающие другой тип), пока не убедитесь в его реальном типе. Это заставляет вас писать код проверки типов (Type Guards), делая программу надежнее.

Пример использования:

let value: unknown = "hello";
// value.length; // Ошибка! Нельзя просто так обратиться к свойству
if (typeof value === "string") {
console.log(value.length); // Теперь можно, TS знает, что это строка
}

Этот урок поможет освоить безопасную типизацию данных, когда их структура заранее неизвестна.

Список тем

1. Any vs Unknown

id: 40630_unknown_01_compare

В левой колонке приведены описания поведения и характеристик типов TypeScript, связанных с безопасностью типов и проверками. В правой колонке указаны названия типов. Сопоставьте каждое описание слева с соответствующим типом справа. Обратите внимание, что в правой колонке есть повторяющиеся названия типов, поэтому в проверке учитываются все корректные варианты сопоставления по смыслу.

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
Позволяет присваивать значения любого типа без проверок и выполнять любые операции
Требует проверки типа (например, с помощью typeof или type guards) перед выполнением операций
Может быть присвоен переменной любого типа без явного приведения
Не может быть использован без явного приведения типа или проверки, даже если операция кажется безопасной
Отключает статическую проверку типов TypeScript, что может привести к ошибкам во время выполнения
Предоставляет безопасность типов, заставляя разработчика явно обрабатывать возможные типы значений
any
unknown
any
any
unknown
unknown
Сообщения
Проверить
Показать подсказку

2. Объявление unknown

id: 40630_unknown_02_replace

Дополните фрагмент кода на TypeScript, объявив переменную с типом unknown. Этот тип позволяет переменной хранить значения любого типа, но перед выполнением операций над ней требуется явная проверка типа. Вставьте ключевое слово в аннотацию типа так, чтобы код компилировался и соответствовал безопасной работе с динамическими значениями.

Заполните пропуски
let userData: input1S;
userData = fetchDataFromSource(); // функция возвращает неизвестные данные
if (typeof userData === 'string') {
    console.log(userData.toUpperCase());
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Ошибка доступа

id: 40630_unknown_03_error

В этом фрагменте кода TypeScript переменная unknownValue имеет тип unknown. В одной из строк происходит попытка вызвать метод toUpperCase() без предварительной проверки типа, что приводит к ошибке компиляции. Найдите эту строку и исправьте её, используя утверждение типа (type assertion), чтобы код успешно выполнился.

Найдите ошибку и исправьте
let unknownValue: unknown = "Hello, World!";
// Небезопасное использование unknown
let result = unknownValue.toUpperCase();
console.log(result);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Сужение типов

id: 40630_unknown_04_select_fill

В данном задании вам предстоит заполнить пропуски в коде TypeScript, чтобы корректно сузить тип переменной unknown перед её использованием. Выберите из выпадающих списков правильные операторы проверки типа (typeof) и соответствующие типы (string, number), чтобы код выполнялся без ошибок типизации. Обратите внимание, что после проверки TypeScript позволяет использовать методы, специфичные для суженного типа.

Нужно правильно расставить в пропуски предложенные варианты
let value: unknown = getSomeValue(); // Возвращает unknown

if (input1S value input2S) {
    // value теперь сужено до string
    console.log(value.toUpperCase());
} else if (input3S value input4S) {
    // value теперь сужено до number
    console.log(value.toFixed(2));
} else {
    console.log('Тип не поддерживается');
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Результат проверки

id: 40630_unknown_05_predict_result

Проанализируйте приведённый код на TypeScript. Переменная value имеет тип unknown и инициализирована числом 42. Определите, что будет выведено в консоль в результате выполнения этого кода. Обратите внимание на проверку типа с помощью typeof и поведение метода toFixed().

Выберите правильный вариант ответа
let value: unknown = 42;

if (typeof value === 'string') {
    console.log(value.toUpperCase());
} else if (typeof value === 'number') {
    console.log(value.toFixed(1));
}
Сообщения
Проверить
Показать подсказку

6. Безопасная функция

id: 40630_unknown_06_build_from_parts

Из предложенных строк соберите корректную функцию на TypeScript, которая принимает аргумент типа unknown, проверяет, является ли он числом, и возвращает его удвоенное значение. Если аргумент не число, функция должна возвращать 0. В решении должны быть использованы только необходимые строки, лишние включать не нужно. Обратите внимание на правильную структуру функции и порядок операторов.

Перетяните в правильном порядке строки из одного блока в другой
function doubleIfNumber(value: unknown): number {
    if (typeof value === 'number') {
        return value * 2;
    }
    return 0;
}
    const num = value as number;
    console.log(value);
    else { return 0; }
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

TypeScript: компиляция и запуск

id: 40630_compiler

Демо по типу unknown: значение может прийти «откуда угодно», и TypeScript не даст вам использовать его как строку/число, пока вы не выполните проверку. Запустите код и посмотрите, как через type guards (typeof, Array.isArray) и пользовательские проверки можно безопасно работать с данными. Поэкспериментируйте: меняйте входные значения в tests, добавляйте новые варианты (null, объект, массив), дописывайте свои ветки обработки. Попробуйте раскомментировать «плохие» строки, чтобы увидеть, какие ошибки TypeScript предотвращает заранее.

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру