NonNullable

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

Тренажер по TypeScript

Utility Type NonNullable<T> используется для исключения null и undefined из типа. Это полезно, когда мы хотим гарантировать, что переменная точно содержит значение.

Пример использования: если у вас есть тип string | null | undefined, применение NonNullable превратит его просто в string. Это повышает безопасность кода, убирая необходимость постоянных проверок на существование значения в тех местах, где мы уверены в данных.

В этом уроке мы потренируемся «очищать» типы от пустых значений.

Список тем

1. Что останется?

id: 40730_non_01_result

В TypeScript существует utility тип NonNullable, который исключает null и undefined из типа T. Рассмотрите предоставленный код, где определён тип T, и определите, какой тип получится после применения NonNullable. Введите результат в виде строки, представляющей union тип, например, string | number. Убедитесь, что в ответе нет лишних пробелов или символов.

Что должно получиться?
type T = string | number | null | undefined;
// Чему равен NonNullable<T>?
Сообщения
Проверить
Показать подсказку

2. Применение утилиты

id: 40730_non_03_replace

Дополните фрагмент кода на TypeScript, чтобы функция `getLength` принимала только существующие значения (исключая `null` и `undefined`). Используйте утилиту `NonNullable` для оборачивания типа параметра функции. Заполните пропуски так, чтобы код компилировался без ошибок и корректно возвращал длину строки.

Заполните пропуски
function getLength(str: input1S<input2S>) {
    return str.length;
}

const result = getLength("hello");
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. До и После

id: 40730_non_04_sort

Перед вами список типов TypeScript. Распределите их по двум категориям: «Совместим с NonNullable» и «Не совместим». Тип считается совместимым, если NonNullable возвращает исходный тип (т.е. T не содержит null или undefined). Тип несовместим, если он включает null, undefined или является ими. Обратите внимание, что NonNullable — это утилитарный тип, исключающий null и undefined из объединения.

Перетяните элементы в соответствующие блоки
Совместим с NonNullable
Не совместим
string
number | null
undefined
boolean
string | undefined
{ a: number }
Сообщения
Проверить
Показать подсказку

4. Очистка массива

id: 40730_non_05_select

В данном задании представлена функция, которая фильтрует массив, удаляя значения null и undefined. Вам необходимо заполнить пропуски в коде, выбрав правильные типы из выпадающего списка, чтобы корректно использовать утилиту NonNullable для указания типа возвращаемого значения. Обратите внимание на синтаксис TypeScript и то, как NonNullable преобразует объединённые типы.

Нужно правильно расставить в пропуски предложенные варианты
function filterNonNull<T>(arr: (T | null | undefined)[]): input1S {
  return arr.filter((item): item is input2S => item != null);
}

const mixedArray = [1, null, 2, undefined, 3];
const filteredArray = filterNonNull(mixedArray); // тип: number[]
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Присвоение null

id: 40730_non_06_error

В этом фрагменте TypeScript-кода переменная объявлена с типом NonNullable, который исключает null и undefined. Однако ей пытаются присвоить значение null, что противоречит типу. Найдите строку с ошибкой и исправьте её, заменив null на допустимое строковое значение, чтобы код стал корректным.

Найдите ошибку и исправьте
let userName: NonNullable<string>;
userName = null;
console.log(userName);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Типизация пропсов

id: 40730_non_07_build

Из предложенных строк соберите корректное определение типа Props на TypeScript, где поле description очищается от undefined с помощью NonNullable. Убедитесь, что тип корректно объявлен и использует утилитарный тип NonNullable для указанного поля. Некоторые строки являются лишними и не должны входить в решение.

Перетяните в правильном порядке строки из одного блока в другой
type Props = {
  name: string;
  description: string | undefined;
  description: NonNullable<string | undefined>;
  age: number;
};
interface Props {
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

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

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