Truthiness narrowing

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

Тренажер по TypeScript

Truthiness narrowing — это механизм сужения типов в TypeScript на основе проверки значений на «истинность».

В JavaScript значения делятся на:

  • Falsy: false, 0, "", null, undefined, NaN
  • Truthy: все остальные значения

Когда вы пишете if (value), TypeScript понимает, что внутри блока значение не может быть falsy, и сужает тип соответственно. Это позволяет безопасно работать с string | null или number | undefined без явных проверок на тип.

В этом практическом тренажёре вы разберёте примеры truthiness-проверок и научитесь использовать сужение типов в реальном коде.

Список тем

1. Проверка на truthiness

id: 40687_truth_01_replace

В этом задании вам предстоит дополнить код функции на TypeScript, которая обрабатывает значение типа string | null. Используйте truthiness narrowing (проверку на истинность) для сужения типа до string, чтобы затем безопасно обратиться к свойству строки. Заполните пропуски так, чтобы код компилировался и корректно возвращал длину строки, если она непустая, иначе возвращал -1.

Заполните пропуски
function processString(input: string | null): number {
    if (input1S) {
        // После этой проверки тип input - string
        const str: input2S = input;
        return str.input3S;
    }
    return -1;
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Что выведет код с truthiness-проверкой

id: 40687_truth_02_predict

Проанализируйте фрагмент кода на TypeScript, использующий union-тип и truthiness narrowing (проверку на истинность). Определите, какая строка будет выведена в консоль при выполнении данного кода. Обратите внимание на значение переменной и как оно обрабатывается в условии if.

Выберите правильный вариант ответа
type MyType = string | number | null | undefined;
let value: MyType = '';

if (value) {
    console.log('Truthy branch: ' + value);
} else {
    console.log('Falsy branch: ' + value);
}
Сообщения
Проверить
Показать подсказку

3. Ошибка при работе с nullable-типом

id: 40687_truth_03_error

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

Найдите ошибку и исправьте
function processName(name: string | null): string {
    if (name === undefined) {
        return 'No name provided';
    }
    return name.toUpperCase();
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Собери код с сужением типа

id: 40687_truth_04_build

Из предложенных строк соберите корректную TypeScript-программу, которая использует сужение типа (type narrowing) через проверку на истинность (truthiness narrowing). Программа должна объявить переменную union-типа `string | null`, проверить её в условии `if`, и внутри блока использовать как строку, выводя её в верхнем регистре. В блоке `else` нужно вывести сообщение о том, что значение равно `null`. Лишние строки, содержащие неверную логику или использование переменной без проверки, включать в решение не следует.

Перетяните в правильном порядке строки из одного блока в другой
let value: string | null = 'hello';
if (value) {
    console.log(value.toUpperCase());
} else {
    console.log('value is null');
}
console.log(value.toUpperCase());
if (!value) { console.log('value is falsy'); }
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Разметь части кода

id: 40687_truth_05_highlight

Разметьте части кода TypeScript, связанные с truthiness narrowing. Вам нужно определить, какие фрагменты кода являются truthiness-проверкой, суженным типом, union-типом или falsy-веткой. Это поможет лучше понять, как TypeScript сужает типы на основе проверок истинности значений.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
function printLength(value: {{string | null~|~t1}}) {
  if ({{value~|~t2}}) {
    console.log({{value~|~t3}}.length);
  } {{else~|~t4}} {
    console.log('Значение отсутствует');
  }
}

function processInput(input: {{string | undefined~|~t5}}) {
  if ({{input~|~t6}}) {
    return input.trim();
  }
  return '';
}
Falsy-ветка
Union-тип
Truthiness-проверка
Суженный тип
Сообщения
Проверить
Показать подсказку

6. Тип переменной после сужения

id: 40687_truth_08_give

В приведённом фрагменте кода TypeScript объявлена переменная union-типа, которая может быть строкой, числом или null. Затем выполняется проверка на истинность (truthiness) с помощью оператора if. Определите, какой тип TypeScript будет у переменной внутри блока if после сужения. Введите тип в виде строки, например 'string', 'number' или 'null'.

Что должно получиться?
let value: string | number | null = 'Hello';
if (value) {
    // Какой тип у value здесь?
    console.log(value);
}
Сообщения
Проверить
Показать подсказку

7. Отметь все falsy-значения в коде

id: 40687_truth_09_click

Внимательно изучите представленный фрагмент кода на TypeScript. Ваша задача — кликнуть и выделить все значения (литералы и переменные), которые являются falsy в контексте TypeScript. Не отмечайте ключевые слова, имена переменных, операторы или другие части синтаксиса, которые не являются самими значениями.

Кликните по всем фрагментам, которые подходят под условие задания.
function checkValue(val: any): string {
  if ({{val~|~t1}}) {
    return "truthy";
  } else {
    return "falsy";
  }
}

let test1 = {{0~|~t2}};
let test2 = {{''~|~t3}};
let test3 = {{null~|~t4}};
let test4 = {{'text'~|~t5}};
let test5 = {{42~|~t6}};
let test6 = {{undefined~|~t7}};
let test7 = {{[]~|~t8}};

console.log(checkValue(test1));
console.log(checkValue(test2));
Сообщения
Проверить
Показать подсказку

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

id: 40687_compiler

Изучите, как TypeScript использует логические проверки для сужения типов. В этом примере мы работаем с потенциально пустыми данными: попробуйте передать в функцию разные значения — от обычных строк до null или пустых кавычек. Обратите внимание, как TypeScript «понимает», когда переменная точно существует, а когда — нет. Экспериментируйте: добавьте проверку через оператор двойного отрицания (!!) или попробуйте обработать число 0, чтобы увидеть важные нюансы Truthiness narrowing!

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