В реальном мире данные часто отсутствуют или еще не загружены. В TypeScript это выражается через типы null и undefined. Использование их в составе Union типов (например, string | null) заставляет разработчика явно обрабатывать сценарии отсутствия значения.
Режим strictNullChecks запрещает присваивать null обычным переменным, требуя явного указания этого в типе. Это спасает от множества ошибок времени выполнения («cannot read property of null»).
Темы упражнения:
- Объявление объединений с
nullиundefined. - Проверка на наличие значения перед использованием.
- Почему
number | nullлучше, чем простоnumber(если данных может не быть).
Практика поможет вам перестать бояться ошибок, связанных с пустыми ссылками.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Объявление Union типов.
- Union с примитивами.
- Union с null и undefined.
- Сужение Union типов (Narrowing).
- Модуль 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: Практические паттерны
1. Nullable и Non-nullable
Перед вами список объявлений переменных в TypeScript. Разнесите их по двум категориям в соответствии с тем, может ли тип переменной содержать значения null или undefined (nullable) или же переменная всегда должна иметь значение (non-nullable). Обратите внимание на использование union типов и строгой проверки null (strictNullChecks).
let username: string;let age: number | null;const isActive: boolean = true;let data: string | undefined;let counter: number;let value: boolean | null | undefined;const items: string[] = [];let response: object | null;2. Объявление типа
В этом задании вам нужно дополнить объявление интерфейса профиля пользователя, чтобы поле 'avatar' могло принимать значение null. Это типичная ситуация, когда данные могут отсутствовать, и TypeScript позволяет явно указать это с помощью union-типов. Допишите пропущенную часть типа поля 'avatar' в интерфейсе UserProfile, чтобы код соответствовал присваиваемому значению null.
interface UserProfile {
username: string;
avatar: string input1S;
}
const profile: UserProfile = {
username: 'john_doe',
avatar: null
};
console.log(profile.avatar);3. Ошибка строгого режима
В этом фрагменте TypeScript-кода допущена ошибка, связанная с использованием строгого режима проверки типов. Переменная объявлена с типом, который не позволяет присвоить ей значение null. Найдите строку с ошибкой и исправьте её, чтобы код стал корректным и компилировался без ошибок.
let price: number;price = null;console.log(price);4. Проверка на null
В представленном коде TypeScript найдите и выделите элементы, которые составляют условие проверки переменной на null. Для каждого выделенного фрагмента укажите, является ли он переменной, оператором сравнения или литералом null. Это упражнение поможет закрепить понимание работы с union-типами и сужением типов через проверки.
function processValue(value: string | null): string {
if ({{value~|~t1}} {{!==~|~t2}} {{null~|~t3}}) {
return value;
}
return "";
}5. Результат проверки
Рассмотрите код на TypeScript, который определяет две функции, принимающие параметр типа string | undefined. Одна функция использует проверку if, другая — оператор ?? (nullish coalescing). Код вызывает обе функции с аргументом undefined и выводит результаты. Выберите правильный вариант вывода.
function greetIf(name: string | undefined): string {
if (name) {
return name;
} else {
return "Guest";
}
}
function greetNullish(name: string | undefined): string {
return name ?? "Anonymous";
}
console.log(greetIf(undefined));
console.log(greetNullish(undefined));6. Безопасная функция
Из предложенных строк соберите корректную TypeScript-функцию, которая принимает аргумент типа `number | null`, проверяет его на `null`, и если значение не равно `null` — возвращает квадрат этого числа, иначе возвращает 0. В решении должны использоваться только необходимые строки, лишние строки включать не нужно. Функция должна быть объявлена с явной типизацией параметра и возвращаемого значения.
function safeSquare(value: number | null): number { if (value !== null) { return value * value; } else { return 0; }} console.log(value); if (value === undefined) { return -1; } let result = 0;7. Логика ветвления
В этом задании вам предстоит заполнить пропуски в коде TypeScript, который демонстрирует работу с union-типами, включающими null. Функция processString принимает аргумент, который может быть строкой или null, и возвращает строку. Вам нужно выбрать правильный тип аргумента, условие проверки на null и значение, возвращаемое в случае, если аргумент равен null. Используйте выпадающие списки для выбора подходящих вариантов.
// Функция, обрабатывающая строку или null
function processString(input: input1S): string {
// Проверяем, что input не равен null
if (input2S) {
// Если не null, возвращаем сам input
return input;
} else {
// Иначе возвращаем строку по умолчанию
return input3S;
}
}
// Пример использования
const result1 = processString("Hello");
const result2 = processString(null);8. Поток данных
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как функция обрабатывает входное значение null и возвращает результат.
function processData(data: string | null): string {
if (data !== null) {
return data.toUpperCase();
} else {
return "Default Value";
}
}
const output = processData(null);
console.log(output);9. Длина строки
Дан код на TypeScript, в котором определена функция, принимающая аргумент типа string | null. Функция использует тернарный оператор для проверки на null и возвращает длину строки или 0. Затем функция вызывается с конкретной строкой. Определите, какое числовое значение будет присвоено переменной result после выполнения кода. Введите одно число.
function safeLength(s: string | null): number {
return s !== null ? s.length : 0;
}
const result = safeLength("TypeScript");