Типы null и undefined

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

Тренажер по TypeScript

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

  • undefined — переменная была объявлена, но ей еще не присвоено значение. Это состояние «неопределенности» по умолчанию.
  • null — это намеренное отсутствие значения. Вы явно указываете, что переменная «пуста».

При включенной опции strictNullChecks (строгие проверки на null), TypeScript запрещает присваивать null или undefined переменным других типов (например, number), если это явно не разрешено через объединение типов. Это помогает избежать классических ошибок времени выполнения. В этом уроке мы разберем синтаксис, отличия и правильное использование этих типов в коде.

Список тем

1. Проверка типов

id: 40625_null_und_01_predict

В этом задании представлен короткий фрагмент кода на TypeScript, использующий оператор typeof для проверки типов значений null и undefined. Проанализируйте код и определите, какие строки будут выведены в консоль после его выполнения. Выберите правильный вариант из предложенных ниже.

Выберите правильный вариант ответа
console.log(typeof null);
console.log(typeof undefined);
Сообщения
Проверить
Показать подсказку

2. Явное присваивание

id: 40625_null_und_02_replace

В этом задании вам нужно объявить переменную, которая должна хранить пустое значение. Используйте тип null и присвойте переменной значение null. Дополните код, вписав в пропуски правильные значения, чтобы код успешно компилировался и выводил ожидаемый результат.

Заполните пропуски
let emptyValue: input1S = input2S;
console.log(emptyValue);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Строгие проверки

id: 40625_null_und_03_select

В этом задании вам нужно правильно указать тип параметра функции. Функция `processValue` принимает один параметр, который может быть числом или `undefined`. Выберите из списка подходящий тип (union type) для параметра `value`. Обратите внимание, что в теле функции есть проверка на `undefined`, что подсказывает возможные типы значения.

Нужно правильно расставить в пропуски предложенные варианты
function processValue(value: input1S) {
    if (value === undefined) {
        console.log("Value is undefined");
    } else {
        console.log(`The number is ${value}`);
    }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Ошибка инициализации

id: 40625_null_und_04_error

В этом фрагменте кода TypeScript переменная используется в математической операции без предварительной инициализации, что приводит к неожиданному результату. Найдите строку с ошибкой и исправьте её, задав переменной начальное значение или добавив проверку на undefined.

Найдите ошибку и исправьте
let price: number;
let taxRate = 0.2;
let total = price + (price * taxRate);
console.log('Total:', total);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Распределение значений

id: 40625_null_und_05_sort

Перед вами список выражений и значений на TypeScript, связанных с типами null, undefined и void. Разнесите их по двум категориям: 'Явное отсутствие значения' (null) и 'Значение не задано' (undefined/void). Обратите внимание, что null используется для явного указания на отсутствие значения, а undefined и void связаны с неопределённым значением или отсутствием возвращаемого значения функции. Каждый элемент должен оказаться в одной из двух категорий.

Перетяните элементы в соответствующие блоки
Явное отсутствие значения (null)
Значение не задано (undefined/void)
null
let x = null;
function getNull(): null { return null; }
const y: null = null;
undefined
let z;
function doSomething(): void { }
void 0
Сообщения
Проверить
Показать подсказку

6. Жизненный цикл переменной

id: 40625_null_und_06_analyze

Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить жизненный цикл переменной: от объявления до очистки.

let userData: string | null | undefined;
console.log('Шаг 1:', userData);

userData = 'Иван Иванов';
console.log('Шаг 2:', userData);

userData = undefined;
console.log('Шаг 3:', userData);

userData = 'Анна Петрова';
console.log('Шаг 4:', userData);

userData = null;
console.log('Шаг 5:', userData);
Расположите элементы в логичном порядке
Присваивание строки 'Иван Иванов' — переменная получает конкретное значение
Объявление переменной userData без присваивания — значение undefined
Присваивание undefined — явный сброс к состоянию 'неопределено'
Присваивание null — явная очистка (отсутствие значения)
Вывод в консоль текущего значения после каждого шага (для отслеживания состояния)
Присваивание новой строки 'Анна Петрова' — переменная снова получает значение
Сообщения
Проверить
Показать подсказку

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

id: 40625_compiler

Этот пример демонстрирует работу с типами null и undefined в TypeScript. Вы узнаете, как объявлять переменные этих типов, как TypeScript обрабатывает возможное отсутствие значений, и как использовать строгую проверку типов для безопасности. Попробуйте изменять значения переменных: присваивайте null вместо undefined, раскомментируйте строки с ошибками, чтобы увидеть, как компилятор предотвращает проблемы. Экспериментируйте: добавляйте свои условные проверки, создавайте функции для обработки null/undefined, и наблюдайте за результатами в консоли.

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