TypeScript позволяет сужать (narrowing) типы внутри условных блоков. Самый простой способ сделать это — использовать оператор typeof.
Оператор typeof возвращает строку, указывающую тип операнда ('string', 'number', 'boolean', 'symbol', 'undefined', 'object', 'function'). Если вы проверите переменную в условии if (typeof x === 'string'), то внутри этого блока TypeScript будет точно знать, что x — это строка, и разрешит использовать строковые методы.
Изучите примеры и задания, чтобы понять, как безопасно работать с переменными типа unknown или union types.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 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. Базовая проверка типа
Дополните фрагмент кода функции processValue, которая принимает параметр типа string | number. В условии if необходимо использовать typeof guard для проверки, является ли значение числом. Заполните пропуски так, чтобы функция корректно выводила отформатированное число (с двумя знаками после запятой) или строку в верхнем регистре. Обратите внимание, что пропущены ключевое слово typeof и строковый литерал, указывающий на тип 'number'.
function processValue(value: string | number) {
if (input1S value === input2S) {
console.log("Число: " + value.toFixed(2));
} else {
console.log("Строка: " + value.toUpperCase());
}
}2. Зона действия Guard
Внимательно изучите приведённый код на TypeScript. В функции используется typeof guard для проверки типа переменной. Ваша задача — отметить все строки кода, в которых переменная `value` гарантированно имеет тип `string` благодаря проверке `typeof`. Не отмечайте строки, где тип `value` остаётся объединённым (`string | number`) или сужается к `number`.
function processValue(value: string | number): void {
{{console.log("Входное значение:", value);~|~t1}}
if (typeof value === "string") {
{{console.log("Это строка, длина:", value.length);~|~t2}}
{{const upper = value.toUpperCase();~|~t3}}
{{console.log("В верхнем регистре:", upper);~|~t4}}
} else if (typeof value === "number") {
{{console.log("Это число, квадрат:", value * value);~|~t5}}
{{const fixed = value.toFixed(2);~|~t6}}
{{console.log("С двумя знаками:", fixed);~|~t7}}
}
{{console.log("Обработка завершена.");~|~t8}}
}3. Значения typeof
В левой колонке приведены примеры значений в TypeScript, а в правой — возможные строки, которые возвращает оператор typeof. Сопоставьте каждое значение слева с правильным результатом применения typeof. Обратите внимание, что некоторые значения могут возвращать одинаковые строки, но в данном задании каждый правый вариант используется только один раз.
5'hello'trueundefinedfunction() {}Symbol()4. Опечатка в литерале
В этом фрагменте кода TypeScript используется type guard с оператором typeof для сужения типа переменной. Однако в условии допущена опечатка, из-за которой проверка не сработает корректно. Найдите и исправьте ошибку в строке с условием, чтобы код правильно определял тип переменной и выполнял соответствующую ветку.
let x: string | number = 'hello';if (typeof x === 'strng') { console.log('x is a string');} else { console.log('x is not a string');}5. Результат сужения
Проанализируйте код функции printId на TypeScript. Функция принимает параметр типа number | string. Внутри функции с помощью typeof guard проверяется, является ли параметр строкой. Если это строка, то возвращается её версия в верхнем регистре, иначе возвращается сам параметр. Код вызывает функцию с аргументом 42. Определите, что будет выведено в консоль, или возникнет ли ошибка. Выберите правильный вариант из предложенных.
function printId(id: number | string) {
// typeof guard
if (typeof id === 'string') {
return id.toUpperCase();
}
return id;
}
const result = printId(42);
console.log(result);6. Сборка логики Guard
Из предложенных строк соберите корректный фрагмент TypeScript-кода, который использует typeof guard для проверки типа переменной `value`. Если переменная имеет тип `number`, умножьте её на 2. Если переменная имеет тип `string`, выполните конкатенацию с добавлением строки ' world'. Игнорируйте лишние строки, не входящие в решение. Правильный порядок строк должен соответствовать логике: объявление переменной, проверка типа через typeof, выполнение соответствующей операции и вывод результата.
let value: number | string = 10;if (typeof value === 'number') { value = value * 2;} else if (typeof value === 'string') { value = value + ' world';}console.log(value);let value: boolean = true;if (typeof value === 'boolean') { value = !value;7. Выбор оператора
В данном задании вам предстоит заполнить пропуски в коде TypeScript, чтобы корректно проверить, является ли переменная типа boolean | undefined равной undefined. Используйте выпадающие списки для выбора подходящих операторов и значений. Обратите внимание на разницу между typeof guard и обычным сравнением с undefined.
let value: boolean | undefined = true;
if (input1S) {
console.log('value is undefined');
} else {
console.log('value is boolean');
}8. Анализ потока типов
Проанализируйте TypeScript-код сверху и расставьте шаги снизу в правильном порядке, чтобы получилась логика выполнения программы. Вам нужно восстановить последовательность рассуждений о типе переменной, используя typeof guard для сужения union-типа.
function processValue(value: string | number): string {
if (typeof value === 'number') {
return `Число: ${value * 2}`;
}
// На этом этапе TypeScript знает, что value - string
return `Строка: ${value.toUpperCase()}`;
}
const result = processValue(10);
console.log(result);